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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Menu déroulant animé : setTimeout()

josephineassoc

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

Publicité

josephineassoc

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

++

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
problème de menu(balise a:hover)	[Résolu] Conseil rapide pour formulaire
[Résolu] Fonction count en PHP	[Résolu]Include et GET
[Résolu] Boucle For et condition if	[Résolu]Afficher résultat requête MAX
Menu flash avec AJAX, comment faire le lien?	RESOLU PHP bbcode dans une shoutbox
[php + Ajax] include "dynamique?" [résolu]	petit souci avec variable d'un Input [résolu]
Plus de sujets relatifs à : [Résolu] Menu déroulant animé : setTimeout()

Page générée en 0.049 secondes