Discussion :

[renaud26]

Bonjour à tous,

Une boucle PHP lit une table et affiche des images avec liens. Je voudrais que ces liens affichent une petite popup d'info en DHTML.

L'ennui c'est que la liste peut être longue et nécessiter les scrolls du navig. Résultat : si j'affiche la popup depuis une des lignes du bas, elle n'est plus visible !

Je dois donc régler le style.top. Oui, mais comme on est dans une boucle, le "top" est variable. J'ai donc eu l'idée de récupérer la coordonnée Y de chaque image et de la passer en paramètre dans la fonction d'ouverture de popup.

Dans la boucle PHP

Code :

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

1
2
3
4
5
6
 
$i = 0;
while($row = mysql_fetch_assoc($sql)){
 echo '<div id="image'.$i.'"></div><img src="image.gif" onclick="cherche_coords('"image".$i."')"'>
$i++;
}

Et côté JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function cherche_coords(obj) {
	var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
			curleft = obj.offsetLeft;
			curtop = obj.offsetTop;
			} while (obj = obj.offsetParent);
		}
document.getElementById("test").innerHTML = curtop;
return [curleft,curtop];
}

Mais ça retourne toujours 0.
Quelqu'un peut m'aider ?
Merci à lui.

[emmanuel.remy]

Salut,

Dans la faq: http://javascript.developpez.com/faq...script#coordXY

ERE

[renaud26]

Bonjour et merci, effectivement, c'est tout à fait ce qu'il me fallait.

Avant que je ne passe ce post en résolu, j'aurais un petit souci à soumettre : comment faire apparaître des sauts de ligne dans le popup ?

Code :

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

1
2
3
$text_a_afficher = "ceci est le texte que je veux afficher et ICI \n je voudrais un saut de ligne";
echo "<a href='#' onclick=\"affiche_popup('".$text_a_afficher."') \">";

Dans le JS, c'est un simple :

Code :

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

1
2
3
4
 
document.getElementById("contentArea").innerHTML = content;
//ou (mais le résultat est le même)
document.getElementById("contentArea").firstChild.data = content;

J'ai essayé avec <br> : ça s'affiche en clair.
Avec \\n : pas de saut de ligne. idem avec \r\n
J'ai essayé simple quote, double quote... soit ça ne fait rien du tout, soit la console FF sort "unterminated string literal".

Tu aurais une idée sur la question ?
Je t'en remercie d'avance.

[SpaceFrog]

en HTML le saut de ligne c'est <br/> pas \n

[renaud26]

Bonjour, oui je n'en doute pas une seconde...
Mais <br/> s'affiche en clair dans le popup et ne provoque pas de saut de ligne.