Translation horizontale par rapport à la position d'une autre div

Version imprimable

Bonjour à tous,

Voilà je souhaite réaliser un menu horizontal avec une petite icône juste en dessous du menu qui, lorsque je clique sur un des liens du menu, se déplace pour venir se placer en dessous du lien cliqué. Je vous joins une copie d'écran pour que vous compreniez mieux: sur l'image l'icône est en dessous de l'onglet "welcome", et si je clique sur "our work" par exemple je veux que l'icône se déplace sous cet onglet.

menu

Je sais comment faire une translation en javascript en partant d'une position définie en pixel jusqu'à une autre position définie en pixel. Pour l'instant voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function move() { var left = 300 function frame() { left++ document.getElementById('small-icon').style.left = left + 'px' if (left == 400) clearInterval(id) } var id = setInterval(frame, 10) }
Le problème c'est que mon menu n'a pas une position fixe vu que je veux qu'il soit en permanence centrée quelque soit la taille de la fenêtre, la position des onglets en pixels n'est donc pas fixe.

Je voudrais donc savoir s'il est possible de dire en javascript: position (abscisse) de départ de mon icône = abscisse de l'onglet "welcome"; position d'arrivée = position de l'onglet "our work".

J'espère avoir été clair, n'hésitez à me demander des précisions si ce n'est pas le cas.

Merci d'avance pour votre aide

Salut,

J'ai une fonction qui te renvoie la position d'un objet dont tu connais l'id...
Peut-être que cela peut t'aider/

Code:

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
jQuery.fn.extend({
   findPos : function() {
       obj = jQuery(this).get(0);
       var curleft = (obj.offsetLeft-obj.scrollLeft) || 0;
       var curtop = (obj.offsetTop-obj.scrollTop) || 0;
       while (obj = obj.offsetParent) {
                curleft += (obj.offsetLeft-obj.scrollLeft)
                curtop += (obj.offsetTop-obj.scrollTop)
       }
       return {x:curleft,y:curtop};
   }
});
 
 
 
function positiongeneralx(nomappli)
{
var position=new Object;
 
position = $('#'+nomappli).findPos();
 
return position.x;
}
 
 
function positiongeneraly(nomappli)
{
var position=new Object;
 
position = $('#'+nomappli).findPos();
 
return position.y;
}

Les deux dernières fonctions peuvent être réuni en une (qui te renverra un object position.
Il te faut JQUERY pour faire marcher ces fonctions.

19/06/2012, 17h32
Bovino

Mouais... enfin, tu peux faire plus simple avec .position(), .scrollTop() et .scrollLeft() :aie:
19/06/2012, 18h36
Darkyl

Citation:

Mouais... enfin, tu peux faire plus simple avec .position(), .scrollTop() et .scrollLeft()

Ah, je savais pas...
D'un coup, ma fonction est moins intéressante, je savais pas qu'il y avait des fonctions toutes faites qui te renvoyait la position absolute dans le body de la page top (index quoi)...récursive en fonction des parents...
Par exemple, si l'objet est inséré dans une frame ou un div.

Autant pour moi.