UI Effect Pulsate sur IE 6/7/8

**zeflex** · 04/01/2010, 14h31

Bonjour,

Je rencontre en permanence un problème d'affichage sur IE avec l'effet "pulsate" de jquery. Le texte affiché n'est pas propre, sur FF tout vas bien en revanche.

Voici les screenshots :
FF ->

IE ->

Qui à une idée par hasard pour que cela s'affiche correctement ? Merci.

**danielhagnoul** · 04/01/2010, 20h50

Bonsoir.

UI Effect Pulsate joue sur le style CSS opacity inconnu de IE. Mais selon la documentation UI, le code est compatible avec IE6 et plus.

Je viens de tester le code suivant sous IE8 et IE7 (je ne dispose pas d'IE6) et je ne vois pas de problème :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<base href="http://danielhagnoul.developpez.com/"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			border:1px solid #999999;
			background-color:#FAEBD7;
		}
 
		/* TEST */
	</style>
	<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#affiche").click(function () {
 
				// time 3 et il fait quatre pulsations !
				$(this).effect("pulsate", {times:3}, 2000);
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="affiche">
			<p>
				Sed sed erat vitae tortor lobortis hendrerit. Donec a diam quis neque dignissim feugiat. Vivamus eu eros. Maecenas vulputate accumsan leo. Proin et elit. Fusce est. Vestibulum consectetur dui sed dolor. Curabitur ante tortor, ultricies quis, ultrices ac, convallis sed, neque. Aliquam pellentesque, augue sed pretium sodales, massa diam auctor metus, sed feugiat nunc quam ac justo. Quisque mattis, nisi at venenatis scelerisque, lectus tortor rutrum quam, at venenatis orci dui rhoncus massa. Nullam imperdiet, eros non auctor ornare, nisi lacus dictum mauris, ut pretium tellus mauris id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus, velit vel tristique faucibus, libero quam rutrum nibh, eget scelerisque urna odio vel sem. Mauris in enim.
			</p>
		</div>
	</div>
</body>
</html>

**zeflex** · 04/01/2010, 21h46

Je te remercie de ta réponse danielhagnoul.

En effet, ton code tel quel fonctionne bien sous IE8. En revanche en y amenant de toutes petites modifications, on se retrouve dans mon cas cité :

A) Ajout du texte en gras
B) Si on fait clignoter la div , c'est ok ; si on fait clignoter le texte, c'est plus ok

1ère modif (c'est ok):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
	<script type="text/javascript">
		$(document).ready(function(){
			$("p").css("font-weight","bold");
			$("#affiche").click(function () {
 
				// time 3 et il fait quatre pulsations !
				$(this).effect("pulsate", {times:3}, 2000);
			});
		});
	</script>

2ième modif (c'est plus ok) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
	<script type="text/javascript">
		$(document).ready(function(){
			$("p").css("font-weight","bold");
			$("#affiche").click(function () {
 
				// time 3 et il fait quatre pulsations !
				$("p").effect("pulsate", {times:3}, 2000);
			});
		});
	</script>

En effet mon texte étant en gras, c'est peut-être de là d'où vient le problème. Peut tu me confirmer que tu à le même problème d'affichage ?

Merci.

**danielhagnoul** · 04/01/2010, 22h20

Bonsoir.

Problème avec IE8 et IE7, le style du texte devient pâteux.
Il est important de restreindre l'effet aux paragraphes de la division d'id affiche :

Code :

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

1
2
3
4
5
6
$("#affiche").click(function () {
 
	// time 3 et il fait quatre pulsations !
	// uniquement les paragraphes de la division d'id affiche
	$("p", this).effect("pulsate", {times:3}, 2000);
});

**zeflex** · 04/01/2010, 22h51

Même avec cette modification j'ai le même bug.

As tu bien ajouté ceci afin de rendre le texte en gras ?

Code :

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

$("p").css("font-weight","bold");

Sinon, utilises tu vista ou xp ? Je sais que cela peut interférer parfois dans les bugs d'affichages.

**danielhagnoul** · 04/01/2010, 23h04

OUI, mais dans la feuille de style CSS, et comme dit ci-dessus je vois le texte pâteux ! J'utilise XP SP3.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<base href="http://danielhagnoul.developpez.com/"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			border:1px solid #999999;
			background-color:#FAEBD7;
		}
 
		/* TEST */
		div#affiche p {
			font-weight:bold;
		}
	</style>
	<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#affiche").click(function () {
 
				// time 3 et il fait quatre pulsations !
				// uniquement les paragraphes de la division d'id affiche
				$("p", this).effect("pulsate", {times:3}, 2000);
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="affiche">
			<p>
				Sed sed erat vitae tortor lobortis hendrerit. Donec a diam quis neque dignissim feugiat. Vivamus eu eros. Maecenas vulputate accumsan leo. Proin et elit. Fusce est. Vestibulum consectetur dui sed dolor. Curabitur ante tortor, ultricies quis, ultrices ac, convallis sed, neque. Aliquam pellentesque, augue sed pretium sodales, massa diam auctor metus, sed feugiat nunc quam ac justo. Quisque mattis, nisi at venenatis scelerisque, lectus tortor rutrum quam, at venenatis orci dui rhoncus massa. Nullam imperdiet, eros non auctor ornare, nisi lacus dictum mauris, ut pretium tellus mauris id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus, velit vel tristique faucibus, libero quam rutrum nibh, eget scelerisque urna odio vel sem. Mauris in enim.
			</p>
		</div>
	</div>
</body>
</html>

**zeflex** · 05/01/2010, 09h36

Excuses moi Daniel, j'avais lu un peu trop rapidement ta réponse avec "pas de problème"

Le style en effet est pateux, mais je comprends pas cette modification là en fait :

Code :

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

$("p", this).effect("pulsate", {times:3}, 2000);

Car elle me donne le même résultat (pateux) , à quoi sert le this en fait dans cette ligne ?

Merci.

**danielhagnoul** · 05/01/2010, 20h18

Bonsoir.

Cette ligne n'influence pas la qualité de l'affichage.

Code :

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

$("p").effect("pulsate", {times:3}, 2000);

Ici on applique l'effet à tous les tags <p> du DOM.

Code :

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

$("p", this).effect("pulsate", {times:3}, 2000);

Ici on limite la portée à this qui dans l'exemple représente la division d'id affiche.

Code :

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

$(this).find("p").effect("pulsate", {times:3}, 2000);

Cette écriture est identique à la deuxième. Avec jQuery 1.4 elle est même recommandée car plus rapide.

**zeflex** · 06/01/2010, 19h24

Ok merci.

De mon coté en faisant divers essais, j'ai remarqué qu'en appliquant un background à la div contenant le texte permets de rendre le texte propre.

Je n'ai fais qu'une partie des tests car j'ai plusieurs textes dans ce genre à corriger, mais il semble que ca pourrait-être une bonne voie pour faire disparaitre ce problème.

Merci daniel, je passe le problème en résolu.

**danielhagnoul** · 06/01/2010, 23h02

Bonsoir.

Je suis heureux que vous ayez trouvé une solution, mais surpris par la nature de cette solution, car dans mon exemple la division avait un « background-color. »

Vous appliquez le « background-color » au paragraphe ?

[Edit 01h30]
J'ai eu un peu de temps pour tester et en effet il suffit de préciser la couleur du texte et la couleur du fond du paragraphe pour éviter le problème du texte pâteux. Dans mon exemple précédent, il suffit donc de modifier la feuille de style comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
div#affiche {
	margin:12px;
	border:1px solid #999999;
	background-color:#FFFFFF;
	color:#000000;
}
div#affiche p {
	font-weight:bold;
	background-color:#FFFFFF;
	color:#000000;
}

**zeflex** · 07/01/2010, 21h31

Ok c'est une astuce très bonne à savoir pour les prochains travaux

UI Effect Pulsate sur IE 6/7/8

jQuery

Discussions similaires

Partager

Partager