conflit entre 2 jquery [Résolu]

lena5 · 12/03/2011, 17h17

Bonjour,

J'ai un conflit entre 2 plugins jquery. Dans ma page, j'ai 3 plugin, d'abord un plugin jquery sliders(qui fonctionnait correctement) jusqu'à ce que j'insère en dessous un plugin lava lamp menu qui fonctionne aussi. Le soucis est que les 2 combinés ne fonctionne pas.

Merci pour votre aide, voici le 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
<!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">
 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
		<title>RAMOS</title>
 
 
    <link href="css/ramos.css" rel="stylesheet" type="text/css" />
    <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href="css/stil.css" rel="stylesheet" type="text/css" />
	</head>
 
<body>
 
<div id="conteneur">
 
 
    <!--début du plugin sliders -->  
    <div id="wrapper">
 
  <a href="http://dev7studios.com" id="dev7link">dev7studios</a>
 
        <div id="slider-wrapper">
 
<div id="slider" class="nivoSlider">
               <img src="img/ramos2.jpg" width="618" height="246" alt="photo-ramos" /><a href="http://dev7studios.com"><img src="img/imgplugin3.jpg" width="618" height="246" alt="" title="This is an example of a caption" /></a>
                <img src="img/imgplugin2.jpg" width="618" height="246" alt="">
            	<img src="img/imgplugin4.jpg" width="618" height="246" alt="">
    </div>
            <div id="htmlcaption" class="nivo-html-caption">
 
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
 
        </div>
 
    </div>     
  <!--fin du plugin sliders --> 
<div class="clear"></div>
 
  <div id="menu">
 
  <ul id="nav"> 
 
		<li id="selected"><a href="index.html">Accueil</a></li> 
		<li><a href="news.html">News</a></li> 
		<li><a href="bibliographie.html">Bibliographie</a></li> 
		<li><a href="photos.html">Photos</a></li> 
		<li><a href="videos.html">Videos</a></li>
        <li><a href="contact.html">Contact</a></li> 
	</ul>
 
</div>
	<div class="clear"></div>
 
	<div id="navigation-block">
	  <ul id="sliding-navigation"> 
        <li class="sliding-element"><a href="#">Accueil</a></li> 
                <li class="sliding-element"><a href="news.html">News</a></li> 
                <li class="sliding-element"><a href="bibliographie.html">Bibliographie</a></li> 
                <li class="sliding-element"><a href="photos.html">Photos</a></li> 
                <li class="sliding-element"><a href="videos.html">Videos</a></li> 
                <li class="sliding-element"><a href="contact.html">Contact</a></li> 
      </ul> 
  </div> 
 
 
<div id="col-m">
    <h2>Ramos en concert</h2>
<p><img src="img/ramos2.jpg" alt="ramos" width="338" height="225" class="floatimgleft" />Now’s the <strong>perfect time </strong>to pop on your hat and gloves and head to ZSL London Zoo.</p>
 
<p>It’s a great time for visitors to see some of the world’s most <em>amazing animals</em> up close and having the snow.<br />
Alternatively let the Zoo help your escape winter by <strong><em>transporting you</em></strong> to the tropics, thanks to several heated indoor exhibits. </p>
<p>le site du  <a href="http://www.zsl.org">zoo de Londres</a></p></div>
 
 
	<div id="col-d"><h2>News</h2>
<p><img src="img/_.jpg" alt="" width="130" height="166" class="floatimgleft" />
Les gardiens comptent les animaux</p>
 
<p>Les lionceaux jouent dans la neige</p>
 
<p>Nouvelle arrivée : l'outre Harri Oter</p></div>
 
<div class="clear"></div>
 
	<div id="footer">
	  <ul>
	    <li>Mentions</li>
      </ul>
    </div>
 
 
 
 
<div class="clear"></div>
 
</div><!--fin de conteneur-->
 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/sliding_effect.js"></script>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="js/jquery1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
 
 <script type="text/javascript">
 
	$(document).ready(function () {
 
		//transitions
		//for more transition, goto <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
		var style = 'easeOutElastic';
 
		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
		var default_width = $('#lava li.selected').width();
 
		//Set the floating bar position and width
		$('#box').css({left: default_left});
		$('#box .head').css({width: default_width});
 
		//if mouseover the menu item
		$('#lava li').hover(function () {
 
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava').offset().left);
			width = $(this).width(); 
		$('#debug').html(left);
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
 
		//if user click on the menu
		}).click(function () {
 
			//reset the selected item
			$('#lava li').removeClass('selected');	
 
			//select the current item
			$(this).addClass('selected');
 
		});
 
		//If the mouse leave the menu, reset the floating bar to the selected item
		$('#lava').mouseleave(function () {
 
			//Retrieve the selected item position and width
			default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
			default_width = $('#lava li.selected').width();
 
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
 
		});
 
	});
 
 
	</script>
 
  <script type="text/javascript"> 
$('#nav').spasticNav();
</script>  
 
</body>
</html>

danielhagnoul · 13/03/2011, 22h14

Bonsoir

J'ai essayé de comprendre et de remettre un peu d'ordre dans votre code. Vous utilisiez plusieurs versions de jQuery et a priori jQuery UI sans sa feuille de style.

N'ayant pas tous les scripts à disposition, je vous suggère d'essayer le code ci-dessous.

Voir : Comment installer la bibliothèque jQuery ? et jQuery UI 1.8.10 est disponible

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<title>Titre de la page</title>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/humanity/jquery-ui.css">	
	<style>
        /* Style de la page */
	</style>
<body>
    <div id="conteneur">
        <div id="wrapper">  <!--début du plugin sliders -->  
            <a href="http://dev7studios.com" id="dev7link">dev7studios</a>
            <div id="slider-wrapper">
                <div id="slider" class="nivoSlider">
                    <img src="img/ramos2.jpg" width="618" height="246" alt="photo-ramos" />
                    <a href="http://dev7studios.com">
                        <img src="img/imgplugin3.jpg" width="618" height="246" alt="" title="This is an example of a caption" />
                    </a>
                    <img src="img/imgplugin2.jpg" width="618" height="246" alt=""/>
                    <img src="img/imgplugin4.jpg" width="618" height="246" alt=""/>
                </div>
                <div id="htmlcaption" class="nivo-html-caption">
                    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                </div>
            </div>
        </div> <!--fin du plugin sliders --> 
        <div class="clear">
 
        </div>
        <div id="menu">
            <ul id="nav"> 
                <li id="selected"><a href="index.html">Accueil</a></li> 
                <li><a href="news.html">News</a></li> 
                <li><a href="bibliographie.html">Bibliographie</a></li> 
                <li><a href="photos.html">Photos</a></li> 
                <li><a href="videos.html">Videos</a></li>
                <li><a href="contact.html">Contact</a></li> 
            </ul>
        </div>
        <div class="clear">
 
        </div>
        <div id="navigation-block">
            <ul id="sliding-navigation"> 
            <li class="sliding-element"><a href="#">Accueil</a></li> 
                <li class="sliding-element"><a href="news.html">News</a></li> 
                <li class="sliding-element"><a href="bibliographie.html">Bibliographie</a></li> 
                <li class="sliding-element"><a href="photos.html">Photos</a></li> 
                <li class="sliding-element"><a href="videos.html">Videos</a></li> 
                <li class="sliding-element"><a href="contact.html">Contact</a></li> 
            </ul>
        </div>
        <div id="col-m">
            <h2>Ramos en concert</h2>
            <p>
                <img src="img/ramos2.jpg" alt="ramos" width="338" height="225" class="floatimgleft" />
                Now’s the <strong>perfect time </strong>to pop on your hat and gloves and head to ZSL London Zoo.
            </p>
            <p>
                It’s a great time for visitors to see some of the world’s most <em>amazing animals</em> up close and having the snow.<br />
    Alternatively let the Zoo help your escape winter by <strong><em>transporting you</em></strong> to the tropics, thanks to several heated indoor exhibits.
            </p>
            <p>
                le site du  <a href="http://www.zsl.org">zoo de Londres</a>
            </p>
        </div>
        <div id="col-d">
            <h2>News</h2>
            <p>
                <img src="img/_.jpg" alt="" width="130" height="166" class="floatimgleft" />
                Les gardiens comptent les animaux
            </p>
            <p>
                Les lionceaux jouent dans la neige
            </p>
            <p>
                Nouvelle arrivée : l'outre Harri Oter
            </p>
        </div>
        <div class="clear">
 
        </div>
        <div id="footer">
            <ul>
                <li>Mentions</li>
            </ul>
        </div>
        <div class="clear">
 
        </div>
    </div><!--fin de conteneur-->
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/sliding_effect.js"></script>
    <script src="js/jquery.nivo.slider.js"></script>
    <script src="js/jquery.spasticNav.js"></script>
    <script>
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
 
        $(document).ready(function(){
            //  transitions
            //  for more transition, goto <a href="http://gsgd.co.uk/sandbox/jquery/easing/"
            //  target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
            var style = 'easeOutElastic';
 
            // Retrieve the selected item position and width
            var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
            var default_width = $('#lava li.selected').width();
 
            // Set the floating bar position and width
            $('#box').css({left: default_left});
            $('#box .head').css({width: default_width});
 
            $('#lava li').hover(function () {
                // if mouseover the menu item
                // Get the position and width of the menu item
                left = Math.round($(this).offset().left - $('#lava').offset().left);
                width = $(this).width(); 
                $('#debug').html(left);
                //Set the floating bar position, width and transition
                $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});	
                $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
            }).click(function () {
                // if user click on the menu
                //reset the selected item
                $('#lava li').removeClass('selected');	
 
                //select the current item
                $(this).addClass('selected');
            });
 
            // If the mouse leave the menu, reset the floating bar to the selected item
            $('#lava').mouseleave(function () {
 
                //Retrieve the selected item position and width
                default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
                default_width = $('#lava li.selected').width();
 
                //Set the floating bar position, width and transition
                $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
                $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
            });
 
            $('#nav').spasticNav();
        });
    </script>
</body>
</html>

lena5 · 15/03/2011, 23h11

Bonjour,

J'ai corrigé mon code selon tes indication avec le nouveau jquery UI 1.8.10, avec la feuille de style correspondante, mais malheureusement sa ne fonctionne toujours pas. Pourtant le lava lamp menu fonctionne bien a part mais dans ma page, rien à faire. Merci pour ton aide. VOICI MON CODE:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!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">
 
	<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
 
		<title>RAMOS</title>
	 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/humanity/jquery-ui.css">	   
 
    <link href="css/ramos.css" rel="stylesheet" type="text/css" />
    <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href="css/lavalamp_test.css" rel="stylesheet" type="text/css" />
 
	</head>
 
<body>
 
<div id="conteneur">
 
 
    <!--début du plugin sliders -->  
    <div id="wrapper">
 
  <a href="http://dev7studios.com" id="dev7link">dev7studios</a>
 
        <div id="slider-wrapper">
 
<div id="slider" class="nivoSlider">
               <img src="img/ramos2.jpg" width="618" height="246" alt="photo-ramos" /><a href="http://dev7studios.com"><img src="img/imgplugin3.jpg" width="618" height="246" alt="" title="This is an example of a caption" /></a>
                <img src="img/imgplugin2.jpg" width="618" height="246" alt="">
            	<img src="img/imgplugin4.jpg" width="618" height="246" alt="">
    </div>
            <div id="htmlcaption" class="nivo-html-caption">
 
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
 
        </div>
 
    </div>     
  <!--fin du plugin sliders --> 
<div class="clear"></div>
<!--début du menu horizontale -->
 
  <ul id="nav"> 
		<li id="selected"><a href="index.html">Accueil</a></li> 
		 <li><a href="news.html">News</a></li>
            <li><a href="bibliographie.html">Bibliographie</a></li>
            <li><a href="photos.html">Photos</a></li>
            <li><a href="videos.html">Videos</a></li>
            <li><a href="contact.html">Contact</a></li>
  </ul>
 
 
<!--fin du menu horizontale -->
	<div class="clear"></div>
 
	<div id="navigation-block">
	  <ul id="sliding-navigation"> 
        <li class="sliding-element"><a href="#">Accueil</a></li> 
                <li class="sliding-element"><a href="news.html">News</a></li> 
                <li class="sliding-element"><a href="bibliographie.html">Bibliographie</a></li> 
                <li class="sliding-element"><a href="photos.html">Photos</a></li> 
                <li class="sliding-element"><a href="videos.html">Videos</a></li> 
                <li class="sliding-element"><a href="contact.html">Contact</a></li> 
      </ul> 
  </div> 
 
 
<div id="col-m">
    <h2>Ramos en concert</h2>
<p><img src="img/ramos2.jpg" alt="ramos" width="338" height="225" class="floatimgleft" />Now’s the <strong>perfect time </strong>to pop on your hat and gloves and head to ZSL London Zoo.</p>
 
<p>It’s a great time for visitors to see some of the world’s most <em>amazing animals</em> up close and having the snow.<br />
Alternatively let the Zoo help your escape winter by <strong><em>transporting you</em></strong> to the tropics, thanks to several heated indoor exhibits. </p>
<p>le site du  <a href="http://www.zsl.org">zoo de Londres</a></p></div>
 
 
	<div id="col-d"><h2>News</h2>
<p><img src="img/_.jpg" alt="" width="130" height="166" class="floatimgleft" />
Les gardiens comptent les animaux</p>
 
<p>Les lionceaux jouent dans la neige</p>
 
<p>Nouvelle arrivée : l'outre Harri Oter</p></div>
 
<div class="clear"></div>
 
	<div id="footer">
	  <ul>
	    <li>Mentions</li>
      </ul>
    </div>
 
 
 
 
<div class="clear"></div>
 
</div><!--fin de conteneur-->
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/sliding_effect.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
 
 
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
 
 
	$(document).ready(function () {
 
		//transitions
		//for more transition, goto <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
		//  target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
		var style = 'easeOutElastic';
 
		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
		var default_width = $('#lava li.selected').width();
 
		//Set the floating bar position and width
		$('#box').css({left: default_left});
		$('#box .head').css({width: default_width});
 
		//if mouseover the menu item
		$('#lava li').hover(function () {
 
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava').offset().left);
			width = $(this).width(); 
		$('#debug').html(left);
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
 
		//if user click on the menu
		}).click(function () {
 
			//reset the selected item
			$('#lava li').removeClass('selected');	
 
			//select the current item
			$(this).addClass('selected');
 
		});
 
		//If the mouse leave the menu, reset the floating bar to the selected item
		$('#lava').mouseleave(function () {
 
			//Retrieve the selected item position and width
			default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
			default_width = $('#lava li.selected').width();
 
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
 
		});
 
 
 
$('#nav').spasticNav();
});
	</script> 
 
</body>
</html>

danielhagnoul · 17/03/2011, 00h05

Bonsoir

Pour les scripts, je vous suggère de tester la version ci-dessous. Si cela ne fonctionne pas, pourriez-vous me donner un lien vers la page de test ?

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
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/sliding_effect.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">   
	$(document).ready(function () {
		//transitions
		//for more transition, goto <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
		//  target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
		var style = 'easeOutElastic';
 
		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
		var default_width = $('#lava li.selected').width();
 
		//Set the floating bar position and width
		$('#box').css({left: default_left});
		$('#box .head').css({width: default_width});
 
		//if mouseover the menu item
		$('#lava li').hover(function () {
 
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava').offset().left);
			width = $(this).width(); 
		$('#debug').html(left);
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
 
		//if user click on the menu
		}).click(function () {
 
			//reset the selected item
			$('#lava li').removeClass('selected');	
 
			//select the current item
			$(this).addClass('selected');
 
		});
 
		//If the mouse leave the menu, reset the floating bar to the selected item
		$('#lava').mouseleave(function () {
 
			//Retrieve the selected item position and width
			default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
			default_width = $('#lava li.selected').width();
 
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
 
		});
 
        $('#nav').spasticNav();
        $('#slider').nivoSlider();
    });
</script>

lena5 · 17/03/2011, 15h39

Bonjour Daniel,

Malheureusement, même avec ce script, la page d'accueil du site ne fonctionne toujours pas. Je voyais les sliders, mais ni slides, ni menu.

Voici le lien : http://lbjoomla.free.fr

Merci

danielhagnoul · 17/03/2011, 20h16

Bonsoir

La page ne s'affiche pas correctement dans Chrome 10. Il signale qu'il manque 4 éléments :

http://lbjoomla.free.fr/css/img/contour.png 404 (Not Found)
http://lbjoomla.free.fr/css/images/kubrickfooter.jpg 404 (Not Found)
http://lbjoomla.free.fr/css/tab_bg.jpg 404 (Not Found)
http://lbjoomla.free.fr/css/navigation.jpg 404 (Not Found)

lena5 · 17/03/2011, 21h51

Bonsoir,

Je ne comprend pas très bien car la page s'affiche bien, je n'ai pas d'erreur sauf que les images du jquery slider ne s'affiche pas. Je n'ai pas d'erreur 404;

danielhagnoul · 18/03/2011, 21h06

Bonsoir

J'ai toujours la même erreur dans Chrome 10 et Firefox 4 signale que $('#lava li.selected').offset() est null dans :

Code :

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

var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);

Et dans le code je ne trouve pas l'élément DOM ayant pour ID "lava"

lena5 · 19/03/2011, 11h04

Bonjour,

Je ne sais pas trop ou trouver cette élément manquant. Me conseillez-vous de changer de menu ?

Merci

danielhagnoul · 19/03/2011, 11h19

Bonjour

Pourquoi pas, mais avant de jeter le bébé avec l'eau du bain, il serait sans doute utile de revoir les documentations, les sources et les démonstrations des plugins que vous utilisez. Cet élément d'ID #lava vient bien de quelque part.

lena5 · 20/03/2011, 15h34

Bonjour Danielhagnoul,

Merci beaucoup pour votre aide. J'ai résolu mon problème grâce à vous. Effectivement l'élément

Code :

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

var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);

n'existait pas et ne correspondais à rien du tout. Je ne sais pas comment j'ai pu l'insérer, probablement en essayant plusieurs jquery, j'ai du faire un oubli. Du coup comme je ne m'y connais pas en javascript, je pensais qu'il servait à quelque chose.

En tout cas, ma page fonctionne et sa m'a appris à mieux utiliser les JS.

Merci à vous.

A très bientôt,

Léna5

17/03/2011, 15h39	#5
lena5 Invité de passage Inscription : janvier 2011 Messages : 13 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 13 Points : 2 Points : 2	RE CONFLIT JQUERY Bonjour Daniel, Malheureusement, même avec ce script, la page d'accueil du site ne fonctionne toujours pas. Je voyais les sliders, mais ni slides, ni menu. Voici le lien : http://lbjoomla.free.fr Merci
	00

17/03/2011, 20h16	#6
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 La page ne s'affiche pas correctement dans Chrome 10. Il signale qu'il manque 4 éléments : http://lbjoomla.free.fr/css/img/contour.png 404 (Not Found) http://lbjoomla.free.fr/css/images/kubrickfooter.jpg 404 (Not Found) http://lbjoomla.free.fr/css/tab_bg.jpg 404 (Not Found) http://lbjoomla.free.fr/css/navigation.jpg 404 (Not Found) __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

18/03/2011, 21h06	#8
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 J'ai toujours la même erreur dans Chrome 10 et Firefox 4 signale que $('#lava li.selected').offset() est null dans : Code : Sélectionner tout - Visualiser dans une fenêtre à part var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left); Et dans le code je ne trouve pas l'élément DOM ayant pour ID "lava" __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

19/03/2011, 11h19	#10
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	Bonjour Pourquoi pas, mais avant de jeter le bébé avec l'eau du bain, il serait sans doute utile de revoir les documentations, les sources et les démonstrations des plugins que vous utilisez. Cet élément d'ID #lava vient bien de quelque part. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

20/03/2011, 15h34	#11
lena5 Invité de passage Inscription : janvier 2011 Messages : 13 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 13 Points : 2 Points : 2	PROBLEME RESOLU Bonjour Danielhagnoul, Merci beaucoup pour votre aide. J'ai résolu mon problème grâce à vous. Effectivement l'élément Code : Sélectionner tout - Visualiser dans une fenêtre à part var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left); n'existait pas et ne correspondais à rien du tout. Je ne sais pas comment j'ai pu l'insérer, probablement en essayant plusieurs jquery, j'ai du faire un oubli. Du coup comme je ne m'y connais pas en javascript, je pensais qu'il servait à quelque chose. En tout cas, ma page fonctionne et sa m'a appris à mieux utiliser les JS. Merci à vous. A très bientôt, Léna5
	00

17/03/2011, 21h51	#7
lena5 Invité de passage Inscription : janvier 2011 Messages : 13 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 13 Points : 2 Points : 2	Bonsoir, Je ne comprend pas très bien car la page s'affiche bien, je n'ai pas d'erreur sauf que les images du jquery slider ne s'affiche pas. Je n'ai pas d'erreur 404;
	00

19/03/2011, 11h04	#9
lena5 Invité de passage Inscription : janvier 2011 Messages : 13 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 13 Points : 2 Points : 2	Bonjour, Je ne sais pas trop ou trouver cette élément manquant. Me conseillez-vous de changer de menu ? Merci
	00

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