Menu dynamique [ clearInterval() ] [Résolu]

mimagyc 6 Messages postés mardi 28 novembre 2006Date d'inscription 18 décembre 2008 Dernière intervention - 14 oct. 2008 à 13:23 - Dernière réponse : mimagyc 6 Messages postés mardi 28 novembre 2006Date d'inscription 18 décembre 2008 Dernière intervention
- 18 déc. 2008 à 13:38
Bonjour,

Je souhait mettre un place un simple agrandissement en largeur(width) d'une balise <li> et la reduire lorsque la souris sors de la balise.

J'utilise un setInterval , mon probleme est lorsque la balise s'agrandit, elle ne s'arrete pas , elle continue en boucle, selon mon code, arrive a 100, elle s'arrete or la elle continue en boucle a redefinir la largeur a 100.

le code HTML :

<!-- Menu -->

[index.php?action=home <li id="home" class="menu" onmousemove="menu_mouse('home','p')" onmouseout="menu_mouse('home','m')" style="width:60px;">Home&amp;nbsp;&amp;nbsp;</li>]

<li id="jeu" class="menu" onmousemove="menu_mouse('jeu','p')" onmouseout="menu_mouse('jeu','m')" style="width:60px;">le jeu&amp;nbsp;&amp;nbsp;</li>

<li id="infos" class="menu" onmousemove="menu_mouse('infos','p')" onmouseout="menu_mouse('infos','m')" style="width:60px;">Infos&amp;nbsp;&amp;nbsp;</li>

<li id="forum" class="menu" onmousemove="menu_mouse('forum','p')" onmouseout="menu_mouse('forum','m')" style="width:60px;">[forums/ Forum&amp;nbsp;&amp;nbsp;]</li>

<!-- FIN Menu -->



et le code javascript :
var timer;
function menu_mouse(id,sens) {
    timer = setInterval("menu('"+id+"','"+sens+"')",20);
}
 
function menu(id,sens) {
actuel = $(id).offsetWidth;
    
    
    if (sens == "p" &amp;&amp; actuel <100) {
        suite = actuel+1;
        $(id).style.width =suite+"px";
        actuel = suite;
    }
    else if (sens == "m" &amp;&amp; actuel > 60){
        suite = actuel-1;
        $(id).style.width =suite+"px";
        actuel = suite;
    }
    else if (sens == "m" &amp;&amp; actuel <61 ) {
        clearInterval(timer);
    }
    else if (sens == "p" &amp;&amp; actuel >99) {
        clearInterval(timer);
    }
    else {
        clearInterval(timer);
    }
}


Je ne comprend pas pourquoi le clearinterval ne fonctionne pas 

Merci.
ps: lien : http://mimaro.free.fr/test/
Afficher la suite 

Votre réponse

7 réponses

PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 15 oct. 2008 à 22:45
+3
Utile
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">

----,

faire une fonction menu_mouse pour chaque
menu

</td>

</td>
</tr>
</tbody>
</table>ou alors
créer une classe...
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, C'est un peu crassout mais
bon</td>
</td></tr></tbody></table>ça marche
c'est l'essentiel, mais je ne doute pas que tu nous pondra la classe
menu_glissant à l'occasion...
...bonne continuation...
;O)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 15 oct. 2008 à 19:09
0
Utile
Bonjour,
Attention les navigateurs ne gére pas
setInterval de la même façon, donc il faut bien prendre gare à ce que l'on
fait...

Je vois plusieurs soucis à ton script

Tu utilises
l'événement onmousemove sur tes LI, soit mais
cela signifie que dés que tu bouge ta souris sur le LI tu d'éclenches la
fonction menu_mouse qui
créer un nouveau timer sans détruire celui en cours, donc celui en cours continu
et lorsque tu fait clearInterval(timer); c'est
le dernier référencé que tu kill.

Peut être pas clair aussi je te
propose pour te rendre compte d'afficher les infos dans ta page
<script language= "javascript">

//------------------
function
debug(txt_){
var Obj = document.getElementById("D_INFO");
if( Obj){

  var szDebug = Obj.innerHTML;
  Obj.innerHTML = txt_ + szDebug;
}

}
var timer;
//----------------------------

function menu_mouse( id, sens){
  clearInterval(timer);

  timer = setInterval("menu('"+id+"','"+sens+"')",20);
}
//--------------------
function menu(id,sens){

  var actuel = parseInt(document.getElementById(id).offsetWidth);

  debug(sens +" -> " +actuel +" timer = " + timer +"
");

  if (sens == "p" && actuel <100) {
    actuel ++;

    document.getElementById(id).style.width = actuel +"px";
  }

  else if (sens == "m" && actuel > 60){
    actuel --;

    document.getElementById(id).style.width = actuel +"px";
  }

  else if (sens == "m" && actuel <61 ) {
    debug( " KILL
Timer -> " + timer +"
");
    clearInterval(timer);
  }

  else if (sens == "p" && actuel >99) {
    debug( " KILL
Timer -> " + timer +"
");
    clearInterval(timer);
  }

  else {
    debug( " KILL Timer -> " + timer +"
");

    clearInterval(timer);
  }
}
</script>
ajoute juste entre les balises BODY ceci

en
prétant l'oeil tu verras que des timer ne sont pas killer.
;O)
Commenter la réponse de PetoleTeam
mimagyc 6 Messages postés mardi 28 novembre 2006Date d'inscription 18 décembre 2008 Dernière intervention - 15 oct. 2008 à 19:57
0
Utile
Merci pour ta réponse!

Alors apres avoir mis en place ton code, j'ai une erreur dans la console de FF :

Avertissement : Une fin de valeur pour la propriété était attendue, mais « ; » a été trouvé.  Erreur d'analyse de la valeur pour la propriété « width ».  Déclaration abandonnée.
Fichier Source : http://127.0.0.1/Eno2/index.php?action=home
Ligne : 0

... donc bon je comprend pas , mais je pense avoir compris ce que tu voulais me faire voir .je vai plancher dessus demain.

je te tien au courant.

Merci.
Commenter la réponse de mimagyc
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 15 oct. 2008 à 20:04
0
Utile
Peut être plutôt un problème avec le CSS, manque unité
px par exemple ????
Autre chose utilises de préférence onmouseover que onmousemove...
;O)
Commenter la réponse de PetoleTeam
mimagyc 6 Messages postés mardi 28 novembre 2006Date d'inscription 18 décembre 2008 Dernière intervention - 15 oct. 2008 à 21:53
0
Utile
Merci!!,
j'ai reussi a faire ce que je voulai, derniere chose!,

lorsque je met la souris sur le menu et que je fait glisser la souris sur les autre menu, le premeir menu a arreter de bouger ... comment faire ,

faire une fonction menu_mouse pour chaque menu? avec un timer pour chaque menu?

voici le code en fonctionnement :

var timer;
function menu_mouse(id,sens) {
    clearInterval(timer);
    timer = setInterval("menu('"+id+"','"+sens+"')",10);
}

function stop_() {
    clearInterval(timer);   
}
 var sens;
function menu(id,sens,ti) {
   
actuel = parseInt($(id).offsetWidth);
   
   
    if (sens == "p" && actuel <=100) {
        suite = actuel+1;
        $(id).style.width =suite+"px";
        $('test').innerHTML = actuel+"+";
    }
    else if (sens == "m" && actuel >= 60){
        suite = actuel-1;
        $(id).style.width =suite+"px";
        $('test').innerHTML = actuel+"-";
    }
    else if (sens == "m" && actuel <=60 ) {
        stop_()
    }
    else if (sens == "p" && actuel >=100) {
        //clearInterval(timer);
        //$('test').innerHTML = actuel;
        stop_()
    }
    else {
        //clearInterval(timer);
        stop_()
    }
}

http://mimaro.free.fr/test2/

Merci ;)
Commenter la réponse de mimagyc
mimagyc 6 Messages postés mardi 28 novembre 2006Date d'inscription 18 décembre 2008 Dernière intervention - 15 oct. 2008 à 22:05
0
Utile
J'ai reussi!!!!

voici le code :

/* menu */
var timer1;
var timer2;
var timer3;
var timer4;
function menu_mouse(id,sens) {    if (id "home") {    clearInterval(timer1);    timer1 setInterval("menu('"+id+"','"+sens+"')",10); }    else if (id "jeu") {    clearInterval(timer2);    timer2 setInterval("menu('"+id+"','"+sens+"')",10); }    else if (id "infos") {    clearInterval(timer3);    timer3 setInterval("menu('"+id+"','"+sens+"')",10); }    else if (id "forum") {    clearInterval(timer4);    timer4 setInterval("menu('"+id+"','"+sens+"')",10); }
}

function stop_(id) {
    if (id == "home") {    clearInterval(timer1);}
    else if (id == "jeu") {    clearInterval(timer2);}
    else if (id == "infos") {    clearInterval(timer3);}
    else if (id == "forum") {    clearInterval(timer4);}
}

function menu(id,sens) {
actuel = parseInt($(id).offsetWidth);
   
   
    if (sens == "p" && actuel <=100) {
        suite = actuel+1;
        $(id).style.width =suite+"px";
        //$('test').innerHTML = actuel+"+";
    }
    else if (sens == "m" && actuel >= 60){
        suite = actuel-1;
        $(id).style.width =suite+"px";
        //$('test').innerHTML = actuel+"-";
    }
    else if (sens == "m" && actuel <=60 ) {
        stop_(id)
    }
    else if (sens == "p" && actuel >=100) {
        stop_(id)
    }
    else {
        stop_(id)
    }
   
   
}

/* FIN menu */

C'est un peu crassout mais bon ...

Merci :)
Commenter la réponse de mimagyc
mimagyc 6 Messages postés mardi 28 novembre 2006Date d'inscription 18 décembre 2008 Dernière intervention - 18 déc. 2008 à 13:38
0
Utile
Je ne sais meme pas ce qu'est vraiment une classe, mais voici le meme script lifté!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<script language="javascript" type="text/javascript">
var timer = new Array;
var sens = new Array;
var taille_max = 100;
var taille_min = 60;
function menu_glissant(obj) {
    clearInterval(timer[obj.id]);
    if (sens[obj.id] == false) {sens[obj.id]=true;}else{sens[obj.id]=false;}
    timer[obj.id] = setInterval(function(){glisse(obj)},10);
}
function glisse(obj) {
    if (parseInt(obj.style.width) < taille_max && sens[obj.id]==false) {action = parseInt(obj.style.width)+2; obj.style.width = action+"px";}
    else if (parseInt(obj.style.width) > taille_min && sens[obj.id]==true) {action = parseInt(obj.style.width)-1; obj.style.width = action+"px";}
    else {clearInterval(timer[obj.id]);}
}
</script>
<style type="text/css">
<!--
body,td,th {
    font-size: 12px;
}
ul ,li {
list-style:none;
padding:0px;
}
li {
margin:1px;
background-color:#3366FF;
font-weight:bold;
border:#000000 solid 1px;
text-align:right;
cursor:pointer;
}
-->
</style></head>

<li id="m1" style="width:60px;" onmouseover="menu_glissant(this)" onmouseout="menu_glissant(this)">Menu 1</li>
<li id="m2" style="width:60px;" onmouseover="menu_glissant(this)" onmouseout="menu_glissant(this)">Menu 2</li>
<li id="m3" style="width:60px;" onmouseover="menu_glissant(this)" onmouseout="menu_glissant(this)">Menu 3</li>
<li id="m4" style="width:60px;" onmouseover="menu_glissant(this)" onmouseout="menu_glissant(this)">Menu 4</li>
<li id="m5" style="width:60px;" onmouseover="menu_glissant(this)" onmouseout="menu_glissant(this)">Menu 5</li>

</html>
Commenter la réponse de mimagyc

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.