fonction animate() sur du texte

**Doki95** · 21/12/2009, 17h46

Bonjour a tous,

Pour un projet d'entreprise, je dois créer un module joomla dans lequel les news défileront continuellement.

Jusque là, pas de problème. Avec jQuery, l'animation est relativement simple a réaliser. Cependant, je rencontre quelques petites difficultés.

Tout d'abord, je souhaiterais rendre le script plus performant. Je trouve qu'il est beaucoup trop gourmand et je pense que c'est ce qui provoque des petits lags de temps en temps.

Ensuite, je me rend compte qu'au chargement de la page, le texte se mets a défiler normalement, mais d'un coup, il se ralenti tout seul sans raison.

Enfin, je rencontre un drôle de comportement. Normalement, lorsque l'utilisateur passe sa souris sur une news qui l'intéresse, le texte arrête de défiler. Ça fonctionne. mais lorsqu'il repart, il repart très lentement. Difficile a expliquer comme ça, mais voici le code javascript, html et css.

Code html :

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
 
<html>
	<head>
		<link type="text/css" href="newsfeed.css" rel="stylesheet">
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	</head>
 
	<body>
		<div class="containerFeed">
			<div class="containerElemSep">
				<p class="element" id="1">
					<a href="#">18.12.2009  //   Element 1</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="2">
					<a href="#">18.12.2009  //   Element 2</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="3">
					<a href="#">18.12.2009  //   Element 3</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="4">
					<a href="#">18.12.2009  //   Element 4</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="5">
					<a href="#">18.12.2009  //   Element 5</a>
					<span class="separator">****</span>
				</p>
			</div>
		</div>
	</body>
</html>

Code javascript :

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
 
jQuery(document).ready(function () {
	nbrElement = jQuery(".element").length; /* Nombre d'element contenant du texte */
	widthContainerFeed = jQuery("div.containerFeed").width(); /* Largeur de la div principale */
 
	jQuery(".element").css({
		width : widthContainerFeed + "px",
		left : widthContainerFeed + "px"
	});
 
	widthElement = jQuery(".element").width(); /* Largeur des p après modifications */
 
	jQuery(".containerElemSep").css({
		width: (widthContainerFeed+widthElement) + "px" /* Modification de la largeur de la div contenant les elements a faire defiler */
	});
	widthContainerElemSep = jQuery(".containerElemSep").width();
	widthContainerFeed = jQuery(".containerFeed").width();
	/*function animation () {
		jQuery(".element").animate(
			{ left : "-" + widthContainerFeed * 2 + "px"}, 18000, "linear", function () {
				jQuery(this).is(":first").insertAfter(jQuery(this).is(":last"));
				animation();
			}
		);
	}*/
	function animation (idMove) {
		jQuery("#"+idMove).animate(
			{ left : "-" + widthContainerFeed + "px"}, 10000, "linear",
			function () {
				jQuery(this).css({left : widthContainerFeed + "px"});
				if (idMove == nbrElement) {
					idMove = 1;
				}
				else {
					idMove = idMove + 1;
				}
				animation(idMove);
			}
		);
	}
 
	jQuery(".element").mouseover(function () {
		idMoved = jQuery(this).focus().attr("id");
		jQuery("#"+idMoved).stop();
	});
 
	jQuery(".element").mouseout(function () {
		animation(idMoved);
	});
 
	animation(1);
});

Code css :

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
 
@CHARSET "ISO-8859-1";
 
div.containerFeed {
	width: 900px;
	height: 35px; /* default: 40px */
	overflow: hidden;
	border: 1px solid grey;
	padding-top: 5px;
	position: relative;
}
 
.containerContainer {
	height: 40px;
	position: relative;
}
 
.containerElemSep {
	height: 40px;
	position: relative;
}
 
.element,
.separator {
	margin: 0;
	padding: 0;	
	line-height: 30px;
	height: 30px;
}
 
.element {
	height: 30px;
	color: #3f7f7f;
	float: left;
	position: absolute;
}
 
.separator {
	position: relative;
	width: 50px;
	color: #9590eb;
	float: right;
	left: 30px;
}

Je continu mes recherches, mais si quelqu'un a une idée, voir même un exemple de script sur le net qui pourrait m'inspirer, je suis preneur.

Merci par avance pour votre aide,
Doki.

PS : n'oublier pas jQuery. Pour ma part je l'ai collé à la racine du site pour faciliter l'appel le temps des tests.

**danielhagnoul** · 22/12/2009, 21h44

Bonsoir.

Exemple :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="Author" content="Daniel Hagnoul" /> 
	<title>Extrait de : "Utilisez la fonction globale : exemple n° 2"</title> 
	<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;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#newsbox {
			position:relative;
			width:200px;
			height:200px;
			border:1px solid #999999;
			overflow:hidden;
		}
		div#newsbox div#newslist {
			visibility: hidden;
			position:absolute;
			margin:0px;
			padding-left:4px;
			padding-right:4px;
		}
		div#newsbox div#newslist h1 {
			margin-top:6px;
			margin-left:4px;
			margin-right:4px;
			margin-bottom:6px;
			padding:0px;
			color:#0000CC;
			font-size:16px;
			text-align:left;
		}
		div#newsbox div#newslist p {
			margin-top:4px;
			margin-left:4px;
			margin-right:4px;
			margin-bottom:8px;
			padding:0px;
			font-size:14px;
			text-align:left;
		}
	</style> 
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script> 
	<script type="text/javascript"> 
		var speed = 1;
		var offset = 5;
		var interval = 60;
		var pos;
		var pos_initial;
 
		var anim = function(){
			$("#newslist").css({
				visibility:"visible",
				top:Math.floor(pos)
			});
 
			pos -= speed;
 
			if (pos < (-1 * $("#newslist").height())){
				pos = pos_initial;
			}
		};
 
		function startAnim(){
			pos_initial = $("#newsbox").height() + offset;
			pos = pos_initial;
			setInterval(anim, interval);
		}
 
		$(window).ready(function(){
			$("#newsbox").hover(
				function(){
					speed = 0;
				},
				function(){
					speed = 1;
				}
			);
 
			startAnim()
		});
	</script> 
</head> 
<body> 
	<div id="conteneur"> 
		<p> 
			Il s'agit de la version adaptée en jQuery d'une "newsbox" proposée par <a href="http://www.developpez.net/forums/u28015/marcha/">MARCHA</a> en réponse à cette <a href="http://www.developpez.net/forums/d674593/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/script-defilement-vertical/#post3947789">question</a> 
		</p> 
		<p> 
		"newsbox" : difussion verticale continue, de bas en haut, de messages (bref, en principe) attirant l'attention sur de nouvelles informations.
		</p> 
		<p> 
			La courte pause avant la reprise de la difussion indique au lecteur que la série est terminée.
		</p>
 
		<div style="float:left;"> 
			<div id='newsbox'> 
				<div id='newslist'> 
					<h1>Vestibulum</h1> 
					<p> 
						Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
					</p> 
					<h1>Praesent</h1> 
					<p> 
						Praesent egestas, ante sed sagittis fermentum, ligula nulla viverra tortor, at lacinia massa felis quis arcu. Mauris malesuada neque. Maecenas sed justo. Aliquam dui libero, consectetur at, iaculis eu, aliquam vitae, eros. Nullam lorem felis, iaculis eget, tincidunt eget, mollis ac, arcu. In pellentesque mauris eget quam. In non magna. Maecenas vulputate eleifend purus. Sed imperdiet malesuada augue. Sed dolor purus, faucibus non, elementum feugiat, condimentum et, elit. Vestibulum vitae felis.
					</p> 
					<p> 
						Sed porta. Sed non magna. Suspendisse ullamcorper pretium enim. Fusce iaculis vulputate lacus. Nulla facilisi. Etiam tincidunt dui ut erat. Donec non est. Maecenas sagittis, sem vitae dictum hendrerit, mi tellus ornare dolor, in euismod sapien diam a ante. Donec ullamcorper mollis lacus. Morbi sed arcu. Curabitur nec purus. Proin ut mauris. Quisque orci. Phasellus enim felis, faucibus in, placerat et, sagittis id, tellus. In eu sapien.
					</p> 
					<h1>Donec</h1> 
					<p> 
						Donec in ligula. Cras semper. Fusce semper. Phasellus sit amet tortor id sapien aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt elementum turpis. Suspendisse ac ligula. In vitae nisi. Praesent non lacus et mi ornare tempus. Phasellus faucibus volutpat nisi. Aliquam vel lorem eget nisl malesuada ultrices. Vivamus orci augue, scelerisque in, ornare nec, tempus commodo, diam. Nam a augue in risus pellentesque auctor. Nulla adipiscing mauris in justo. Sed eu diam. Vestibulum elementum, eros non porta tristique, velit ipsum euismod enim, quis tempus elit felis in ipsum. Etiam facilisis ante id tellus. Nulla facilisi. Pellentesque sem.
					</p> 
				</div> 
			</div> 
		</div>
 
		<p style="clear:both;">&nbsp;</p> 
	</div> 
</body> 
</html>

**Doki95** · 23/12/2009, 11h32

bonjour et merci de ta réponse, c'est bien ce que je voulais comme exemple.
Cependant, avec ce script, comment peut on faire pour que le texte qui n'est plus dans la zone visible (c'est a dire que ce texte a parcouru tout le chemin qu'il devait) revienne à la suite ? De cette manière, le texte serrait en continu.

Merci,
Doki.

**Doki95** · 23/12/2009, 17h37

Bonsoir a tous.

Pour pouvoir faire défiler mon texte indéfiniment, j'essaye d'intégrer ce petit bout de code dans le script que danielhagnoul m'a donné.

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
leftNewslist = jQuery("#newslist").css("left");
widthBlock = widthSeparator + widthElement;
numBlock = jQuery("#newslist").children(":first").attr("id");
 
if (leftNewslist -= (widthBlock*numBlock)) {
	jQuery("#"+numBlock).insertAfter(jQuery("#newslist").children(":last"));
	jQuery("#"+numBlock).insertAfter(jQuery("#newslist").children(":last"));
}

Ce qu'il faut savoir sur les modifications que j'ai apporté. Elles se trouvent surtout sur le code HTML. Je rajoute simplement un id sur un separator et un element (couple).

Voici le code complet avec html, css, javascript.

Code html :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
<html>
	<head>
		<link type="text/css" href="newsfeed.css" rel="stylesheet">
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
		<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;
                        }
                        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                                margin:0px;
                                padding:0px;
                        }
                        div#conteneur {
                                width:95%;
                                margin:12px auto;
                                padding:6px;
                                background-color:#FFFFFF;
                                color:#000000;
                                border:1px solid #666666;
                                font-size:0.8em;
                        }
                        div#newsbox {
                                position:relative;
                                width:900px;
                                height:40px;
                                border:1px solid #999999;
                                overflow:hidden;
                        }
                        div#newsbox div#newslist {
                                visibility: hidden;
                                position:absolute;
                                margin:0px;
                                padding-left:4px;
                                padding-right:4px;
                                height: 40px;
                        }
                        div#newsbox div#newslist .element,
                        div#newsbox div#newslist .separator {
                                padding:0;
                                margin:0;
                                height: 40px;
                                line-height: 40px;
                                text-align: center;
                                float: left;
                        }
                        div#newsbox div#newslist .element {
                                font-size:14px;
                        }
 
                        div#newsbox div#newslist .separator {
                                width: 40px;
                        }
                </style>
 
		<script type="text/javascript">
                        var speed = 1;
                        var offset = 5;
                        var interval = 1;
                        var pos;
                        var pos_initial;
                        
                        var anim = function(){
                                jQuery("#newslist").css({
                                        visibility:"visible",
                                        left:Math.floor(pos)
                                });
                                
                                pos -= speed;
                                
                                leftNewslist = jQuery("#newslist").css("left");
                                widthBlock = widthSeparator + widthElement;
                                numBlock = jQuery("#newslist").children(":first").attr("id");
                                
                                if (leftNewslist -= (widthBlock*numBlock)) {
                                        jQuery("#"+numBlock).insertAfter(jQuery("#newslist").children(":last"));
                                        jQuery("#"+numBlock).insertAfter(jQuery("#newslist").children(":last"));
                                }
                                
                                if (pos < (-1 * jQuery("#newslist").width())){
                                        pos = pos_initial;
                                }
                        };
                        
                        function startAnim(){
                                pos_initial = $("#newsbox").width() + offset;
                                pos = pos_initial;
                                setInterval(anim, interval);
                        }
                        
                        jQuery(document).ready(function () {
                                nbrElement = jQuery("#newslist .element").length;
                                
                                nbrSeparator = jQuery("#newslist .separator").length;
                                widthSeparator = jQuery("#newslist .separator").width();
                                
                                widthDivNewsBox = jQuery("#newsbox").width();
                                
                                jQuery("#newslist .element").css({
                                        width : widthDivNewsBox / 2 + "px"
                                });
                                
                                widthElement = jQuery("#newslist .element").width();
                                
                                jQuery("#newslist").css({
                                        width : (nbrElement*widthElement)+(nbrSeparator*widthSeparator) + "px"
                                });
 
                                jQuery("#newsbox").hover(
                                        function(){
                                                speed = 0;
                                        },
                                        function(){
                                                speed = 1;
                                        }
                                );
                                startAnim()
                        });
                </script>
	</head>
 
	<body>
		<div style="float:left;"> 
			<div id='newsbox'> 
				<div id='newslist'>
					<p class="separator" id="1">****</p>
 
					<p class="element" id="1">
						<a href="#">dd.mm.aaaa  //   Element 1</a>
					</p>
 
					<p class="separator" id="2">****</p>
 
					<p class="element" id="2">
						<a href="#">dd.mm.aaaa  //   Element 2</a>
					</p>
 
					<p class="separator" id="3">****</p>
 
					<p class="element" id="3">
						<a href="#">dd.mm.aaaa  //   Element 3</a>
					</p>
 
					<p class="separator" id="4">****</p>
 
					<p class="element" id="4">
						<a href="#">dd.mm.aaaa  //   Element 4</a>
					</p>
 
					<p class="separator" id="5">****</p>
 
					<p class="element" id="5">
						<a href="#">dd.mm.aaaa  //   Element 5</a>
					</p>
				</div>				
			</div> 			
		</div>
	</body>
</html>

Merci pour votre aide.
Doki.

**danielhagnoul** · 30/12/2009, 21h25

Bonsoir.

Comme j'avais un peu de temps, voici la version 2.0.0

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="Author" content="Daniel Hagnoul" /> 
	<title>News Box v2.0.0</title> 
	<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;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#newsbox {
			position:relative;
			width:200px;
			height:200px;
			border:1px solid #999999;
			overflow:hidden;
		}
		div#newsbox div#newslist {
			visibility: hidden;
			position:absolute;
			margin:0px;
			padding-left:4px;
			padding-right:4px;
		}
		div#newsbox div#newslist h1 {
			margin-top:6px;
			margin-left:4px;
			margin-right:4px;
			margin-bottom:6px;
			padding:0px;
			color:#0000CC;
			font-size:16px;
			text-align:left;
		}
		div#newsbox div#newslist p {
			margin-top:4px;
			margin-left:4px;
			margin-right:4px;
			margin-bottom:8px;
			padding:0px;
			font-size:14px;
			text-align:left;
		}
		div#newsbox div#newslist hr {
            width:80%;
            text-align:center;
        }
	</style> 
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script> 
	<script type="text/javascript">
        (function($){
            var speed = 1;
            var offset = 5;
            var interval = 60;
            var pos;
            var pos_initial;
            var newsBoxHeight;
            var newsListHeight;
 
            var anim = function(){
                $("#newslist").css({
                    visibility:"visible",
                    top:Math.floor(pos)
                });
 
                pos -= speed;
 
                if (pos < (-1 * (newsListHeight - newsBoxHeight))){
                    pos = 4*offset;
                }
            };
 
            function startAnim(){
                pos_initial = newsBoxHeight + offset;
                pos = pos_initial;
                setInterval(anim, interval);
            }
 
            $(window).ready(function(){
                newsBoxHeight = $("#newsbox").height();
                newsListHeight = $("#newslist").height();
 
                $("#newsbox").hover(
                    function(){
                        speed = 0;
                    },
                    function(){
                        speed = 1;
                    }
                );
 
                startAnim()
            });
        })(jQuery);
	</script> 
</head> 
<body> 
	<div id="conteneur"> 
		<p> 
			Il s'agit de la version adaptée en jQuery d'une "newsbox" proposée par <a href="http://www.developpez.net/forums/u28015/marcha/">MARCHA</a> en réponse à cette <a href="http://www.developpez.net/forums/d674593/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/script-defilement-vertical/#post3947789">question</a> 
		</p> 
		<p> 
		"newsbox" : difussion verticale continue, de bas en haut, de messages (bref, en principe) attirant l'attention sur de nouvelles informations.
		</p> 
		<p> 
			La courte pause avant la reprise de la difussion indique au lecteur que la série est terminée.
		</p>
 
		<div style="float:left;"> 
			<div id='newsbox'> 
				<div id='newslist'> 
					<h1>Vestibulum</h1> 
					<p> 
						Vestibulum ac nisl sit amet odio lobortis pellentesque. 
					</p>
                    <hr />
					<h1>Quisque</h1> 
					<p> 
						Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor.
					</p>
                    <hr />
					<h1>Ut suscipit</h1> 
					<p> 
						Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus.
					</p>
                    <hr />
					<h1>Curabitur</h1> 
					<p> 
						Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu.
					</p>
                    <hr />
					<h1>Sed volutpat</h1> 
					<p> 
						Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis.
					</p>
                    <hr />
					<h1>Maecenas</h1> 
					<p> 
                        Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
					</p>
                    <hr />
				</div> 
			</div> 
		</div>
 
		<p style="clear:both;">&nbsp;</p> 
	</div> 
</body> 
</html>

**danielhagnoul** · 11/01/2010, 09h40

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code :

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