temporiser l'affichage d'un block

Version imprimable

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:

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

08/07/2010, 17h17
jonny_the_dog

pourquoi ne pas temporiser pas une animation ?
08/07/2010, 17h47
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.
08/07/2010, 21h20
devyan

Bonjour,

Citation:

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

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

devyan
08/07/2010, 23h59
danielhagnoul

Bonsoir.

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

Voir la démo en fin de http://api.jquery.com/mouseover/.
09/07/2010, 09h15
Renand

Citation:

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

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

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. :)
09/07/2010, 09h17
Renand

Citation:

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 ?

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:

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>

09/07/2010, 16h28
Renand

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
09/07/2010, 23h59
devyan
Citation:

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. ;)
1. MouseEnter déclenche un timer qui devra déclencher l'affichage
2. 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

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:

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:

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 ?

Citation:
Envoyé par Renand
Code:

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:

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