temporiser l'affichage d'un block

**Renand** · 08/07/2010, 17h33

Bonjour,

voilà j'ai récupéré un script qui me permet d'afficher un bloc au survol d'un lien, puis de le refermer si j'en sort :

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
 
var timeout    = 0;
var closetimer = 0;
var ddmenuitem = 0;
 
function jsddm_open() {
    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = jQuery(this).find('.sub').css('display', 'block');
    closeSmallPopUp();
}
 
function jsddm_close() {
    if(ddmenuitem) ddmenuitem.css('display', 'none');
}
 
function jsddm_timer() {
    closetimer = window.setTimeout(jsddm_close, timeout);
}
 
function jsddm_canceltimer() {
    if(closetimer) {
        window.clearTimeout(closetimer);
	closetimer = null;
    }
}
 
 
jQuery(document).ready(function() {
    jQuery('.menuLink').bind('mouseover', jsddm_open)						
    jQuery('.menuLink').bind('mouseout',  jsddm_timer)	
});

il est super réactif, tellement réactif d'ailleurs que je cherche à temporiser l'ouverture par rapport à l'événement mouseover...

Auriez-vous une idée ?

Merci

**jonny_the_dog** · 08/07/2010, 18h17

pourquoi ne pas temporiser pas une animation ?

**Renand** · 08/07/2010, 18h47

Bonjour
En fait y'a pas mal de données dans le bloc en lui même et du coup en animation c'est pas très fluide...

la je cherche juste à limiter les ouvertures accidentelles d'un visiteur dont la souris passerait sur le lien.

**devyan** · 08/07/2010, 22h20

Bonjour,

Envoyé par Renand

Bonjour
En fait y'a pas mal de données dans le bloc en lui même et du coup en animation c'est pas très fluide...

la je cherche juste à limiter les ouvertures accidentelles d'un visiteur dont la souris passerait sur le lien.

J'allais te répondre :"Dans ce cas utilises un timer pour retarder l'affichage" mais je viens de voir que ton script en a déjà un

Changes la valeur de timeout (0ms c'est un peu court comme retard à l'affichage

)

devyan

**danielhagnoul** · 09/07/2010, 00h59

Bonsoir.

N'utilisez pas mouseover et mouseout mais mouseenter et mouseleave.

Voir la démo en fin de http://api.jquery.com/mouseover/.

**Renand** · 09/07/2010, 10h15

Envoyé par devyan

Bonjour,

J'allais te répondre :"Dans ce cas utilises un timer pour retarder l'affichage" mais je viens de voir que ton script en a déjà un

Changes la valeur de timeout (0ms c'est un peu court comme retard à l'affichage

)

devyan

Bonjour en fait le timer est la pour maintenir ouvert le block en moment de la fermeture. Je souhaiterais de mon coté que le block s'ouvre uniquement si le visiteur reste sur le lien, mais pas à chaque survol.

**Renand** · 09/07/2010, 10h17

Envoyé par danielhagnoul

Bonsoir.

N'utilisez pas mouseover et mouseout mais mouseenter et mouseleave.

Voir la démo en fin de http://api.jquery.com/mouseover/.

Merci, je ne connaissais pas ces événements. D'un point de vue réactivé ça ne change rien de fait. J'imagine qu'il faut aussi intégrer un délai ou quelques choses permettant de ne pas exécuter l'action d'ouverture si la durée de présence sur le bouton est trop courte, non ?

**danielhagnoul** · 09/07/2010, 14h03

Bonjour.

L'animation d'un menu est un sujet qui a déjà été traité, mais jamais de façon satisfaisante. Le fait d'ouvrir un élément bloc au survol d'un lien perturbe la mise en page. Les événements mouseenter/mouseleave sont plus calmes que les événements mouseover/mouseout mais ils se bousculent tout de même. Si l'utilisateur attaque le menu en descendant le pointeur, lentement de haut en bas c'est passable, mais s'il attaque le menu de bas en haut, même lentement, il aura un effet accordéon avant d'accéder à un lien situé au milieu du menu. Si l'utilisateur s'amuse en faisant du va-et-vient sur le menu il y aura de l'animation. Pour parer à ce problème, il existe bien stop() et delay(), mais le résultat n'est jamais parfait.

Voici un exemple, j'ai ajouté une variable externe pour freiner l'effet accordéon :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color: #ffffff;
			color: #000000;
			font-family: sans-serif;
			font-size: medium;
			font-style: normal;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
		}
		h1, h2, h3, h4, h5 {
			font-family: serif;
		}
		div, p, h1, h2, h3, h4, h5, h6, ul, ol, dl, form, table, img {
			margin: 0px;
			padding: 0px;
		}
		p {
			padding: 6px;
		}
		ul, ol, dl {
			list-style: none;
			padding-left: 6px;
			padding-top: 6px;
		}
		li {
			padding-bottom: 6px;
		}
		div#conteneur {
			height:600px;
			margin: 12px auto;
			padding: 6px;
			background-color: #FFFFFF;
			color: #000000;
			border: 1px solid #666666;
			font-size: 0.8em;
		}
 
		/* TEST */
		a.menu {
			display:block;
			width:200px;
			height:24px;
			margin:6px;
			padding:6px;
			text-align:center;
			border:thin dotted grey;
		}
		div.sub {
			display:none;
			width:200px;
			height:200px;
			margin:6px;
			padding:6px;
			text-align:center;
			background-color:red;
			border:1px solid gray;
			z-index:1;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			var boolSlide = false;
 
			// avec jQuery 1.4.2, hover utilisent mouseenter et mouseleave au lieu de mouseover et mouseout
			$("a.menu").hover(
				function(){
					if (!boolSlide){
						boolSlide = true;
						$(this).next().stop(true, true).delay(800).slideDown(1500);
					}
				},
				function(){
					if (boolSlide){
						$(this).next().stop(true, true).delay(800).slideUp(1500);
						boolSlide = false;
					}
				}
			);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<a class="menu" href="">lien 1</a>
		<div class="sub">1</div>
		<a class="menu" href="">lien 2</a>
		<div class="sub">2</div>
		<a class="menu" href="">lien 3</a>
		<div class="sub">3</div>
		<a class="menu" href="">lien 4</a>
		<div class="sub">4</div>
	</div>
</body>
</html>

**Renand** · 09/07/2010, 17h28

Bonjour Daniel et merci.
J'ai essayé d'adapter votre exemple pour mes besoins.
Du coup j'ai remplacé slideDown et SlideUp pour Show et Hide, ne souhaitant pas d'animation.

Mais deux problèmes se posent.
1) ça n'arrange pas mon besoin (faire en sorte que le visiteur soit obligé de rester quelques instant sur le lien pour afficher le bloc, )
2) une fois le bloc affiché ne ne peux m'y rendre puisque si je quitte le lien le bloc se cache.

En fait j'ai du mal poser ma question.

Par rapport à l'exemple de code que je présente, tout est valide à l'exception du fait que je voudrais que le visiteur ne faisant que passer sur le bouton sans insister quelques instants n'ouvre le bloc..

Actuellement c'est instantané, je souhaiterais donc trouver un moyen de temporiser l'ouverture pour éviter les affichages non souhaités.

Voilà j'espère être plus clair

Merci encore

**devyan** · 10/07/2010, 00h59

Envoyé par Renand

Bonjour en fait le timer est la pour maintenir ouvert le block en moment de la fermeture. Je souhaiterais de mon coté que le block s'ouvre uniquement si le visiteur reste sur le lien, mais pas à chaque survol.

Au temps pour moi, j'ai mal vu (il "tait tard)

Cependant la remarque reste bonne...

Pour obtenir un délai avant ouverture, et bien utilises un timer.

MouseEnter déclenche un timer qui devra déclencher l'affichage
MouseLeave annule le timer et cache l'élément si il est affiché

Je ne rentre pas plus dans le détail de la réalisation, tu as l'autre timer comme exemple
devyan

**Renand** · 15/07/2010, 14h58

Bonjour,

Voilà j'ai trouvé un moment pour revenir dessus, mais je ne m'en sors pas.

J'ai donc fait une petite fonction openTimer() qui est censé exécuter jsddm_open()

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function openTimer() {
    window.setTimeout(jsddm_open, 500);
}
 
function jsddm_open() {
    jsddm_canceltimer();
    jsddm_close();
   ddmenuitem = jQuery(this).find('.sub').css('display', 'block');
   closeSmallPopUp();
}

pour les événement c'est comme ça :

Code :

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

1
2
3
4
5
6
7
jQuery(document).ready(function() {
    jQuery('.menuLink').bind('mouseenter',openTimer)				
    jQuery('.menuLink').bind('mouseleave',  jsddm_timer)
    jQuery('#moreRayIcon').bind('mouseenter',  displaySmallPopUp)
    jQuery('#moreRays').bind('mouseleave',  closeSmallPopUp)		
});

sous cette forme rien ne fonctionne, alors que si j'appel directement jsddm_open sur le mousenter, ça fonctionne, mais du coup sans timer...

Une idée ?

**e-vesonua** · 22/07/2010, 17h51

Envoyé par Renand

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function openTimer() {
    window.setTimeout(jsddm_open, 500);
}
 
function jsddm_open() {
    jsddm_canceltimer();
    jsddm_close();
   ddmenuitem = jQuery(this).find('.sub').css('display', 'block');
   closeSmallPopUp();
}

Une idée ?

Au niveau de la fonction setTimeout, il me semble que le nom de la fonction appelée doit être en chaine de caractère suivie de parenthèses :

Code :

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

1
2
3
4
 
function openTimer() {
    window.setTimeout("jsddm_open()", 500);
}

e-Vesonua

temporiser l'affichage d'un block

jQuery

Discussions similaires

Partager

Partager