positionnement relatif

Invité
Invité n'ayant pas de compte PHPfrance

10 mai 2008, 10:43

Bonjour à tous,

j'ai 3 div comme ceci
<div class="mondiv1"></div>
<div class="mondiv2"></div>
<div class="mondiv3"></div>

J'ai crée un 4ème div avec javascript, non imbriqué, qui apparait sur événement onclick d'un des 3 divs ci-dessus.
Ya til un moyen de calculer dynamiquement la position de ce 4ème div, de manière à ce qu'il soit toujours à 10pixels du div cliqué, quelle que soit la position de ce div cliqué?
du div cliqué?

Invité
Invité n'ayant pas de compte PHPfrance

10 mai 2008, 11:52

j'ai découvert des éléments itéressants: offsetX et offsetY
Pour positionner un 4ème div, on peut faire ceci:

html:
<div class="mondiv1" onclick="test()"></div> 
<div class="mondiv2" onclick="test()"></div> 
<div class="mondiv3" onclick="test()"></div>
Le 4ème div à positionner est généré en javascript, je ne mets pas le code:
<div class="mondiv4"></div>

En javascript, on transmet les coordonnées du clic souris au 4ème div ainsi:
function test () {
document.getElementById('mondiv4').style.left = event.offsetX;
document.getElementById('mondiv4').style.top = event.offsetY;
}
Le principe fonctionne.
Seul problème: les valeurs de "event.offsetX" et "event.offsetY" ne sont pas dans la même unité que les attributs css "top" et left", ce qui donne un positionnement inattendu de mondiv4.

La question: comment convertir des coordonnées offset en valeurs à pixels utilisés en css?
Merci pour vos réponses.

Invité
Invité n'ayant pas de compte PHPfrance

10 mai 2008, 12:24

bonben g trouvé tout seul:
function getBoxPos() {
document.getElementById('mondiv4').style.posLeft = event.clientX;
document.getElementById('mondiv4').style.posTop = event.clientY;
}

ViPHP
ViPHP | 4039 Messages

11 mai 2008, 09:58

bonben g trouvé tout seul:
C'est super, c'est le but.
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.