Discussion :

[getz85]

Bonjour!

J'ai un problème avec un code permettant d'afficher un petit popup au survol d'un lien. Ce popup est un div caché ou non.
Mais celui ci ne s'affiche pas correctement (il est à la bonne place au niveau des abscisses, mais son comportement au niveau des ordonnées est complètement chaotique: des fois bien trop haut, des fois trop bas...)

Code html :

Code HTML :

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

1
2
<a href="blabla.php" onmouseover='previsu(param1,param2,event)'>blabla</a>
<div id="popup"></div>

code CSS de mon DIV qui sert de popup

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#popup
{
	position:absolute;
	top: 5px;
	left:5px;
	width: 250px;
	height: 170px;
	font: .8em Arial, sans-serif;
	padding: 5px;
	visibility: hidden;
	border: 1px black solid;
	clip: auto;
	overflow: hidden;
}

Code javascript (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
 
 
function previsu(param1,param2,event)
{
if(!event)
event = window.event;
 
	xpos = event.clientX;
	ypos = event.clientY;
 
//bla bla bla....
var previsu = document.getElementById("popup");
previsu.innerHTML = xhr.responseText;
previsu.style.top = ypos + 10 + "px";
previsu.style.left = xpos + 10 + "px";
previsu.style.visibility = "visible";
 
}

Merci d'avance!

[le_chomeur]

ta div ne serait pas elle même dans un autre élément positionné en absolute ou relative ?

[getz85]

Merci de ta réponse le_chomeur.
Oui ma div est bien positionnée dans une autre div positionnée en relative.

[le_chomeur]

:-) donc il faut que tu prennes en compte cela,
la position de ta div, sera donc considéré dans son conteneur et non pas par rapport a la souris, explication :

div contenante ( relative ) :
200 /200 positionné a 300px du bord gauche

div contenu (absolute):

40/40 positionnée a 100 du bord gauche = 100+ position parent ( pour autant de parent qu'il y aura ) = 400px du bord gauche.

pour calculer cela il faut calculer la position des parents :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
function getPosition (element) {
	var tmpLeft = element.offsetLeft;
	var tmpTop = element.offsetTop;
	var MyParent = element.offsetParent;
	while(MyParent) {
		tmpLeft += MyParent.offsetLeft;
		tmpTop += MyParent.offsetTop;
		MyParent = MyParent.offsetParent;
	}
		alert(tmpLeft + "px");
		alert(tmpTop +"px");
	}

tu peux t'inspiré de ça

[getz85]

Merci beaucoup, je vais regarder ça!

[getz85]

Bon récupérer l'ordonnée du conteneur parent, ça marche bien.
Si j'applique ceci au code d'avant :

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
 
function getPositionY (element) 
{
	var tmpTop = element.offsetTop;
	var MyParent = element.offsetParent;
	while(MyParent) {
		tmpTop += MyParent.offsetTop;
		MyParent = MyParent.offsetParent;
	}
	return tmpTop;
	//alert(tmpLeft + "px");
	//alert(tmpTop +"px");
}
 
...
previsu.style.top = getPositionY(contenu)+"px";
...

Le popup s'affiche bien en haut du conteneur parent (donc pas vers la souris, logique, c'était pour tester).

Mais dès que je rajoute :

Code :

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

previsu.style.top = getPositionY(contenu)+ypos+"px";

Le popup réagit encore nimporte comment!
J'ai donc l'impression que ça vient du event.clientY...

[Bovino]

Au pire, tu peux regarder dans la FAQ

[le_chomeur]

pour positionner ta div a l'intérieur de l'autre tu doit faire :

var offsetX = (event.clientX - positiondivcontenante.left);
var offsetY = (event.clientY - positiondivcontenante.top);

ou left et top , sont calculer grâce a la méthode donnée plus haut

[getz85]

Ca marche nickel en faisant :

Code :

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

1
2
3
 
var monBody = document.documentElement || document.body;
previsu.style.top = ypos+monBody.scrollTop+"px";

J'avais regardé la FAQ mais j'avais pas fait attention à ce scrollTop.
Merci à vous deux.