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>

UI Effect Pulsate sur IE 6/7/8

jQuery

Vue hybride

Discussions similaires

Partager

Partager