Conflits entre script JQuery

**joker92** · 27/11/2009, 20h02

Bonjour,

je suis graphiste/designer, j'ai appris le html/css qui n'est pas trop compliquer, en revanche je n'y connais rien en JavaScript. Pour les besoins d'un projet, j'utilise plusieurs scripts JQuery, ils fonctionnent bien tous de leur coté,
l'un fait défilé des photos comme un slider,
l'un donne des effets de fondu sur un menu
l'un fait défiler des vignettes grâce à des fléches

par contre quand je les exécutes tous dans ma page, ces scripts rentrent en conflit, ils ne fonctionnent plus très bien, voir plus du tout..
J'ai entendu parler de JqueryNoConflict mais je n'utilise pas d'autres librairies comme prototype ou autres. Tout les scripts sont basé sur JQuery, est-ce que c'est normal qu'il rentrent en conflit ? est-ce qu'on est limité à en appeler qu'un ou deux et pas plus ? Avez vous déjà rencontrer ce problème ?

Merci de m'avoir lu !!

**danielhagnoul** · 28/11/2009, 00h42

Envoyé par joker92

Tout les scripts sont basé sur JQuery, est-ce que c'est normal qu'il rentrent en conflit ? est-ce qu'on est limité à en appeler qu'un ou deux et pas plus ?

Ce n'est a priori pas normal et vous n'avez pas besoin de noConflit() pour du jQuery.

L'appel aux "scripts" doit ressembler à ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function(){
   // appel du slider
   ...
 
  // appel des effets de fondu sur un menu
  ....
 
  //etc.
});

Il est très difficile de vous aider sans voir le code, vous serait-il possible de donner un lien vers la page ?

**joker92** · 28/11/2009, 03h47

Bonjour,

Tout d'abord merci pour votre réponse,
il n'est pas possible de vous donner l'adresse du site car je le travail encore localement sous drupal...

j'ai créer rapidement un dossier qui réunnit quelque-uns de ses scripts JQuery, en faisant des appels un peu en vrac aux script,
j'ai mis tout ça vers une vieille adresse quelconque dont je ne me sert que pour des test: http://membres.lycos.fr/son01/

vous pouvez cliquer sur page.html pour constater que celà ne fonctionne pas, celà dis il y à de la pub qui est généré par l'hébergeur alors le mieux pour se rendre compte serait de prendre le dossier complet sur: http://membres.lycos.fr/son01/all.rar et de regarder sur votre pc si vous avez 2 minutes.

Vous pourrez rapidement enlever un script ou deux de la page.html pour constater que le fonctionnement des autres dépendent de leurs présence.

Qu'en pensez-vous ?
Merci d'avance.

**danielhagnoul** · 28/11/2009, 11h57

Bonjour.

Deux minutes !

Plutôt deux heures !

Désolé de vous apprendre que page.html ressemble à tout sauf à une page internet bien conçue.

Vous chargez plusieurs fois différentes versions de jQuery mais pas la bonne.

Le script jquery.window requiert l'usage de jQuery 1.3.2 et de jQuery UI 1.7.2

Dans le zip, la feuille de style pour jQuery 1.7.2 est manquante.

jquery.windows.js signale une erreur à la ligne 128 :

$("#example3 > .javascript_code").codeview();

L'erreur fait peut être référence à une partie manquante.

Mais page.html s'affiche

Correctement ?

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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.7.2.custom.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<link rel="stylesheet" type="text/css" href="css/jquery.window.css" />
	<link rel="stylesheet" type="text/css" href="css/general.css"/>
	<link rel="stylesheet" type="text/css" href="css/skin.css" />
	<style type="text/css">
		/* style des div */
		#un{
			float:left;
			width: 98%;
			height: 200px;
			border: 5px solid red;
		}
		#deux{
			float:left;
			width: 98%;
			height: 800px;
			border: 5px solid red;
		}
		#trois{
			float:left;
			width: 98%;
			height: 500px;
			border: 5px solid red;
		}
		#quatre{
			float:left;
			width: 98%;
			height: 200px;
			border: 5px solid red;
		}
		#cinq{
			float:left;
			width: 98%;
			height: 200px;
			border: 5px solid red;
		}
		/* Fin style des div */
	</style>
	<!--
		Il faut revoir votre conception d'une page internet !
 
		Attention vous chargé plusieurs fois la librairie jQuery, la dernière est jquery-1.3.2.min.js
 
		Attention vous chargé jquery-ui sans la feuille CSS !
		Pour le test j'ai donc utilisé ma version :
			css/humanity/jquery-ui-1.7.2.custom.css
			jquery-ui-1.7.2.custom.min.js
	-->
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery-color.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
	<script type="text/javascript" src="js/jquery.window.js"></script>
	<script type="text/javascript">
		var initTweenJNews = function(){
			posXstart = 0;
			posXend = 0;
			timerNews = 0; 
			var timerInterval = 10000;
 
			var width = parseInt($('#maskUne').css('width'));
 
			//foreach #articleVignette a > mouseover
			var tab = $('#articleVignetteUne a');
 
			for(var i = 0; i < tab.length; i++)
			{
				tab[i].index = i;
 
				tab[i].onmouseover = function(){
					var index = this.index;
					posXend = (width*(index)*-1);
 
					//Animation + décélération
					$('#articleUne').animate({left: posXend - 20}, {queue: false, duration: 150}).animate({left: posXend }, {queue: false, duration: 250});
 
					posXstart = posXend;
 
					//Réinitiasation de nextNews
					clearInterval(timerNews);
					timerNews = setInterval(nextNews, timerInterval);
				}	
			}
 
			timerNews = setInterval(nextNews, timerInterval);
		};
 
		function nextNews(){
			var size = parseInt($('#articleUne').css('width'));
			var width = parseInt($('#maskUne').css('width'));
 
			// ATTENTION origine de posXend, valeur ?
			posXend -= width;
 
			if(posXend <= size*-1){
				posXend = 0;
			}
 
			$('#articleUne').animate({left: posXend -20}, {queue: false, duration: 150}).animate({left: posXend}, {queue: false, duration: 250});
 
			posXstart = posXend;
		}
 
		var hoverColour = "#FFF";
 
		$(document).ready(function() {
			$("a.hoverBtn").show("fast", function() {
				$(this).wrap("<div class=\"hoverBtn\">");
				$(this).attr("class", "");
			});
			$("a.hoverBtn2").show("fast", function() {
				$(this).wrap("<div class=\"hoverBtn2\">");
				$(this).attr("class", "");
			});
			$("a.hoverBtn3").show("fast", function() {
				$(this).wrap("<div class=\"hoverBtn3\">");
				$(this).attr("class", "");
			});
			$("a.hoverBtn4").show("fast", function() {
				$(this).wrap("<div class=\"hoverBtn4\">");
				$(this).attr("class", "");
			});
			$("a.hoverBtn5").show("fast", function() {
				$(this).wrap("<div class=\"hoverBtn5\">");
				$(this).attr("class", "");
			});
 
			//display the hover div
			$("div.hoverBtn").show("fast", function() {
				//append the background div
				$(this).append("<div></div>");
 
				//get link's size
				var wid = $(this).children("a").width();
				var hei = $(this).children("a").height();
 
				//set div's size
				$(this).width(wid);
				$(this).height(hei);
				$(this).children("div").width(wid);
				$(this).children("div").height(hei);
 
				//on link hover
				$(this).children("a").hover(
					function(){
						//store initial link colour
						if ($(this).attr("rel") == "") {
							$(this).attr("rel", $(this).css("color"));
						}
						//fade in the background
						$(this).parent().children("div")
							.stop()
							.css({"display": "none", "opacity": "1"})
							.fadeIn("fast");
						//fade the colour
						$(this)	.stop()
							.css({"color": $(this).attr("rel")})
							.animate({"color": hoverColour}, 50);
					},
					function(){
						//fade out the background
						$(this).parent().children("div")
							.stop()
							.fadeOut("slow");
						//fade the colour
						$(this)	.stop()
							.animate({"color": $(this).attr("rel")}, 250);
					}
				);
			});
 
			$("div.hoverBtn2").show("fast", function() {
				//append the background div
				$(this).append("<div></div>");
 
				//get link's size
				var wid = $(this).children("a").width();
				var hei = $(this).children("a").height();
 
				//set div's size
				$(this).width(wid);
				$(this).height(hei);
				$(this).children("div").width(wid);
				$(this).children("div").height(hei);
 
				//on link hover
				$(this).children("a").hover(
					function(){
						//store initial link colour
						if ($(this).attr("rel") == "") {
							$(this).attr("rel", $(this).css("color"));
						}
						//fade in the background
						$(this).parent().children("div")
							.stop()
							.css({"display": "none", "opacity": "1"})
							.fadeIn("fast");
						//fade the colour
						$(this)	.stop()
							.css({"color": $(this).attr("rel")})
							.animate({"color": hoverColour}, 50);
					},
					function(){
						//fade out the background
						$(this).parent().children("div")
							.stop()
							.fadeOut("slow");
						//fade the colour
						$(this)	.stop()
							.animate({"color": $(this).attr("rel")}, 250);
					}
				);
			});
 
			$("div.hoverBtn3").show("fast", function() {
				//append the background div
				$(this).append("<div></div>");
 
				//get link's size
				var wid = $(this).children("a").width();
				var hei = $(this).children("a").height();
 
				//set div's size
				$(this).width(wid);
				$(this).height(hei);
				$(this).children("div").width(wid);
				$(this).children("div").height(hei);
 
				//on link hover
				$(this).children("a").hover(
					function(){
						//store initial link colour
						if ($(this).attr("rel") == "") {
							$(this).attr("rel", $(this).css("color"));
						}
						//fade in the background
						$(this).parent().children("div")
							.stop()
							.css({"display": "none", "opacity": "1"})
							.fadeIn("fast");
						//fade the colour
						$(this)	.stop()
							.css({"color": $(this).attr("rel")})
							.animate({"color": hoverColour}, 50);
					},
					function(){
						//fade out the background
						$(this).parent().children("div")
							.stop()
							.fadeOut("slow");
						//fade the colour
						$(this)	.stop()
							.animate({"color": $(this).attr("rel")}, 250);
					}
				);
			});
 
			$("div.hoverBtn4").show("fast", function() {
				//append the background div
				$(this).append("<div></div>");
 
				//get link's size
				var wid = $(this).children("a").width();
				var hei = $(this).children("a").height();
 
				//set div's size
				$(this).width(wid);
				$(this).height(hei);
				$(this).children("div").width(wid);
				$(this).children("div").height(hei);
 
				//on link hover
				$(this).children("a").hover(
					function(){
						//store initial link colour
						if ($(this).attr("rel") == "") {
							$(this).attr("rel", $(this).css("color"));
						}
						//fade in the background
						$(this).parent().children("div")
							.stop()
							.css({"display": "none", "opacity": "1"})
							.fadeIn("fast");
						//fade the colour
						$(this)	.stop()
							.css({"color": $(this).attr("rel")})
							.animate({"color": hoverColour}, 50);
					},
					function(){
						//fade out the background
						$(this).parent().children("div")
							.stop()
							.fadeOut("slow");
						//fade the colour
						$(this)	.stop()
							.animate({"color": $(this).attr("rel")}, 250);
					}
				);
			});
 
			$("div.hoverBtn5").show("fast", function() {
				//append the background div
				$(this).append("<div></div>");
 
				//get link's size
				var wid = $(this).children("a").width();
				var hei = $(this).children("a").height();
 
				//set div's size
				$(this).width(wid);
				$(this).height(hei);
				$(this).children("div").width(wid);
				$(this).children("div").height(hei);
 
				//on link hover
				$(this).children("a").hover(
					function(){
						//store initial link colour
						if ($(this).attr("rel") == "") {
							$(this).attr("rel", $(this).css("color"));
						}
						//fade in the background
						$(this).parent().children("div")
							.stop()
							.css({"display": "none", "opacity": "1"})
							.fadeIn("fast");
						//fade the colour
						$(this)	.stop()
							.css({"color": $(this).attr("rel")})
							.animate({"color": hoverColour}, 50);
					},function(){
						//fade out the background
						$(this).parent().children("div")
							.stop()
							.fadeOut("slow");
						//fade the colour
						$(this)	.stop()
							.animate({"color": $(this).attr("rel")}, 250);
					}
				);
			});
		});
	</script>
</head>
<body>
 
	<!--- 1er Jquery --->
	<div id="un">1
		<div id="pageWrap">
			<div id="pageBody">
				<a class="hoverBtn" href="#">Acceuil</a>
				<a class="hoverBtn2" href="#">Actualites</a>
				<a class="hoverBtn3" href="#">Artistes</a>
				<a class="hoverBtn4" href="#">Sons</a>
				<a class="hoverBtn5" href="#">Events</a>
 
				<div class="clear"></div>
			</div>
		</div>
	</div>	
	<!--- Fin 1er Jquery --->
 
	<!--- 2e Jquery --->
	<div id="deux">2
		<a href="#" onclick='createWindowWithBoundary(true);'> 2e: Lance une fausse fenêtre </a>
		<div id='my_boundary_panel' style='border:0px solid black; float: center; margin-left:auto; margin-right: auto; width:1000px; height:800px;'></div>
	</div>	
	<!--- Fin 2e Jquery --->
 
	<!--- 3e Jquery --->
	<div id="trois">3
		<div id="une_flash">
			<div id="maskUne">
				<ul id="articleVignetteUne">
					<li>
						<a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »">
							<img src="images/90x51_1.jpg" alt="« On n'a rien volé » (PHOTO © PANORAMIC)">
						</a>
					</li>
					<li>
						<a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » ">
							<img src="images/90x51_2.jpg" alt="« Un manque de personnalité ? »  (PHOTO © PANORAMIC)">
						</a>
					</li>
					<li>
						<a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit">
							<img src="images/90x51_3.jpg" alt="Kovacevic intéresse le Zenit (PHOTO © PANORAMIC)">
						</a>
					</li>
					<li>
						<a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013">
							<img src="images/90x51_4.jpg" alt="Nogueira jusqu'en 2013 (PHOTO © PANORAMIC)">
						</a>
					</li>
				</ul>
				<div style="left: 0px;" id="articleUne">
					<div id="opacityBandeUne"></div>
					<ul>
						<li>
							<div>
								<h4><a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »">EXCLU gfgfd.com – D. Guetta / Dj :</a></h4>
								<h1><a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »">« D. Guetta sort son »</a></h1>
							</div>
							<a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »"><img src="images/460x261_1.jpg" alt="« On n'a rien volé » (PHOTO © PANORAMIC)"></a>
						</li>
						<li>
							<div>
								<h4><a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » ">LYSON :</a></h4>
								<h1><a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » ">« U ? » </a></h1>
							</div>
							<a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » "><img src="images/460x261_2.jpg" alt="« Un manque de personnalité ? »  (PHOTO © PANORAMIC)"></a>
						</li>
						<li>
							<div>
								<h4><a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit">LNS : </a></h4>
								<h1><a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit">Kovat</a></h1>
							</div>
							<a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit"><img src="images/460x261_3.jpg" alt="Kovacevic intéresse le Zenit (PHOTO © PANORAMIC)"></a>
						</li>
						<li>
							<div>
								<h4><a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013">LAUX :</a></h4>
								<h1><a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013">Noqoui</a></h1>
							</div>
							<a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013"><img src="images/460x261_4.jpg" alt="Nogueira jusqu'en 2013 (PHOTO © PANORAMIC)"></a>
						</li>
					</ul>
				</div>
			</div>
			<script type="text/javascript">
				initTweenJNews();
			</script>
		</div>	
	</div>
	<!--- Fin 3e Jquery --->
 
	<!--- 4e Jquery --->
	<div id="quatre">4
		<br /><br /><br />
		<div id="wrap">	
			<ul id="mycarousel" class="jcarousel-skin-tango">
				<li><a href="www.google.fr"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="100" height="75" alt="" /><a></li>
				<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="100" height="75" alt="" /></li>
				<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="100" height="75" alt="" /></li>
			</ul>
		</div>
		<script type="text/javascript">
			$('#mycarousel').jcarousel({
				visible: 4
			});
		</script>
	</div>	
	<!--- Fin 4e Jquery --->
 
</body>
</html>

**joker92** · 28/11/2009, 15h33

Bonjour, merci de vous être pencher sur mon problème ! c'est très gentil à vous.

J'ai récupéré votre code dans votre post précédent, je me suis procuré les librairies auxquelles vous faites appels, et je dois dire que cela fonctionne très bien, plus de conflit entre les scripts, à une exception près:
le menu (n°1) ne fonctionne pas (plus d'effet,plus d'images), en revanche si j'ajoute la ligne suivante à votre code:
<script type="text/javascript" src="js/jquery.js"></script>
A ce moment là, le menu fonctionne bien mais c'est le script de la fenêtre (n°2) qui ne fonctionne plus !

- Auriez vous une idée ?

J'ai biensur récupéré tout ses scripts sur internet et j'ignorais qu'il fallait faire des appels à tel ou tel librairies plutôt que de laisser leurs appels aux fichiers js d'origine dans leurs exemple.
Merci encore

**danielhagnoul** · 28/11/2009, 19h18

Envoyé par joker92

en revanche si j'ajoute la ligne suivante à votre code:
<script type="text/javascript" src="js/jquery.js"></script>

Bonsoir.

jquery.js est la version 1.2.6 de jQuery, inutile puisque l'on charge la version 1.3.2

J'avais mal placé le code de la première division

, voici la correction :

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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.window.css" />
    <link rel="stylesheet" type="text/css" href="css/general.css"/>
    <link rel="stylesheet" type="text/css" href="css/skin.css" />
    <style type="text/css">
        /* style des div */
        #un{
            float:left;
            width: 98%;
            height: 200px;
            border: 5px solid red;
        }
        #deux{
            float:left;
            width: 98%;
            height: 800px;
            border: 5px solid red;
        }
        #trois{
            float:left;
            width: 98%;
            height: 500px;
            border: 5px solid red;
        }
        #quatre{
            float:left;
            width: 98%;
            height: 200px;
            border: 5px solid red;
        }
        #cinq{
            float:left;
            width: 98%;
            height: 200px;
            border: 5px solid red;
        }
        /* Fin style des div */
    </style>
    <!--
        Il faut revoir votre conception d'une page internet !
 
        Attention vous chargé plusieurs fois la librairie jQuery, la dernière est jquery-1.3.2.min.js
 
        Attention vous chargé jquery-ui sans la feuille CSS !
        Pour le test j'ai donc utilisé ma version :
            css/humanity/jquery-ui-1.7.2.custom.css
            jquery-ui-1.7.2.custom.min.js
    -->
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-color.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
    <script type="text/javascript" src="js/jquery.window.js"></script>
    <script type="text/javascript">
        var initTweenJNews = function(){
            posXstart = 0;
            posXend = 0;
            timerNews = 0; 
            var timerInterval = 10000;
 
            var width = parseInt($('#maskUne').css('width'));
 
            //foreach #articleVignette a > mouseover
            var tab = $('#articleVignetteUne a');
 
            for(var i = 0; i < tab.length; i++)
            {
                tab[i].index = i;
 
                tab[i].onmouseover = function(){
                    var index = this.index;
                    posXend = (width*(index)*-1);
 
                    //Animation + décélération
                    $('#articleUne').animate({left: posXend - 20}, {queue: false, duration: 150}).animate({left: posXend }, {queue: false, duration: 250});
 
                    posXstart = posXend;
 
                    //Réinitiasation de nextNews
                    clearInterval(timerNews);
                    timerNews = setInterval(nextNews, timerInterval);
                }    
            }
 
            timerNews = setInterval(nextNews, timerInterval);
        };
 
        function nextNews(){
            var size = parseInt($('#articleUne').css('width'));
            var width = parseInt($('#maskUne').css('width'));
 
            // ATTENTION origine de posXend, valeur ?
            posXend -= width;
 
            if(posXend <= size*-1){
                posXend = 0;
            }
 
            $('#articleUne').animate({left: posXend -20}, {queue: false, duration: 150}).animate({left: posXend}, {queue: false, duration: 250});
 
            posXstart = posXend;
        }
    </script>
</head>
<body>
 
    <!--- 1er Jquery --->
    <div id="un">1
        <div id="pageWrap">
            <div id="pageBody">
                <a class="hoverBtn" href="#">Acceuil</a>
                <a class="hoverBtn2" href="#">Actualites</a>
                <a class="hoverBtn3" href="#">Artistes</a>
                <a class="hoverBtn4" href="#">Sons</a>
                <a class="hoverBtn5" href="#">Events</a>
 
                <div class="clear"></div>
            </div>
        </div>
        <script type="text/javascript">
            var hoverColour = "#FFF";
 
            $("a.hoverBtn").show("fast", function() {
                $(this).wrap("<div class=\"hoverBtn\">");
                $(this).attr("class", "");
            });
            $("a.hoverBtn2").show("fast", function() {
                $(this).wrap("<div class=\"hoverBtn2\">");
                $(this).attr("class", "");
            });
            $("a.hoverBtn3").show("fast", function() {
                $(this).wrap("<div class=\"hoverBtn3\">");
                $(this).attr("class", "");
            });
            $("a.hoverBtn4").show("fast", function() {
                $(this).wrap("<div class=\"hoverBtn4\">");
                $(this).attr("class", "");
            });
            $("a.hoverBtn5").show("fast", function() {
                $(this).wrap("<div class=\"hoverBtn5\">");
                $(this).attr("class", "");
            });
 
            //display the hover div
            $("div.hoverBtn").show("fast", function() {
                //append the background div
                $(this).append("<div></div>");
 
                //get link's size
                var wid = $(this).children("a").width();
                var hei = $(this).children("a").height();
 
                //set div's size
                $(this).width(wid);
                $(this).height(hei);
                $(this).children("div").width(wid);
                $(this).children("div").height(hei);
 
                //on link hover
                $(this).children("a").hover(
                    function(){
                        //store initial link colour
                        if ($(this).attr("rel") == "") {
                            $(this).attr("rel", $(this).css("color"));
                        }
                        //fade in the background
                        $(this).parent().children("div")
                            .stop()
                            .css({"display": "none", "opacity": "1"})
                            .fadeIn("fast");
                        //fade the colour
                        $(this)    .stop()
                            .css({"color": $(this).attr("rel")})
                            .animate({"color": hoverColour}, 50);
                    },
                    function(){
                        //fade out the background
                        $(this).parent().children("div")
                            .stop()
                            .fadeOut("slow");
                        //fade the colour
                        $(this)    .stop()
                            .animate({"color": $(this).attr("rel")}, 250);
                    }
                );
            });
 
            $("div.hoverBtn2").show("fast", function() {
                //append the background div
                $(this).append("<div></div>");
 
                //get link's size
                var wid = $(this).children("a").width();
                var hei = $(this).children("a").height();
 
                //set div's size
                $(this).width(wid);
                $(this).height(hei);
                $(this).children("div").width(wid);
                $(this).children("div").height(hei);
 
                //on link hover
                $(this).children("a").hover(
                    function(){
                        //store initial link colour
                        if ($(this).attr("rel") == "") {
                            $(this).attr("rel", $(this).css("color"));
                        }
                        //fade in the background
                        $(this).parent().children("div")
                            .stop()
                            .css({"display": "none", "opacity": "1"})
                            .fadeIn("fast");
                        //fade the colour
                        $(this)    .stop()
                            .css({"color": $(this).attr("rel")})
                            .animate({"color": hoverColour}, 50);
                    },
                    function(){
                        //fade out the background
                        $(this).parent().children("div")
                            .stop()
                            .fadeOut("slow");
                        //fade the colour
                        $(this)    .stop()
                            .animate({"color": $(this).attr("rel")}, 250);
                    }
                );
            });
 
            $("div.hoverBtn3").show("fast", function() {
                //append the background div
                $(this).append("<div></div>");
 
                //get link's size
                var wid = $(this).children("a").width();
                var hei = $(this).children("a").height();
 
                //set div's size
                $(this).width(wid);
                $(this).height(hei);
                $(this).children("div").width(wid);
                $(this).children("div").height(hei);
 
                //on link hover
                $(this).children("a").hover(
                    function(){
                        //store initial link colour
                        if ($(this).attr("rel") == "") {
                            $(this).attr("rel", $(this).css("color"));
                        }
                        //fade in the background
                        $(this).parent().children("div")
                            .stop()
                            .css({"display": "none", "opacity": "1"})
                            .fadeIn("fast");
                        //fade the colour
                        $(this)    .stop()
                            .css({"color": $(this).attr("rel")})
                            .animate({"color": hoverColour}, 50);
                    },
                    function(){
                        //fade out the background
                        $(this).parent().children("div")
                            .stop()
                            .fadeOut("slow");
                        //fade the colour
                        $(this)    .stop()
                            .animate({"color": $(this).attr("rel")}, 250);
                    }
                );
            });
 
            $("div.hoverBtn4").show("fast", function() {
                //append the background div
                $(this).append("<div></div>");
 
                //get link's size
                var wid = $(this).children("a").width();
                var hei = $(this).children("a").height();
 
                //set div's size
                $(this).width(wid);
                $(this).height(hei);
                $(this).children("div").width(wid);
                $(this).children("div").height(hei);
 
                //on link hover
                $(this).children("a").hover(
                    function(){
                        //store initial link colour
                        if ($(this).attr("rel") == "") {
                            $(this).attr("rel", $(this).css("color"));
                        }
                        //fade in the background
                        $(this).parent().children("div")
                            .stop()
                            .css({"display": "none", "opacity": "1"})
                            .fadeIn("fast");
                        //fade the colour
                        $(this)    .stop()
                            .css({"color": $(this).attr("rel")})
                            .animate({"color": hoverColour}, 50);
                    },
                    function(){
                        //fade out the background
                        $(this).parent().children("div")
                            .stop()
                            .fadeOut("slow");
                        //fade the colour
                        $(this)    .stop()
                            .animate({"color": $(this).attr("rel")}, 250);
                    }
                );
            });
 
            $("div.hoverBtn5").show("fast", function() {
                //append the background div
                $(this).append("<div></div>");
 
                //get link's size
                var wid = $(this).children("a").width();
                var hei = $(this).children("a").height();
 
                //set div's size
                $(this).width(wid);
                $(this).height(hei);
                $(this).children("div").width(wid);
                $(this).children("div").height(hei);
 
                //on link hover
                $(this).children("a").hover(
                    function(){
                        //store initial link colour
                        if ($(this).attr("rel") == "") {
                            $(this).attr("rel", $(this).css("color"));
                        }
                        //fade in the background
                        $(this).parent().children("div")
                            .stop()
                            .css({"display": "none", "opacity": "1"})
                            .fadeIn("fast");
                        //fade the colour
                        $(this)    .stop()
                            .css({"color": $(this).attr("rel")})
                            .animate({"color": hoverColour}, 50);
                    },function(){
                        //fade out the background
                        $(this).parent().children("div")
                            .stop()
                            .fadeOut("slow");
                        //fade the colour
                        $(this)    .stop()
                            .animate({"color": $(this).attr("rel")}, 250);
                    }
                );
            });
        </script>
    </div>    
    <!--- Fin 1er Jquery --->
 
    <!--- 2e Jquery --->
    <div id="deux">2
        <a href="#" onclick='createWindowWithBoundary(true);'> 2e: Lance une fausse fenêtre </a>
        <div id='my_boundary_panel' style='border:0px solid black; float: center; margin-left:auto; margin-right: auto; width:1000px; height:800px;'></div>
    </div>    
    <!--- Fin 2e Jquery --->
 
    <!--- 3e Jquery --->
    <div id="trois">3
        <div id="une_flash">
            <div id="maskUne">
                <ul id="articleVignetteUne">
                    <li>
                        <a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »">
                            <img src="images/90x51_1.jpg" alt="« On n'a rien volé » (PHOTO © PANORAMIC)">
                        </a>
                    </li>
                    <li>
                        <a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » ">
                            <img src="images/90x51_2.jpg" alt="« Un manque de personnalité ? »  (PHOTO © PANORAMIC)">
                        </a>
                    </li>
                    <li>
                        <a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit">
                            <img src="images/90x51_3.jpg" alt="Kovacevic intéresse le Zenit (PHOTO © PANORAMIC)">
                        </a>
                    </li>
                    <li>
                        <a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013">
                            <img src="images/90x51_4.jpg" alt="Nogueira jusqu'en 2013 (PHOTO © PANORAMIC)">
                        </a>
                    </li>
                </ul>
                <div style="left: 0px;" id="articleUne">
                    <div id="opacityBandeUne"></div>
                    <ul>
                        <li>
                            <div>
                                <h4><a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »">EXCLU gfgfd.com – D. Guetta / Dj :</a></h4>
                                <h1><a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »">« D. Guetta sort son »</a></h1>
                            </div>
                            <a href="http://www.football365.fr/france/infos-clubs/montpellier/article_356499_exclu365-montpellier-r.pitau-On-n-a-rien-vole-.shtml" title="« On n'a rien volé »"><img src="images/460x261_1.jpg" alt="« On n'a rien volé » (PHOTO © PANORAMIC)"></a>
                        </li>
                        <li>
                            <div>
                                <h4><a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » ">LYSON :</a></h4>
                                <h1><a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » ">« U ? » </a></h1>
                            </div>
                            <a href="http://www.football365.fr/france/infos-clubs/lyon/article_356373_lyon-ederson-Un-manque-de-personnalite-.shtml" title="« Un manque de personnalité ? » "><img src="images/460x261_2.jpg" alt="« Un manque de personnalité ? »  (PHOTO © PANORAMIC)"></a>
                        </li>
                        <li>
                            <div>
                                <h4><a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit">LNS : </a></h4>
                                <h1><a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit">Kovat</a></h1>
                            </div>
                            <a href="http://www.mercato365.com/infos-clubs/lens/article_356231_l1-lens-Kovacevic-interesse-le-Zenit.shtml" title="Kovacevic intéresse le Zenit"><img src="images/460x261_3.jpg" alt="Kovacevic intéresse le Zenit (PHOTO © PANORAMIC)"></a>
                        </li>
                        <li>
                            <div>
                                <h4><a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013">LAUX :</a></h4>
                                <h1><a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013">Noqoui</a></h1>
                            </div>
                            <a href="http://www.mercato365.com/infos-clubs/sochaux/article_356230_l1-sochaux-Nogueira-jusqu-en-2013.shtml" title="Nogueira jusqu'en 2013"><img src="images/460x261_4.jpg" alt="Nogueira jusqu'en 2013 (PHOTO © PANORAMIC)"></a>
                        </li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                initTweenJNews();
            </script>
        </div>    
    </div>
    <!--- Fin 3e Jquery --->
 
    <!--- 4e Jquery --->
    <div id="quatre">4
        <br /><br /><br />
        <div id="wrap">    
            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li><a href="www.google.fr"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="100" height="75" alt="" /><a></li>
                <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="100" height="75" alt="" /></li>
                <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="100" height="75" alt="" /></li>
            </ul>
        </div>
        <script type="text/javascript">
            $('#mycarousel').jcarousel({
                visible: 4
            });
        </script>
    </div>    
    <!--- Fin 4e Jquery --->
 
</body>
</html>

**joker92** · 29/11/2009, 01h30

Merci infiniment ! celà fonctionne très très bien, vous m'avez sauver et j'ai vu que je n'était pas le seul que vous sauviez !!
Pour que je ne m'en contente pas et que je comprenne bien pour ne pas refaire ces erreurs..il faut chargé la dernière librairies JQuery uniquement et aussi jquery-ui-1.7.2.custom.min.js ..?
en plus des js qui correspondent aux fonctionnement du script lui même.

j'ai vu que vous aviez remis du code entre:
<script type="text/javascript"> le code </script>
c'est pour une manière d'être plus clair pour les appels et les modifications à donner peut-être ?

Mon problème est résolu, Merci encore !

**danielhagnoul** · 29/11/2009, 20h20

Bonsoir.

Concernant jQuery UI 1.7.2, je vous conseille la lecture du paragraphe Themeroller de la page http://danielhagnoul.developpez.com/...atepicker.html

J'ai ramené tous les scripts dans page.html pour les examiner. L'emplacement des scripts dépend de leur action sur le contenu de la page. Lorsque le développement et les tests d'un script sont terminés, il est recommandé de les placer dans un fichier javascript externe à page.html

Conflits entre script JQuery

jQuery

Discussions similaires

Partager

Partager