11548 sujets

JavaScript, DOM et API Web HTML5

Affichage d'un div sur position de la souris avec Firefox

Bonjour,
Ben oui je sais c'est un vieux problème, mais apparemment toujours d'actualité. Donc je n'ai trouvé que de vieilles solutions de 2005/2006 que je n'ai pas réussi à adapter. Pourtant depuis le temps .... Comme je n'utilise le Javascript que de loin en loin je ne maitrise pas bien.

Le but : sur une page longue, quand le visiteur est en bas de page une div doit s'afficher à l'endroit où il clique (moins un chouilla pour plus d'élégance) pour lui éviter de remonter. Il faut donc détecter la position de la souris au clic et la passer dans le CSS au style de la div.

En fait j'ai un code qui marche super sous IE et Opera. Mais Firefox s'obstine à afficher la div en haut de page. Si quelqu'un pouvait m'expliquer pourquoi ça m'aiderait.


function mousePosition(e){
	var posx = 0;
	var posy = 0;
	posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
	posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	document.getElementById("POPUP_SMALL").style.top = posy - 100;
}


Et dans le html j'ai ça :


<body onload="" onclick="mousePosition(event)">
......
<a href="javascript:void()" onclick="return showdiv('POPUP_BIG','2')">... suite</a>
......
<div id="POPUP_BIG" class="popup_big">
dans cette div il y a la div POPUP_SMALL de classe popup_small
</div>


Et dans le CSS :


.popup_big {
	background-image:url(images/img_fixes/fond_black.png);
	z-index:50;
	display:none;
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
	height:100%;
}

.popup_small {
	top:200px;
	left:100px;
	width:700px;
	height:auto;
	border-top:#c9c9c9 solid 2px;
	border-left:#c9c9c9 solid 2px;
	border-right:#555555 solid 3px;
	border-bottom:#555555 solid 3px;
	background-color:#e65f05;
	position: absolute;
	padding: 8px;
	color: #ffffff;
	}
Salut,

Essaies ca, ca marches chez moi pour FF et chrome.

Jetes un oeil ici : http://www.quirksmode.org/js/events_properties.html


function mousePosition(e) 
     {
          var posx = 0;
	  var posy = 0;
	  if (!e) var e = window.event;
	  if (e.pageX || e.pageY)
               {
                    posx = e.pageX;
		    posy = e.pageY;
		}
	  else if (e.clientX || e.clientY) 	
		{
			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
	  document.getElementById("POPUP_SMALL").style.top = posy - 100;
     }
Merci de ta réponse Krafton.
Le script que tu m'indiques est exactement celui que j'avais à l'origine. J'avais viré les 1er if pour tester car en fait j'avais constaté que les navigateurs dernière génération n'y vont jamais.
Quand à la source que tu m'indiques, la seule chose que j'ai bien compris c'est : "As to the mouse position, the situation is horrible. " Smiley eek
Si ça marche chez toi sous Firefox, c'est que je dois avoir un truc qui va pas peut être dans la position de mes div car c'est une div dans une autre, et que FF interprèterait encore différemment ? Mais alors là je vois pas comment faire autrement. Je patauge Smiley bawling
Sujet clos
Aller à