4/5 scripts qui marchent

Version imprimable

Bonjour,

Je suis en train de faire un site qui doit comporter 5 script jQuery, j'ai réussi à faire fonctionner 4 scripts ensemble, mais le 5ème ne veux pas fonctionner normalement. Voila le script pour que vous compreniez.

Merci pour vos futur réponses :)

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
        <title>WORK | Valentin Schaer</title> 
 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
        <!-- CSS -->
        <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/> 
        <link rel="stylesheet" type="text/css" href="css/highslide.css" />
 
        <!-- SCRIPT -->
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
        <script src="js/jquery.ui.core.js"></script>
        <script src="js/jquery.ui.widget.js"></script>
        <script src="js/jquery.ui.accordion.js"></script>
        <script src="js/jquery.ui.mouse.js"></script>
        <script src="js/jquery.ui.draggable.js"></script>
        <script type="text/javascript" src="js/highslide.min.js"></script>
 
 
    </head>
    <body> 
 
 
    	<div id="baniere"><div id="forbadger"><div class="badger"><p id="draggable"><img src="img/badge.png" alt="badge"></p></div><!--<div id="infonav"><img src="img/infonav.png" alt="infonav"></div>--></div><a href="index.html"><div id="name">&nbsp;</div></a><div id="bgmenu">&nbsp;</div></div>
 
        <ul id="navigation"> 
            <li class="work">
            	<a href="contact.html">PROFIL/CONTACT</a>
            </li> 
        </ul> 
 
        <script type="text/javascript"> 
 
 
            $(function() {
 
            	//Menu (marche)
 
                $('#navigation a').stop().animate({'marginTop':'-60px'},1000);
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({'marginTop':'-2px'},200);
                },	
                function () {
                    $('a',$(this)).stop().animate({'marginTop':'-60px'},200);
                });
 
                //Accordion (marche)
				$("#accordion").accordion({collapsible: true}); //active: false (optional)
 
				//Sliding Box (marche)
            	$('.boxgrid.captionfull').hover(function(){
            		$(".cover", this).stop().animate({top:'80px'},{queue:false,duration:160});
            	}, function() {
            		$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
            	});
 
                //Draggable (marche)
				$("#draggable").draggable();
 
               });
 
 
               //Script hightslide (marche pas) <----------<----------<----------<----------
               hs.graphicsDir = '../highslide/graphics/';
               hs.wrapperClassName = 'wide-border';
 
        </script>
 
         <div id="all">
        <div class="demo">
 
        <div id="accordion">
        	<h3><a href="#">WEB DESIGN</a></h3>
        	<div>
        		<div class="boxgrid captionfull">
        			<a href="img/work/full-image.jpg" class="highslide" onclick="return hs.expand(this)"><img src="img/work/sub1.jpg"/></a><div class="highslide-caption">Légende</div>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<a href="img/work/full-image.jpg" class="highslide" onclick="return hs.expand(this)"><img src="img/work/sub1.jpg"/></a>
        			<div class="highslide-caption">Légende</div>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
        		    <div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
 
 
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
				<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
 
        		        	</div>
        	<h3><a href="#">ILLUSTRATION</a></h3>
        	<div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
 
 
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>    		
        	</div>
 
        </div>
 
        </div><!-- End demo -->
 
        </div>
 
        <div id="footer">Design and development by Valentin Schaer</div>
    </body> 
</html>

24/03/2011, 22h52
danielhagnoul

Bonsoir

Après un coup d'oeil rapide sur votre code, je vois que vous utilisez la dernière version de jQuery avec des éléments de jQuery UI d'une version inconnue.

Je vous conseille de faire un test avec jQuery UI au complet sans oublier ses styles CSS.

Voir : jQuery UI 1.8.11 est disponible

Citation:

Envoyé par danielhagnoul

Bonsoir

Après un coup d'oeil rapide sur votre code, je vois que vous utilisez la dernière version de jQuery avec des éléments de jQuery UI d'une version inconnue.

Je vous conseille de faire un test avec jQuery UI au complet sans oublier ses styles CSS.

Voir : jQuery UI 1.8.11 est disponible

Merci pour votre réponse rapide, j'ai mis la version au complet de jquery 1.8.11 mais c'est comme avant; tout fonctionne parfaitement sauf le hightslide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <head> 
        <title>WORK</title> 
 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
        <!-- CSS -->
        <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/> 
        <link rel="stylesheet" type="text/css" href="css/highslide.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
 
        <!-- SCRIPT -->
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
        <!--<script src="js/jquery.ui.core.js"></script>
        <script src="js/jquery.ui.widget.js"></script>
        <script src="js/jquery.ui.accordion.js"></script>
        <script src="js/jquery.ui.mouse.js"></script>
        <script src="js/jquery.ui.draggable.js"></script>-->
        <script type="text/javascript" src="js/highslide.min.js"></script>
     <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
 
    </head>

Code:

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
<body> 
 
 
    	<div id="baniere"><div id="forbadger"><div class="badger"><p id="draggable"><img src="img/badge.png" alt="badge"></p></div><!--<div id="infonav"><img src="img/infonav.png" alt="infonav"></div>--></div><a href="index.html"><div id="name">&nbsp;</div></a><div id="bgmenu">&nbsp;</div></div>
 
        <ul id="navigation"> 
            <li class="work">
            	<a href="contact.html">PROFIL/CONTACT</a>
            </li> 
        </ul> 
 
        <script type="text/javascript"> 
 
 
            $(function() {
 
            	//Menu (marche)
 
                $('#navigation a').stop().animate({'marginTop':'-60px'},1000);
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({'marginTop':'-2px'},200);
                },	
                function () {
                    $('a',$(this)).stop().animate({'marginTop':'-60px'},200);
                });
 
                //Accordion (marche)
				$("#accordion").accordion({collapsible: true}); //active: false (optional)
 
				//Sliding Box (marche)
            	$('.boxgrid.captionfull').hover(function(){
            		$(".cover", this).stop().animate({top:'80px'},{queue:false,duration:160});
            	}, function() {
            		$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
            	});
 
                //Draggable (marche)
				$("#draggable").draggable();
 
               });
 
 
               //Script hightslide (marche pas) <----------<----------<----------<----------
               hs.graphicsDir = '../highslide/graphics/';
               hs.wrapperClassName = 'wide-border';
 
        </script>
 
         <div id="all">
        <div class="demo">
 
        <div id="accordion">
        	<h3><a href="#">WEB DESIGN</a></h3>
        	<div>
        		<div class="boxgrid captionfull">
        			<a href="img/work/full-image.jpg" class="highslide" onclick="return hs.expand(this)"><img src="img/work/sub1.jpg"/></a><div class="highslide-caption">Légende</div>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<a href="img/work/full-image.jpg" class="highslide" onclick="return hs.expand(this)"><img src="img/work/sub1.jpg"/></a>
        			<div class="highslide-caption">Légende</div>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
        		    <div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
 
 
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
				<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
 
        		        	</div>
        	<h3><a href="#">ILLUSTRATION</a></h3>
        	<div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
 
 
 
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>
        		<div class="boxgrid captionfull">
        			<img src="img/work/sub1.jpg"/>
        			<div class="cover boxcaption">
        				<p>Artist</p>
        			</div>		
        		</div>    		
        	</div>
 
        </div>
 
        </div><!-- End demo -->
 
        </div>
 
        <div id="footer">Design and development by Valentin Schaer</div>
    </body>

J'ai l'impression que le problème est ici...

Code:

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
  <script type="text/javascript"> 
 
 
            $(function() {
 
            	//Menu (marche)
 
                $('#navigation a').stop().animate({'marginTop':'-60px'},1000);
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({'marginTop':'-2px'},200);
                },	
                function () {
                    $('a',$(this)).stop().animate({'marginTop':'-60px'},200);
                });
 
                //Accordion (marche)
				$("#accordion").accordion({collapsible: true}); //active: false (optional)
 
				//Sliding Box (marche)
            	$('.boxgrid.captionfull').hover(function(){
            		$(".cover", this).stop().animate({top:'80px'},{queue:false,duration:160});
            	}, function() {
            		$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
            	});
 
                //Draggable (marche)
				$("#draggable").draggable();
 
               });
 
 
               //Script hightslide (marche pas) <----------<----------<----------<----------
               hs.graphicsDir = '../highslide/graphics/';
               hs.wrapperClassName = 'wide-border';
 
        </script>

Bonsoir

L'ordre d'insertion est important, jQuery et jQuery UI puis les plugins et widgets.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head> 
    <title>WORK</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="css/highslide.css" />
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/> 
 
    <!-- SCRIPT -->
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
    <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/highslide.min.js"></script>
 
</head>