Menu dynamique clearInterval

Version imprimable

Bonjour,

je fait un menu dynamique , J'arrive a agrandir ca largeur, mais lorsque je veut le reduire, ca fonctionne pas .. :(

Voici le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function menu_mouse(id,sens) { timer = setInterval("menu('"+id+"','"+sens+"')",10); } function menu(id,sens) { actuel = $(id).offsetWidth; if (sens == "+" && actuel<150) { suite = actuel+1; $(id).style.width = suite+"px"; } else if (sens == "-" && actuel > 50) { suite = actuel-1; $(id).style.width = suite+"px"; } else { clearInterval("timer"); } }
J'ai l'impression que le clearInterval("timer"); ne fonctionne pas .

Un lien : http://mimaro.free.fr/Eno2/

Merci.

12/10/2008, 20h30
bigboomshakala

Code:

clearInterval(timer)
12/10/2008, 20h34
mimagyc
Merci, mais j'ai encore un souci, mon menu s'elargie bien mais apres il ne se réduit pas .. je ne sait pas pourquoi:

voici le code dans la page html:
Code:

1 2 <li id="home" class="menu" onmousemove="menu_mouse('home','+')" onmouseout="menu_mouse('home','-')" style="width:50px;">Home  </li>
Merci.

Si vous aller voir sur le lien, j'ai l'impression que lorsque l'on enlève la souris du "<li>" le bloc réduit et s'agrandit très vite, comme si le clearInterval(timer); ne fonctionnais pas .
et c'est même le cas, j'ai mis un alert comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function menu_mouse(id,sens) { var timer = setInterval("menu('"+id+"','"+sens+"')",10); } function menu(id,sens) { actuel = $(id).offsetWidth; if (sens == "+" && actuel<=150) { suite = actuel+1; $(id).style.width =suite+"px"; } else if (sens == "-" && actuel >= 50) { suite = actuel-1; $(id).style.width =suite+"px"; } else { clearInterval(timer); alert('marche'); } }
et je n'ai pas d'alert a s'afficher ...

merci.
PS: la console d'erreur de firefox : timer is not defined
Code:

1 2 3 4 5 { clearInterval(timer); alert('marche'); }
---------------------------------------------------

Voici mon denrier essai
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function menu(id,sens) { actuel = $(id).offsetWidth; var actif = 1; if (actif == 1) { if (sens == "+" && actuel<150) { suite = actuel+1; $(id).style.width =suite+"px"; var timer = setInterval("menu('"+id+"','"+sens+"')",10); actif = 1; } else if (sens == "-" && actuel > 60) { suite = actuel-1; $(id).style.width =suite+"px"; var timer = setInterval("menu('"+id+"','"+sens+"')",10); actif = 1; } else { clearInterval(timer); actif = 0; alert('marche'); } } }
il m'affiche un alert en continue, le clearInterval(timer); ne fonctionne pas ... :(

merci.

Normal, ta variable timer n'est pas globale, elle n'existe donc que dans la fonction menu_mouse(). Essaye comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var timer;
function menu_mouse(id,sens) {
	timer = setInterval("menu('"+id+"','"+sens+"')",10);
}
 
function menu(id,sens) {
actuel = $(id).offsetWidth;
 
 
	if (sens == "+" && actuel<=150) {
		suite = actuel+1;
		$(id).style.width =suite+"px";
	}
	else if (sens == "-" && actuel >= 50)
	{
		suite = actuel-1;
		$(id).style.width =suite+"px";
	}
	else
	{
		clearInterval(timer);
		alert('marche');
	}
}

En effet, ca fonctionne, mais je dois garder la souris sur la <li> pour qeu ca fonctionne, un simple passage ne suffit pas :http://mimaro.free.fr/Eno2/

eEt la souris dois bouger ... comment faire?

une petite mise a niveau du code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var timer;
function menu_mouse(id,sens) {
	timer = setInterval("menu('"+id+"','"+sens+"')",10);
}
 
function menu(id,sens) {
actuel = $(id).offsetWidth;
 
 
	if (sens == "+" && actuel<150) {
		suite = actuel+1;
		$(id).style.width =suite+"px";
	}
	else if (sens == "-" && actuel > 50)
	{
		suite = actuel-1;
		$(id).style.width =suite+"px";
	}
	else
	{
		clearInterval(timer);
		//alert(actuel);
	}
}

HTML:

Code:

1
2
3
4
5
 
<li id="home" class="menu" onmousemove="menu_mouse('home','+')" onmouseout="menu_mouse('home','-')"style="width:60px;"><a href="index.php?action=home">Home&nbsp;&nbsp;</a></li>
<li id="jeu" class="menu" onmousemove="menu_mouse('jeu','+')" onmouseout="menu_mouse('jeu','-')" style="width:60px;">le jeu&nbsp;&nbsp;</li>
<li id="infos" class="menu" onmousemove="menu_mouse('infos','+')" onmouseout="menu_mouse('infos','-')" style="width:60px;">Infos&nbsp;&nbsp;</li>
<li id="forum" class="menu" onmousemove="menu_mouse('forum','+')" onmouseout="menu_mouse('forum','-')" style="width:60px;"><a href="forums/">Forum&nbsp;&nbsp;</a></li>

Merci.

PS : Plus d'erreur dans la console.

Petit coup de pouce ? :roll:

Woua!, voila ce que j'ai reussi a faire .. mais alors j en ecomprend pas du tout pourquoi ... et ce n'est pas le resultat recherché!

http://mimaro.free.fr/Eno2/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function menu(id,sens) {
//var actuel = $(id).offsetWidth;
var actuel = $(id).style.width.replace(/px/, "");
 
 
 
	if (sens == "p" && actuel<= 150) {
		suite = actuel+1;
		$(id).style.width =suite+"px";
	}
	else if (sens == "m" && actuel >= 60)
	{
		suite = actuel-1;
		$(id).style.width =suite+"px";
	}
	else
	{
		clearInterval(timer);
		//alert(actuel);
	}
	$(id).innerHTML = actuel;
}

Essaye un truc du style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function menu(id,sens) {
actuel = $(id).offsetWidth;
 
 
	if (sens == "+") {
	while (actuel<150) {
		suite = actuel+5;
		$(id).style.width =suite+"px";
        }
	}
	else if (sens == "-"){
	while (actuel>50) {
		suite = actuel-5;
		$(id).style.width =suite+"px";
        }
	}
}

Code:

1
2
3
4
<li id="home" class="menu" onmouseover="menu('home','+')" onmouseout="menu('home','-')"style="width:60px;"><a href="index.php?action=home">Home&nbsp;&nbsp;</a></li>
<li id="jeu" class="menu" onmouseover="menu('jeu','+')" onmouseout="menu('jeu','-')" style="width:60px;">le jeu&nbsp;&nbsp;</li>
<li id="infos" class="menu" onmouseover="menu('infos','+')" onmouseout="menu('infos','-')" style="width:60px;">Infos&nbsp;&nbsp;</li>
<li id="forum" class="menu" onmouseover="menu('forum','+')" onmouseout="menu('forum','-')" style="width:60px;"><a href="forums/">Forum&nbsp;&nbsp;</a></li>

Non testé, mais devrait mieux réagir éventuellement avec quelques améliorations...

14/10/2008, 09h26
mimagyc

1 pièce(s) jointe(s)

Bonjour,

merci pour ta réponse, voici ce que ca me fait ci-joint. :cry:

C'est sûrement dû au fait que je te fait faire une boucle infinie puisque actuel n'est pas mis à jour !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function menu(id,sens) {
actuel = $(id).offsetWidth;
 
 
	if (sens == "+") {
	while (actuel<150) {
		suite = actuel+5;
		$(id).style.width =suite+"px";
		actuel = suite;
        }
	}
	else if (sens == "-"){
	while (actuel>50) {
		suite = actuel-5;
		$(id).style.width =suite+"px";
		actuel = suite;
        }
	}
}

14/10/2008, 10h01
mimagyc

Merci, ca fonctionne, a une chose prêt, c'est que l'effet d'agrandissement n'est pas la, la balise va de 50px a 150px a la vitesse de l'éclair, on ne la voit pas s'agrandir :roll: .

Mais c'est une solution!

Merci.

Incroyable mais vrai ...,

lorsque je met un onmousemove ca s'agrandit mais ca ne se réduit pas, le clearinterval ne fonctionne pas, masi avec un onclick la ca fonctionne!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
var timer;
function menu_mouse(id,sens) {
	timer = setInterval("menu('"+id+"','"+sens+"')",20);
}
function stop_() {
	clearInterval(timer);	
}
 var sens;
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_()
	}
	else if (sens == "p" && actuel >=100) {
		//clearInterval(timer);
		//$('test').innerHTML = actuel;
		stop_()
	}
	else {
		//clearInterval(timer);
		stop_()
	}
}

et en html

Code:

1
2
<li id="home" class="menu" onclick="menu_mouse('home','p')" onmouseout="menu_mouse('home','m')" style="width:60px;">Home&nbsp;&nbsp;</li>

pourquoi?

un lien avec onclick : http://mimaro.free.fr/test2/

Merci.

PS: fonctionne que sur le menu "Home"

J'ai reussi a faire mon menu!!!

voici le code HTML :

Code:

1
2
3
4
5
6
7
8
9
 
<ul id="menu">
<!-- Menu -->
<li id="home" class="menu" onmouseover="menu_mouse('home','p')" onmouseout="menu_mouse('home','m')" style="width:60px;"><a href="index.php?action=home">Home&nbsp;&nbsp;</a></li>
<li id="jeu" class="menu" onmouseover="menu_mouse('jeu','p')" onmouseout="menu_mouse('jeu','m')" style="width:60px;"><a href="index.php?action=infos">le jeu&nbsp;&nbsp;</a></li>
<li id="infos" class="menu" onmouseover="menu_mouse('infos','p')" onmouseout="menu_mouse('infos','m')" style="width:60px;">Infos&nbsp;&nbsp;</li>
<li id="forum" class="menu" onmouseover="menu_mouse('forum','p')" onmouseout="menu_mouse('forum','m')" style="width:60px;"><a href="forums/">Forum&nbsp;&nbsp;</a></li>
<!-- FIN Menu -->
</ul>

et le javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
/* 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 */

Voila ;)

derniere chose, pourquoi lorsque que je fait un lien sur un li, le lien fonctionne que sur le texte et pas sur la balise entière!

Merci.

je ne connait pas ton code mais je pense que c'est normal que <li>...</li> ne soit pas complètement cliquable si on insère un lien dedans.

voici une méthode javascript pour parvenir à cet effet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre</title>
<style type="text/css">
<!--
li {padding: 3em; border: 1px solid black; cursor: pointer;}
-->
</style>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
</head>
<body>
 
<ul>
  <li
  onclick="document.location.href = 'http://www.google.fr/'"
  onmouseover="window.status = 'http://www.google.fr/'; return true;"
  onmouseout="window.status = ''; return true;">
    <a href="http://www.google.fr/">google</a>
  </li>
</ul>
 
</body>
</html>

16/10/2008, 10h37
mimagyc

j'avai opter pour une solution javascript oui, mais jetait curieux de savoir si c'était faisable ;)