Discussion :

[lionel12]

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 :

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

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

[Darkyl]

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 :

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
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.

[Bovino]

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

[Darkyl]

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.