Menu dynamique clearInterval

**mimagyc** · 12/10/2008, 20h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**bigboomshakala** · 12/10/2008, 20h30

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clearInterval(timer)

**mimagyc** · 12/10/2008, 20h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci.

**mimagyc** · 13/10/2008, 13h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

---------------------------------------------------

Voici mon denrier essai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Bovino** · 13/10/2008, 13h30

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mimagyc** · 13/10/2008, 13h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mimagyc** · 13/10/2008, 22h01

Petit coup de pouce ?

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 13/10/2008, 22h23

Essaye un truc du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
        }
	}
}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mimagyc** · 14/10/2008, 09h26

Bonjour,

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

**Bovino** · 14/10/2008, 09h45

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mimagyc** · 14/10/2008, 10h01

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

.

Mais c'est une solution!

Merci.

**mimagyc** · 14/10/2008, 14h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"

**mimagyc** · 15/10/2008, 22h09

J'ai reussi a faire mon menu!!!

voici le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Invité · 15/10/2008, 23h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mimagyc** · 16/10/2008, 10h37

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

Menu dynamique clearInterval

JavaScript

Discussions similaires

Partager

Partager