conflit entre 2 jquery

Version imprimable

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:

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>

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:

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>

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:

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>

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:

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>

17/03/2011, 15h39
lena5

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
17/03/2011, 20h16
danielhagnoul
Bonsoir

La page ne s'affiche pas correctement dans Chrome 10. Il signale qu'il manque 4 éléments :
1. http://lbjoomla.free.fr/css/img/contour.png 404 (Not Found)
2. http://lbjoomla.free.fr/css/images/kubrickfooter.jpg 404 (Not Found)
3. http://lbjoomla.free.fr/css/tab_bg.jpg 404 (Not Found)
4. http://lbjoomla.free.fr/css/navigation.jpg 404 (Not Found)
17/03/2011, 21h51
lena5

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;
18/03/2011, 21h06
danielhagnoul

Bonsoir

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

Code:

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"
19/03/2011, 11h04
lena5

Bonjour,

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

Merci
19/03/2011, 11h19
danielhagnoul

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.
20/03/2011, 15h34
lena5

PROBLEME RESOLU

Bonjour Danielhagnoul,

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

Code:

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 :D