Incompatibilité entre script avec les $ [Résolu]

WuKoDLaK · 18/01/2011, 17h16

Bonjour,

J'ai recherché de nombreuses solutions sur le forum et sur internet pour corriger un soucis qui me bloque depuis plusieurs semaines. Je ne pense pas avoir assez de maîtrise en JS et JQuery pour arriver à solutionner cela seul et voilà pourquoi je fais appel à votre aide.

Comme me l'a conseillé danielhagnoul, j'ouvre un nouveau post pour y présenter mon propre soucis et je vous présente le HEAD de mon site en cours de développement. A noter que les script séparément fonctionnent, dès que je tente de les mettre ensemble dans mon source... tout plante. JS non réactif, ou qui ne réalise pas ce qui est demandé.

J'ai essayé de tout englober sous un même

Code :

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

1
2
3
4
5
6
 
jQuery.noConflict();
 
jQuery(function($){
    // code
});

J'ai lu qu'il y avait une importance dans l'inclusion des fichiers JS... je n'ai pas trouvé de documentation précise à ce sujet.

La partie CSS

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
 
<!-- CSS affichage général -->
<link rel="stylesheet" href="./css/stylesheet.css" type="text/css" media="screen" />
 
<!-- Correctif bug IE6 -->	
<link rel="stylesheet" href="./css/ie6fix.css" type="text/css" media="screen" />
 
<!-- CSS pour Script Post it news -->
<link rel="stylesheet" href="./news/post-it.css" type="text/css" media="screen" />
 
<!-- CSS affichage dynamique du background -->
<link rel="stylesheet" href="./css/background.css" type="text/css" media="screen" />
 
<!-- CSS pour affichage du Menu -->
<link rel="stylesheet" href="./css/styleMenu.css" type="text/css" media="screen"/>
 
<!-- CSS affichage des fancybox -->
<link rel="stylesheet" href="./js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />  
 
<!-- CSS affichage du slide haut de page -->
<link rel="stylesheet" href="./css/slide.css" type="text/css" media="screen" />
 
<!-- Script en rapport avec les bibliothèques et JQuery 1.4.4 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 
 
<script type="text/javascript" src="./news/jquery.easynews.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
 
 
<!-- Slide supérieur -->
<script src="./js/slide.js" type="text/javascript"></script>
 
<!-- Image popup -->
<script type="text/javascript" src="./js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 
 
<!-- menu -->
<style>
	span.reference{
		position:fixed;
		left:10px;
		bottom:10px;
		font-size:12px;
	}
	span.reference a{
		color:#aaa;
		text-transform:uppercase;
		text-decoration:none;
		text-shadow:1px 1px 1px #000;
		margin-right:30px;
	}
	span.reference a:hover{
		color:#ddd;
	}
	ul.sdt_menu{
		margin-left:auto;
		margin-right:auto;
		margin-top:110px;
	}
</style> 
 
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
        <script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->

Ce qui suit la partie JS

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
 
<script>
	// JS Gestion de la fancybox http://fancybox.net/
	$(document).ready(function($){ {
		$("a#num_utiles").fancybox({
			'overlayColor'		: '#000',
			'overlayOpacity'	: 0.9,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
	}); 
 
	// JS Gestion du background dynamique
	$(document).ready(function($){ {
 
		(function(){ 
			 var i = 0; 
		         setInterval(function(){ 
 
				//on cache l'image immédiatement 
				$("#backgroundImage").removeClass("bg1, bg2").fadeOut(150, function(){ 
					//on la ré-affiche avec un effet de transparence 
					$("#backgroundImage").addClass("bg"+(i++%2 + 1)).fadeIn(500); 
				});
			}, 10000);
		})(); 
	});
 
	// JS Gestion du post it de news			
	$(document).ready(function() { 
		var newsoption1 = {
			firstname: "mynews", //id de la div contenant les news
			secondname: "showhere", //id du conteneur où les news seront affichées
			fourthname:"news_button", //la div qui contient les images de nvigation (suivant, precedent, pause)
			newsspeed:'6000' //vitesse de defilement de news
		}
		$.init_news(newsoption1);
		var myoffset=$('#news_button').offset();
		var mytop=myoffset.top-1;
		$('#news_button').css({top:mytop});
	}); 
 
 
	// JS Gestion du MENU
	$(function() {
	       /**
		* for each menu element, on mouseenter, 
		* we enlarge the image, and show both sdt_active span and 
		* sdt_wrap span. If the element has a sub menu (sdt_box),
		* then we slide it - if the element is the last one in the menu
		* we slide it to the left, otherwise to the right
		*/
		$('#sdt_menu > li').bind('mouseenter',function(){
			var $elem = $(this);
			$elem.find('img')
			.stop(true)
			.animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			},400,'easeOutBack')
			.andSelf()
			.find('.sdt_wrap')
		        .stop(true)
			.animate({'top':'140px'},500,'easeOutBack')
			.andSelf()
			.find('.sdt_active')
			.stop(true)
			.animate({'height':'170px'},300,function(){
				var $sub_menu = $elem.find('.sdt_box');
				if($sub_menu.length){
					var left = '170px';
				        if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				        $sub_menu.show().animate({'left':left},200);
				}	
			});
		}).bind('mouseleave',function(){
			var $elem = $(this);
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length)
				$sub_menu.hide().css('left','0px');
 
			$elem.find('.sdt_active')
			.stop(true)
			.animate({'height':'0px'},300)
			.andSelf().find('img')
			.stop(true)
			.animate({
				'width':'0Px',
				'height':'0px',
				'left':'85px'},400)
				.andSelf()
				.find('.sdt_wrap')
				.stop(true)
				.animate({'top':'25px'},500);
			});
		});
 
 
		$(function(){
			// Accordion
			$("#accordion").accordion({ header: "h3" });
 
			// Tabs
			$('#tabs').tabs();
 
			// Dialog			
			$('#dialog').dialog({
				autoOpen: false,
				width: 600,
				buttons: {
					"Ok": function() { 
						$(this).dialog("close"); 
					}, 
					"Cancel": function() { 
						$(this).dialog("close"); 
					} 
				}
			});
 
			// Dialog Link
			$('#dialog_link').click(function(){
				$('#dialog').dialog('open');
				return false;
			});
			// Datepicker
			$('#datepicker').datepicker({
				inline: true
			});
 
			// Slider
			$('#slider').slider({
				range: true,
				values: [17, 67]
			});
 
			// Progressbar
			$("#progressbar").progressbar({
				value: 20 
			});
 
			//hover states on the static widgets
			$('#dialog_link, ul#icons li').hover(
				function() { $(this).addClass('ui-state-hover'); }, 
				function() { $(this).removeClass('ui-state-hover'); }
			);
 
		});
</script>

Déjà, une question me trotte dans l'esprit, y a t il une erreur de code ??? Si vous avez une idée pour m'aider à solutionner ce soucis, grand merci car je vais laisser tomber ces librairies si ça continue.

danielhagnoul · 19/01/2011, 01h58

Bonsoir.

Effectivement, il y a du boulot !

Voilà le contenu du head remis en ordre, mais je n'ai pas le moyen de tester et il vous manque un link pour les styles jQuery UI. Ci-dessous, en exemple, ma page de base pour UI.

Votre code :

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
<head>
    <title><!-- Insert your title here --></title>
 
    <!-- ATTENTION : Je ne vois pas le link pour jQuery UI -->
 
    <!-- CSS affichage général -->
    <link rel="stylesheet" href="./css/stylesheet.css" type="text/css" media="screen" />
 
    <!-- Correctif bug IE6 -->	
    <link rel="stylesheet" href="./css/ie6fix.css" type="text/css" media="screen" />
 
    <!-- CSS pour Script Post it news -->
    <link rel="stylesheet" href="./news/post-it.css" type="text/css" media="screen" />
 
    <!-- CSS affichage dynamique du background -->
    <link rel="stylesheet" href="./css/background.css" type="text/css" media="screen" />
 
    <!-- CSS pour affichage du Menu -->
    <link rel="stylesheet" href="./css/styleMenu.css" type="text/css" media="screen"/>
 
    <!-- CSS affichage des fancybox -->
    <link rel="stylesheet" href="./js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />  
 
    <!-- CSS affichage du slide haut de page -->
    <link rel="stylesheet" href="./css/slide.css" type="text/css" media="screen" />
 
    <!-- menu -->
    <style>
        span.reference{
            position:fixed;
            left:10px;
            bottom:10px;
            font-size:12px;
        }
        span.reference a{
            color:#aaa;
            text-transform:uppercase;
            text-decoration:none;
            text-shadow:1px 1px 1px #000;
            margin-right:30px;
        }
        span.reference a:hover{
            color:#ddd;
        }
        ul.sdt_menu{
            margin-left:auto;
            margin-right:auto;
            margin-top:110px;
        }
    </style>
 
    <!-- Script en rapport avec les bibliothèques et JQuery 1.4.4 -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="./news/jquery.easynews.js"></script>
 
    <!-- Slide supérieur -->
    <script src="./js/slide.js" type="text/javascript"></script>
 
    <!-- Image popup -->
    <script type="text/javascript" src="./js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 
    <script>
        $(function() {
 
            // JS Gestion de la fancybox http://fancybox.net/
            $("a#num_utiles").fancybox({
                'overlayColor'		: '#000',
                'overlayOpacity'	: 0.9,
                'transitionIn'	: 'elastic',
                'transitionOut'	: 'elastic'
            });
 
            // JS Gestion du background dynamique
            (function(){ 
                 var i = 0; 
                     setInterval(function(){ 
 
                    //on cache l'image immédiatement 
                    $("#backgroundImage").removeClass("bg1, bg2").fadeOut(150, function(){ 
                        //on la ré-affiche avec un effet de transparence 
                        $("#backgroundImage").addClass("bg"+(i++%2 + 1)).fadeIn(500); 
                    });
                }, 10000);
            })(); 
 
            // JS Gestion du post it de news			
            var newsoption1 = {
                firstname: "mynews", //id de la div contenant les news
                secondname: "showhere", //id du conteneur où les news seront affichées
                fourthname:"news_button", //la div qui contient les images de nvigation (suivant, precedent, pause)
                newsspeed:'6000' //vitesse de defilement de news
            }
 
            $.init_news(newsoption1);
            var myoffset=$('#news_button').offset();
            var mytop=myoffset.top-1;
            $('#news_button').css({top:mytop});
 
 
            // JS Gestion du MENU
            /**
            * for each menu element, on mouseenter, 
            * we enlarge the image, and show both sdt_active span and 
            * sdt_wrap span. If the element has a sub menu (sdt_box),
            * then we slide it - if the element is the last one in the menu
            * we slide it to the left, otherwise to the right
            */
            $('#sdt_menu > li').bind('mouseenter',function(){
                var $elem = $(this);
                $elem.find('img')
                .stop(true)
                .animate({
                    'width':'170px',
                    'height':'170px',
                    'left':'0px'
                },400,'easeOutBack')
                .andSelf()
                .find('.sdt_wrap')
                    .stop(true)
                .animate({'top':'140px'},500,'easeOutBack')
                .andSelf()
                .find('.sdt_active')
                .stop(true)
                .animate({'height':'170px'},300,function(){
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length){
                        var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                        left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                    }	
                });
            }).bind('mouseleave',function(){
                var $elem = $(this);
                var $sub_menu = $elem.find('.sdt_box');
                if($sub_menu.length)
                    $sub_menu.hide().css('left','0px');
 
                $elem.find('.sdt_active')
                .stop(true)
                .animate({'height':'0px'},300)
                .andSelf().find('img')
                .stop(true)
                .animate({
                    'width':'0Px',
                    'height':'0px',
                    'left':'85px'},400)
                    .andSelf()
                    .find('.sdt_wrap')
                    .stop(true)
                    .animate({'top':'25px'},500);
                });
            });
 
            // Accordion
            $("#accordion").accordion({ header: "h3" });
 
            // Tabs
            $('#tabs').tabs();
 
            // Dialog			
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function() { 
                        $(this).dialog("close"); 
                    }, 
                    "Cancel": function() { 
                        $(this).dialog("close"); 
                    } 
                }
            });
 
            // Dialog Link
            $('#dialog_link').click(function(){
                $('#dialog').dialog('open');
                return false;
            });
            // Datepicker
            $('#datepicker').datepicker({
                inline: true
            });
 
            // Slider
            $('#slider').slider({
                range: true,
                values: [17, 67]
            });
 
            // Progressbar
            $("#progressbar").progressbar({
                value: 20 
            });
 
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
            );
        });
    </script>
</head>

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.7.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.7.custom.min.js"></script>
	<script>
		$(function(){
 
		});
	</script>
</body>  
</html>

WuKoDLaK · 20/01/2011, 18h41

Bonjour,

Merci pour ton intérêt à ma question danielhagnoul ! J'ai donc testé ce que tu m'as proposé, mais rien n'y a fait ...

J'ai donc pris le temps de refaire module par module ce que je voulais en sorti et donc voici un lien contenant source et démos!

Lien vers les DEMOS

Le site dans sa version 1 en lien ici, était trop simpliste et une demande m'avait été faite de refondre celui-ci pour en faire quelques chose d'attrayant et plus d'actualité. Je me suis donc remis en quête de nouveautés et j'ai donc trouvé ces nouvelles utilisations de JS et autres !

J'ai réussi à me donner une idée de la page d'accueil que je souhaitais mettre en place.

- Une barre supérieur qui se cache à volonté, avec gestion de contact de l'amicale par email, une gestion par login pour que certains utilisateur aient des droits précis.

- Un menu assez visuel par section quitte à avoir un sous menu dans les futurs pages du site.

- Un système de news qui défilent pour donner les dernières informations et qu'elles soient facilement visibles

- Un rappel des numéros d'urgence nationaux et locaux

- Un background dynamique

- Une galerie d'images qui défilent avec lien sur la rubrique concernée (option)

La version la plus stable que j'ai réussi à obtenir est celle-ci Menu/Slide/Image semblent fonctionner, excepté les news...

danielhagnoul · 20/01/2011, 21h31

Bonsoir

Comme je l'ai déjà dit jQuery UI ne peut pas fonctionner sans ses styles CSS, hors dans http://pompier-lemans.com/v3.111 je ne vois pas le lien link adéquat du genre "jquery-ui-1.8.5.custom.css" pour correspondre à votre ./js/jquery-ui-1.8.5.custom.min.js" et mon conseil pour la réorganisation du head n'a pas été appliqué.

WuKoDLaK · 20/01/2011, 21h38

J'ai présenté la V3.111 car elle montrait ce qui " marchotait " si je puis me permettre, la V3.112 ici en lien reprend tes conseils qui ont été testés

Je grouille sous les versions pour éviter de tout modifier d'une traite et planter ce qui est déjà peut être opérationnel...

Je pense à une question que j'ai eu en testant mon code d'ailleurs... j'ai utilisé le php pour mon site. Le <? include(...); ?> peut il causer des soucis si la partie html / php du script n'est pas dans la même page que le head ?
A mon sens : non, vu qu'il y a là un appel serveur et qu'ensuite il crée la page html côté client... mais on ne sait jamais.

danielhagnoul · 21/01/2011, 00h26

Bonsoir

J'ai essayé de tester la page après l'avoir remise en ordre. Il y avait des erreurs de }); dans le script que je n'avais pas vu la première fois et j'ai ajouté un </div>  manquant - à vérifier.

Auriez-vous l'obligeance de tester cette version et de me donner le résultat ? Le mieux serait de le tester sur Firefox avec l'extension Firebug et de regarder les erreurs signalées dans la console. Chrome a également une console.

Le serveur transforme tout le code PHP en HTML avant qu'il ne quitte le serveur.

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
<!doctype html> 
<html lang="fr"> 
<head> 
 	<title>Amicale des sapeurs pompiers du Mans</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!--windows-1252--> 
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <meta name="Author" content="Ronan BAUVAIS"> 
    <meta name="GENERATOR" content="NotePad (oldsk00l!),éditeur d'images"> 
    <meta name="Description" content="Amicale des sapeurs-pompiers du mans"> 
    <meta name="KeyWords" content="pompier,le mans,amicale,sapeur pompier,spp,spv,musée,sport,sarthe"> 
    <meta http-equiv="imagetoolbar" content="no">  		  
 
    <!-- CSS jQuery UI --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/css/custom-theme/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" /> 
 
	<!-- CSS affichage général --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/css/stylesheet.css" type="text/css" media="screen" /> 
 
    <!-- Correctif bug IE6 -->	
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/css/ie6fix.css" type="text/css" media="screen" /> 
 
    <!-- CSS pour Script Post it news --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/news/post-it.css" type="text/css" media="screen" /> 
 
    <!-- CSS affichage dynamique du background --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/css/background.css" type="text/css" media="screen" /> 
 
    <!-- CSS pour affichage du Menu --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/css/styleMenu.css" type="text/css" media="screen"/> 
 
    <!-- CSS affichage des fancybox --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />  
 
    <!-- CSS affichage du slide haut de page --> 
    <link rel="stylesheet" href="http://pompier-lemans.com/v3.112/css/slide.css" type="text/css" media="screen" /> 
 
    <!-- menu --> 
    <style> 
        span.reference{
            position:fixed;
            left:10px;
            bottom:10px;
            font-size:12px;
        }
        span.reference a{
            color:#aaa;
            text-transform:uppercase;
            text-decoration:none;
            text-shadow:1px 1px 1px #000;
            margin-right:30px;
        }
        span.reference a:hover{
            color:#ddd;
        }
        ul.sdt_menu{
            margin-left:auto;
            margin-right:auto;
            margin-top:110px;
        }
    </style> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://pompier-lemans.com/v3.112/js/jquery-ui-1.8.5.custom.min.js"></script> 
    <script type="text/javascript" src="http://pompier-lemans.com/v3.112/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
    <script type="text/javascript" src="http://pompier-lemans.com/v3.112/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript" src="http://pompier-lemans.com/v3.112/js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="http://pompier-lemans.com/v3.112/news/jquery.easynews.js"></script> 
    <script type="text/javascript" src="./js/slide.js" type="text/javascript"></script>    
    <script> 
        $(function() {
 
            // JS Gestion de la fancybox http://fancybox.net/
            $("a#num_utiles").fancybox({
                'overlayColor'		: '#000',
                'overlayOpacity'	: 0.9,
                'transitionIn'	: 'elastic',
                'transitionOut'	: 'elastic'
            });
 
            // JS Gestion du background dynamique
            (function(){ 
                 var i = 0; 
                     setInterval(function(){ 
 
                    //on cache l'image immédiatement 
                    $("#backgroundImage").removeClass("bg1, bg2").fadeOut(150, function(){ 
                        //on la ré-affiche avec un effet de transparence 
                        $("#backgroundImage").addClass("bg"+(i++%2 + 1)).fadeIn(500); 
                    });
                }, 10000);
            })();
 
            // JS Gestion du post it de news			
            var newsoption1 = {
                firstname: "mynews", //id de la div contenant les news
                secondname: "showhere", //id du conteneur où les news seront affichées
                fourthname:"news_button", //la div qui contient les images de nvigation (suivant, precedent, pause)
                newsspeed:'6000' //vitesse de defilement de news
            };
 
            $.init_news(newsoption1);
 
            var myoffset=$('#news_button').offset();
            var mytop=myoffset.top-1;
 
            $('#news_button').css({top:mytop});
 
 
            // JS Gestion du MENU
            /**
            * for each menu element, on mouseenter, 
            * we enlarge the image, and show both sdt_active span and 
            * sdt_wrap span. If the element has a sub menu (sdt_box),
            * then we slide it - if the element is the last one in the menu
            * we slide it to the left, otherwise to the right
            */
            $('#sdt_menu > li')
                .bind('mouseenter',function(){
                    var $elem = $(this);
 
                    $elem.find('img')
                        .stop(true)
                        .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                        },400,'easeOutBack')
                        .andSelf()
                        .find('.sdt_wrap')
                        .stop(true)
                        .animate({'top':'140px'},500,'easeOutBack')
                        .andSelf()
                        .find('.sdt_active')
                        .stop(true)
                        .animate({'height':'170px'},300,function(){
                            var $sub_menu = $elem.find('.sdt_box');
                            if($sub_menu.length){
                                var left = '170px';
                                    if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                                    $sub_menu.show().animate({'left':left},200);
                            }	
                        });
                })
                .bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
 
                    if($sub_menu.length){
                        $sub_menu.hide().css('left','0px');
                    }
 
                    $elem.find('.sdt_active')
                        .stop(true)
                        .animate({'height':'0px'},300)
                        .andSelf().find('img')
                        .stop(true)
                        .animate({
                        'width':'0Px',
                        'height':'0px',
                        'left':'85px'},400)
                        .andSelf()
                        .find('.sdt_wrap')
                        .stop(true)
                        .animate({'top':'25px'},500);
                });
 
            // Accordion
            $("#accordion").accordion({ header: "h3" });
 
            // Tabs
            $('#tabs').tabs();
 
            // Dialog			
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function() { 
                        $(this).dialog("close"); 
                    }, 
                    "Cancel": function() { 
                        $(this).dialog("close"); 
                    } 
                }
            });
 
            // Dialog Link
            $('#dialog_link').click(function(){
                $('#dialog').dialog('open');
                return false;
            });
 
            // Datepicker
            $('#datepicker').datepicker({
                inline: true
            });
 
            // Slider
            $('#slider').slider({
                range: true,
                values: [17, 67]
            });
 
            // Progressbar
            $("#progressbar").progressbar({
                value: 20 
            });
 
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() {
                    $(this).addClass('ui-state-hover');
                }, 
                function() {
                    $(this).removeClass('ui-state-hover');
                }
            );
        });
    </script>	
</head> 
<body> 
    <!--[if lte IE 6]>
    <div class="alert-ie6">
        <p><strong>Attention ! </strong> Votre navigateur (Internet Explorer 6) pr&eacute;sente de s&eacute;rieuses lacunes en terme de s&eacute;curit&eacute; et de performances, dues &agrave; son obsolescence (il date de 2001). En cons&eacute;quence, ce site sera consultable mais de mani&egrave;re moins optimale qu'avec un navigateur r&eacute;cent (<a href="http://www.browserforthebetter.com/download.html">Internet Explorer 8</a>, <a href="http://www.mozilla-europe.org/fr/firefox/">Firefox 3</a>, <a href="http://www.google.com/chrome?hl=fr">Chrome</a>, <a href="http://www.apple.com/fr/safari/download/">Safari</a>,...)</p>
    </div>
    <![endif]--> 
    <div id="global"> 
        <div class="bg2" id="backgroundImage"></div><!-- fadein des background -->	 		
        <div id="entete">	
            <!-- Panel --> 
            <div id="toppanel"> 
                <div id="panel"> 
                    <div class="content clearfix"> 
                        <div class="left"> 
                            <h1>Bienvenue V3.112</h1> 
                            <h2>Site de l'amicale des pompiers du Mans</h2>		
                            <p class="grey">Cette zone vous permet de vous connecter pour obtenir vos accès amicalistes sur le site.</p> 
                            <label>Téléphone :</label><div class="infoContact">06.60.27.23.63</div> 
                            <label>Adresse :</label><div class="infoContact">CSP Le MANS - Degré<br />3, Avenue Henri Pierre KLOTZ<br />72000 LE MANS</div> 
                            <label>Email :</label><div class="infoContact">contact@amicalepompierslemans.com</div> 
                        </div> 
                        <div class="left"> 
                            <!-- Login Form --> 
                            <form class="clearfix" action="#" method="post"> 
                                <h1>Identifiez vous</h1> 
                                <label class="grey" for="log">Identifiant:</label> 
                                <input class="field" type="text" name="log" id="log" value="" size="23" /> 
                                <label class="grey" for="pwd">Mot de passe:</label> 
                                <input class="field" type="password" name="pwd" id="pwd" size="23" /> 
                                <!-- <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label> --> <!--Se rappeler de l'utilisateur --> 
                                <div class="clear"></div> 
                                <input type="submit" name="submit" value="Connexion" class="bt_login" /> 
                                <!-- <a> class="lost-pwd" href="#">Lost your password?</a> --> <!-- mot de passe perdu --> 
                            </form> 
                        </div> 
                        <div class="left right">			
                            <!-- Contact Form --> 
                            <div id="contactForm"> 
                                <div class="loader"></div> 
                                <div class="bar"></div> 
                                <form action="mail.php" class="contactForm" id="contactForm" name="cform" method="post"> 
                                    <h1>Contactez Nous</h1>				
                                    <label>Votre message nous sera transmis et nous vous répondrons dans les meilleurs délais.</label> 
                                    <label class="grey" for="name">Nom:<span class="name-missing">Veuillez indiquer votre nom</span></label> 
                                    <input class="field" type="text" name="name" id="name" value="" size="23" /> 
                                    <label class="grey" for="e-mail">Email:<span class="email-missing">E-mail valide requis</span></label> 
                                    <input class="field" type="text" name="email" id="e-mail" size="23" /> 
                                    <label class="grey" for="message">Message:<span class="message-missing">Votre message est vide...</span></label> 
                                    <textarea class="field" rows="" cols="" id="message" name="message"></textarea> 
                                    <input type="submit" name="submit" value="Envoyer" class="bt_register"/> 
                                </form> 
                                <script src="js/scripts_contact.js" type="text/javascript" charset="iso-8859-1"></script> 
                            </div> 
                        </div> 
                    </div> <!-- /login -->	
                    <!-- The tab on top -->	
                    <div class="tab"> 
                        <ul class="ul_bt_accueil"> 
                            <!-- <li> class="left_bt_accueil">&nbsp;</li> --> 
                            <!-- <li> id="li_bt_accueil"--> 
                            <li id="li_accueil"> 
                                <a id="home" class="home" href="#"></a> 
                            </li> 
                            <!-- <li> class="right_bt_accueil">&nbsp;</li> --> 
                        </ul>	
                        <ul class="login"> 
                            <li class="left">&nbsp;</li> 
                            <li>Bonjour invité !</li> 
                            <li class="sep">|</li> 
                            <li id="toggle"> 
                                <a id="open" class="open" href="#">S'identifier | Nous contacter</a> 
                                <a id="close" style="display: none;" class="close" href="#">Fermer le panneau</a>			
                            </li> 
                            <li class="right">&nbsp;</li> 
                        </ul> 
                    </div> <!-- / top --> 
                </div> <!-- panel -->
            </div> <!-- attention fin div toppanel -->
        </div> <!-- /* Fin entete */ --> 
        <div id="navigation">	
            <div class="content"> 
                <ul id="sdt_menu" class="sdt_menu"> 
                    <li> 
                        <a href="#"> 
                            <img src="./images/menu/amicale.jpg" alt=""/> 
                            <span class="sdt_active"></span> 
                            <span class="sdt_wrap"> 
                                <span class="sdt_link">Amicale</span> 
                                <span class="sdt_descr">Fonctionnement</span> 
                            </span> 
                        </a> 
                        <div class="sdt_box"> 
                            <a href="#">Organigramme</a> 
                            <a href="#">Règlement intérieur</a> 
                            <a href="#">Les statuts</a>				
                            <a href="#">La nuit du feu</a> 
                            <a href="#">Avantages partenaires</a> 
                            <a href="#">Vos coordonnées changent ?</a> 
                            <a href="#">Billetterie</a> 
                            <a href="#">Réservations amicalistes</a> 
                        </div> 
                    </li> 
                    <li> 
                        <a href="#"> 
                            <img src="./images/menu/casernes.jpg" alt=""/> 
                            <span class="sdt_active"></span> 
                            <span class="sdt_wrap"> 
                                <span class="sdt_link">Casernes</span> 
                                <span class="sdt_descr">Ville du Mans</span> 
                            </span> 
                        </a> 
                        <div class="sdt_box"> 
                            <a href="#">Degré</a> 
                            <a href="#">Pontlieue</a> 
                        </div> 
                    </li> 
                    <li> 
                        <a href="#"> 
                            <img src="./images/menu/sport.jpg" alt=""/> 
                            <span class="sdt_active"></span> 
                            <span class="sdt_wrap"> 
                                <span class="sdt_link">Sport</span> 
                                <span class="sdt_descr">Toutes les sections</span> 
                            </span> 
                        </a> 
                        <div class="sdt_box"> 
                            <a href="#">Calendrier</a> 
                            <a href="#">Résultats</a> 
                        </div> 
                    </li> 
                    <li> 
                        <a href="#"> 
                            <img src="./images/menu/musee.jpg" alt=""/> 
                            <span class="sdt_active"></span> 
                            <span class="sdt_wrap"> 
                                <span class="sdt_link">Musée</span> 
                                <span class="sdt_descr">du CSP LE MANS Degré</span> 
                            </span> 
                        </a> 
                        <div class="sdt_box"> 
                            <a href="#">Présentation</a> 
                            <a href="#">Galerie photo</a> 
                        </div> 
                    </li> 
                    <li> 
                        <a href="#"> 
                            <img src="./images/menu/dessin_enfant.jpg" alt=""/> 
                            <span class="sdt_active"></span> 
                            <span class="sdt_wrap"> 
                                <span class="sdt_link">Dessins</span> 
                                <span class="sdt_descr">concours d'enfants</span> 
                            </span> 
                        </a> 
                    </li>				
                </ul> 
            </div>	 			 	
        </div> <!-- /* Fin navigation */ -->
        <div id="contenu">		 							
            <a id="num_utiles" href="./images/num_utiles.jpg"><img alt="num_utiles" src="./images/num_utiles_s.jpg" /></a>
            <div id=mynews  style="display:none" > <!---div contenant les news  ------> 
                <div id=news1 class=news_style > <!---1er news ------> 
                    <h1>Nouveau graphisme</h1> 
                    <h2><p>D'ici peu cette nouvelle version du site sera disponible...<br/> 
                        Patience,<br/>J'espère qu'elle vous plaira !</p></h2>		
                    <a href="#">Lire la suite...</a> 
                </div> 
                <div id=news2 class=news_style > <!---2eme news ------> 
                    <h1>Réunion Amicale</h1> 
                    <h2><p>Réunion le 25/01/2010 éé</p></h2>		
                    <a href="#">Lire la suite...</a> 
                </div><!---Vous pouvez ajouter autant de news que vous voulez en ajoutant dautres div avec la classe news_style----->
            </div>
            <div id="post-it" class="post-it"> 
                <div align=left id=mynewsdis><!---div pour afficher les news  ------> 
                    <div class=news_border><!----cadre des news----> 
                        <div id=showhere class=news_show ><!----le texte des news----> 
                        </div> 
                    </div> 
                    <div class=buttondiv id=news_button><!---bouton de navigation ------> 
                        <img src="./news/prev.gif" align="absmiddle" id=news_prev><img src="./news/pause.gif" align="absmiddle" id=news_pause><img src="./news/next.gif" align="absmiddle" id=news_next > 
                    </div>
                </div> 
            </div>
        </div> <!-- /* Fin contenu */ -->
        <div id="pied" class="pied">	
            <p id="copyright"> 
                13286 visites à ce jour<br> 
                Mise en page © 2010 Ronan B.
            </p> 
        </div> <!-- /* Fin pied */ -->
    </div> <!-- /* Fin global */ --> 
	</body> 
</html>

WuKoDLaK · 24/01/2011, 14h36

Salut danielhagnoul,

je reviens vers toi car tu m'as bien aidé, nombreux ont regardés ce post sans y prêter attention et je te remercie !

après de nombreuses recherches et tests, j'ai trouvés 2 semblant de réponses.

Premièrement firebug indique un soucis du côté de cet appel :

Code :

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

$.init_news(newsoption1);

et lorsque je supprime l'appel du script jquery UI :

Code :

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

<script type="text/javascript" src="./js/jquery-ui-1.8.5.custom.min.js"></script>

le script du post-it semble fonctionner....

J'ai repris mon code et j'ai supprimé ce script et trouvé une solution alternative, qui elle fonctionne.

Je n'ai donc qu'une partie de la réponse toujours est il que ça fonctionne maintenant. je reprends donc le chemin des lignes de codes pour avancer le site

J'ai déjà utilisé ce que tu m'as conseillé pour l'organisation du code et de ce qui en découle.

Merci encore.

20/01/2011, 21h31	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Comme je l'ai déjà dit jQuery UI ne peut pas fonctionner sans ses styles CSS, hors dans http://pompier-lemans.com/v3.111 je ne vois pas le lien link adéquat du genre "jquery-ui-1.8.5.custom.css" pour correspondre à votre ./js/jquery-ui-1.8.5.custom.min.js" et mon conseil pour la réorganisation du head n'a pas été appliqué. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

20/01/2011, 18h41	#3
WuKoDLaK Membre du Club Inscription : mai 2004 Messages : 70 Détails du profil Informations forums : Inscription : mai 2004 Messages : 70 Points : 48 Points : 48	Bonjour, Merci pour ton intérêt à ma question danielhagnoul ! J'ai donc testé ce que tu m'as proposé, mais rien n'y a fait ... J'ai donc pris le temps de refaire module par module ce que je voulais en sorti et donc voici un lien contenant source et démos! Lien vers les DEMOS Le site dans sa version 1 en lien ici, était trop simpliste et une demande m'avait été faite de refondre celui-ci pour en faire quelques chose d'attrayant et plus d'actualité. Je me suis donc remis en quête de nouveautés et j'ai donc trouvé ces nouvelles utilisations de JS et autres ! J'ai réussi à me donner une idée de la page d'accueil que je souhaitais mettre en place. - Une barre supérieur qui se cache à volonté, avec gestion de contact de l'amicale par email, une gestion par login pour que certains utilisateur aient des droits précis. - Un menu assez visuel par section quitte à avoir un sous menu dans les futurs pages du site. - Un système de news qui défilent pour donner les dernières informations et qu'elles soient facilement visibles - Un rappel des numéros d'urgence nationaux et locaux - Un background dynamique - Une galerie d'images qui défilent avec lien sur la rubrique concernée (option) La version la plus stable que j'ai réussi à obtenir est celle-ci Menu/Slide/Image semblent fonctionner, excepté les news...
	00

20/01/2011, 21h38	#5
WuKoDLaK Membre du Club Inscription : mai 2004 Messages : 70 Détails du profil Informations forums : Inscription : mai 2004 Messages : 70 Points : 48 Points : 48	J'ai présenté la V3.111 car elle montrait ce qui " marchotait " si je puis me permettre, la V3.112 ici en lien reprend tes conseils qui ont été testés Je grouille sous les versions pour éviter de tout modifier d'une traite et planter ce qui est déjà peut être opérationnel... Je pense à une question que j'ai eu en testant mon code d'ailleurs... j'ai utilisé le php pour mon site. Le <? include(...); ?> peut il causer des soucis si la partie html / php du script n'est pas dans la même page que le head ? A mon sens : non, vu qu'il y a là un appel serveur et qu'ensuite il crée la page html côté client... mais on ne sait jamais.
	00

24/01/2011, 14h36	#7
WuKoDLaK Membre du Club Inscription : mai 2004 Messages : 70 Détails du profil Informations forums : Inscription : mai 2004 Messages : 70 Points : 48 Points : 48	Salut danielhagnoul, je reviens vers toi car tu m'as bien aidé, nombreux ont regardés ce post sans y prêter attention et je te remercie ! après de nombreuses recherches et tests, j'ai trouvés 2 semblant de réponses. Premièrement firebug indique un soucis du côté de cet appel : Code : Sélectionner tout - Visualiser dans une fenêtre à part $.init_news(newsoption1); et lorsque je supprime l'appel du script jquery UI : Code : Sélectionner tout - Visualiser dans une fenêtre à part <script type="text/javascript" src="./js/jquery-ui-1.8.5.custom.min.js"></script> le script du post-it semble fonctionner.... J'ai repris mon code et j'ai supprimé ce script et trouvé une solution alternative, qui elle fonctionne. Je n'ai donc qu'une partie de la réponse toujours est il que ça fonctionne maintenant. je reprends donc le chemin des lignes de codes pour avancer le site J'ai déjà utilisé ce que tu m'as conseillé pour l'organisation du code et de ce qui en découle. Merci encore.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email