[Résolu] Menu déroulant animé : setTimeout()

Marsh Posté le 22-04-2008 à 10:26:58

Bonjour,

Bon d'abord pour le pseudo, je suis un GROS posteur (merci les modos de pas balancer ) et c'est un multinick créé pour l'occasion. Promis j'ai pas mal traîné sur Prog à une époque [:cosmoschtroumpf]

Je code donc, en ce moment, un site pour une association. En bénévole, bin ouais c'est pour ma copine

Le but est de faire un menu déroulant en Javascript, langage que je connais donc assez mal.

A priori, c'est plutôt simple : on crée un cadre caché, et quand on clique où il faut, on le décache, puis on le déplace en utilisant les propriétés style.visibility, style.top et offsetTop.

Le code de base :

Code :

<div id="gauche">
<table class="tablemenu">
<tr>
<td><a class="menuGen" href="javascript:void(0);" onClick="ChangePositionMenu(\'MENU_BAS\');">Menu</a></td>
</tr>
</table>
<div id="MENU_BAS" style="visibility: hidden;">
<items du menu>
</div>
</div>

Code :

// Fonctions Javascript
function ChangePositionMenu(id) {
var elem = document.getElementById(id);
elem.style.visibility = "visible";
while(elem.offsetTop < 200) {
elem.style.top += t + 1;
}
}

Mais comme vous l'imaginez, quand on clique, ça déplace bien le menu comme il faut, mais instantanément. C'est là que vient théoriquement se greffer la fonction setTimeout() :

Code :

// Fonctions Javascript
function ChangePositionMenu(id) {
var elem = document.getElementById(id);
elem.style.visibility = "visible";
if(elem.offsetTop < 200) {
elem.style.top += t + 1;
setTimeout(ChangePositionMenu(id), 10);
}
}

On passe d'un while à un if vu qu'un while n'est plus nécessaire dans le cadre d'un appel récursif.

Le souci est que le premier appel fonctionne bien, mais ensuite... Il mouline dans le vide.

Je ne vois vraiment pas ce qui ne tourne pas, si vous avez une idée... merci d'avance !

NB : le code est volontairement très incomplet, on se concentre sur ce qui ne marche pas.

++

Message édité par josephineassoc le 22-04-2008 à 18:18:19

Reply

Marsh Posté le 22-04-2008 à 10:26:58

Reply

Marsh Posté le 22-04-2008 à 18:17:12

Bon bin après une journée d'efforts et l'aide d'un pote, c'est résolu !

Voici donc le code final, pour ceux que ça intéresse :

Code :

function ChangePositionMenu(id) {
var elem = document.getElementById(id);
elem.style.visibility = "visible";
if(elem.offsetTop < 200) {
elem.style.top = (parseInt( menubas.offsetTop, 10) + 1) +"px";
setTimeout(ChangePositionMenu(id), 10);
}
}

C'était la ligne où l'on modifiait la propriété qui posait problème.

Ce code peut servir de base à tout menu animé, j'ai ensuite fait un truc à base d'images (pour utiliser une police non standard).

++

Reply

[Résolu] Menu déroulant animé : setTimeout()

Sujets relatifs:

Leave a Replay