Discussion :

[sohnic]

Bonjour,
J'ai développé un site web dans lequel j'ai intégré une div, remplie à la volée en ajax et qui apparait comme une fenêtre modale lorsqu'on clique sur un lien.
Mon problème est que si on est en bas de la page, cela provoque un retour en haut de page, ce qui oblige à revenir au point où on en était avant de cliquer sur le lien et est même un peu perturbant.
Le mieux est de voir par vous-même:
http://www.polebio.lrsv.ups-tlse.fr/.../searchfortest (déjà là le problème existe, bien que moins génant).
Dans le menu déroulant laisser sur All. Cases de la colonne du milieu: choisir Brachypodium (2eme case). Cases de la colonne de droite: choisir Leaves (9eme case), puis cliquer sur search. Cela affiche un tableau contenant des *.
Scroller en bas du tableau (ou mieux tout afficher et cliquer sur une * de la dernière ligne) et là vous comprendrez pourquoi l'utilisateur risque d'être un peu surpris...

Le script simplifié:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function pop_up(xml,uid,label){
	var url = "http://www.polebio.lrsv.ups-tlse.fr/WallProtDB//index.php/searchfortest/modal2/"+xml+'/'+uid+'/'+label
	$.post(url, function(data) {
			data+='<br /><br /><input type="button" value="close" onclick="close_cd()">';
			$('#overlay_form').html(data);  //Setting the content of html 
 
	});
 
	//open popup
	$("#overlay_form").fadeIn(1000);
 
        //Recuperer les coordonnees de la souris quand on clique sur un lien (*) du datatable, afin d'afficher la fenetre modale la ou on a cliqué
	$("#searchTable").click(function(e){
 
				X=e.pageX;
 				Y=e.pageY;
				positionPopup(X,Y);
			})
}
 
function positionPopup(X,Y){
	if(!$("#overlay_form").is(':visible')){
		return;
	}
 
	$("#overlay_form").css({
		position:'absolute',
		left:X,
		top:Y		
	});
}
 
function close_cd(){
	$("#overlay_form").fadeOut(500); //Closing the opened window
}

Dans le body:
Pour chaque * du tableau on a:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="pop_up('xmlfile','id','nameOfSequence')">*</a>

Et pour finir, un div unique qui se remplit et se positionne selon le lien qu'on a cliqué.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="overlay_form" style="display:none;"></div>

Voilà, si quelqu'un a une solution ou un lien vers une méthode plus fonctionnelle, je suis preneur !

Merci beaucoup,

Sohnic

[sohnic]

En fait il suffisait de travailler avec les ancres:
Le code HTML (le lien) devient (on passe un paramètre supplémentaire au javascript + ajout d'une ancre):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 
<a href="#" onclick="pop_up('xmlfile','id','nameOfSequence','cellnumber')">*</a>
 
<div id="cellnumber"></div>";

Et le javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
function pop_up(xml,uid,label,cellnumber) //paramètre supplémentaire cellnumber
{
///////Rien ne change//////////////////	
var url = "http://www.polebio.lrsv.ups-tlse.fr/WallProtDB//index.php/searchfortest/modal2/"+xml+'/'+uid+'/'+label
	$.post(url, function(data) {
			data+='<br /><br /><input type="button" value="close" onclick="close_cd()">';
			$('#overlay_form').html(data);  //Setting the content of html 
 
	});
 
	//open popup
	$("#overlay_form").fadeIn(1000);
 
        //Recuperer les coordonnees de la souris quand on clique sur un lien (*) du datatable, afin d'afficher la fenetre modale la ou on a cliqué
	$("#searchTable").click(function(e){
 
				X=e.pageX;
 				Y=e.pageY;
				positionPopup(X,Y);
			})
//////////////////jusque la
//Soit on utilise ca, avec un effet de ballayage
/*$('html,body').animate({scrollTop: $("#"+cellnumber).offset().top}, 'fast'     );
$('html,body').animate({scrollLeft: $("#"+cellnumber).offset().left}, 'fast'      );*/
 
//Soit ca, avec un effet d'immobilite
$('html,body').animate({scrollLeft: $("#"+cellnumber).offset().left,
	scrollTop: $("#"+cellnumber).offset().top
	}     );
}
 
//////Les autres fonctions restent à l'identique

S.

[sohnic]

Et une autre méthode, sans les ancres et qui donne de meilleurs résultats pour le repositionnement latéral:

Remplacer ce bout de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
//Soit ca, avec un effet d'immobilite
$('html,body').animate({scrollLeft: $("#"+cellnumber).offset().left,
	scrollTop: $("#"+cellnumber).offset().top
	}     );
}

par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
//1-coordonnees actuelles du scroll
	var $window = $(window);
	Xscroll=$window.scrollLeft();
	Yscroll=$window.scrollTop();
	//2- replacer le scroll
	$('html,body').animate({scrollLeft: Xscroll,
	scrollTop: Yscroll
	}     );

La fonction a un argument de moins:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
function pop_up(xml,uid,label)

Et le lien d'appel devient (le div qui suit n'est plus nécessaire et a donc été supprimé):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" onclick="pop_up('xmlfile','id','nameOfSequence')">*</a>

Peut-être que ça aidera quelqu'un un jour !

S.