Sujet Précédent Sujet Suivant

Menu dynamique [ clearInterval() ]

Résolu
mimagyc Messages postés 6 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 18 décembre 2008 - 14 oct. 2008 à 13:23
mimagyc Messages postés 6 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 18 décembre 2008 - 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/

7 réponses

Réponse 1 / 7
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
15 oct. 2008 à 22:45
<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)
3
Réponse 2 / 7
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
15 oct. 2008 à 19:09
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)
0
Réponse 3 / 7
mimagyc Messages postés 6 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 18 décembre 2008
15 oct. 2008 à 19:57
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.
0
Réponse 4 / 7
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
15 oct. 2008 à 20:04
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)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
mimagyc Messages postés 6 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 18 décembre 2008
15 oct. 2008 à 21:53
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 ;)
0
Réponse 6 / 7
mimagyc Messages postés 6 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 18 décembre 2008
15 oct. 2008 à 22:05
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 :)
0
Réponse 7 / 7
mimagyc Messages postés 6 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 18 décembre 2008
18 déc. 2008 à 13:38
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>
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous