menu dynamique [ clearInterval() ]

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 :
[code]
<ul id="menu">
<!-- Menu -->

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

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

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

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

<!-- FIN Menu -->
</ul>
[/code]

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

Je ne comprend pas pourquoi le clearinterval ne fonctionne pas 

Merci.
ps: lien : http://mimaro.free.fr/test/

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 +"<br>");

  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 +"<br>");
    clearInterval(timer);
  }
  else if (sens == "p" && actuel >99) {
    debug( " KILL Timer -> " + timer +"<br>");
    clearInterval(timer);
  }
  else {
    debug( " KILL Timer -> " + timer +"<br>");
    clearInterval(timer);
  }
}
</script>
ajoute juste entre les balises BODY ceci
<div id="D_INFO"></div>
en prétant l'oeil tu verras que des timer ne sont pas killer.
;O)

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.

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)

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

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

Je ne sais meme pas ce qu'est vraiment une classe, mais voici le meme script lifté!

[quote]
<!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>
<body>
<ul>
<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>
</ul>
</body>
</html>
[/quote]