Conflict between slider and navigation menu

11bernardo11 · 07-02-2012, 10:30 PM

I was running out to build my site and noticed that when the slider was present on the page, the menu would lose its animation.

if anyone knows how to solve this problem please reply.

Here is the website with the slider and the menu (the menu lose his animation):
http://neoprize.x10.mx/teste/index.html
And here is the website without the slider (the menu is fully functional):
http://neoprize.x10.mx/teste/index2.html

SB65 · 07-03-2012, 08:28 AM

The console on the problem page is throwing an error "lavalamp is not a function". This suggests it's either not loaded or some conflict on the page. Looking at it, you are loading jQuery twice.Here (line 77 in your rendered code):

Code:

<script type="text/javascript" src="includes/ApycomjQueryMenus/jquery.js"></script>
    <script type="text/javascript" src="includes/ApycomjQueryMenus/menu.js"></script>

and here (line 108)

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="includes/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Quite possible that this is the problem. I'd suggest moving all these scripts to your <head>, (plus the css links) removing one of the jQuerys and giving it another try. Two versions of jQuery is quite likely to cause issues.

11bernardo11 · 07-03-2012, 05:19 PM

FORGET THIS, PROBLEM IS RESOLVED

Hi SB65, thank you for your reply

I tried to remove one line in each fragment of code that you sent but both elements (slide and menu) needs the code as it is.

I just don't understand if you suggested to delete a line of code on each fragment or if you was saying to delete one of the elements.

If you was suggesting the last one, I need the 2 elements in the page, so what should I do to make the two compatibles?

FORGET THIS, PROBLEM IS RESOLVED

11bernardo11 · 07-03-2012, 10:01 PM

I did what you suggested, move all css and script to <head>

After some hours trying to solve the problem I insert this:

Code:

<script type='text/javascript'>
 var $jq = jQuery.noConflict();   
</script>

Here:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script>
<link href="includes/CSSLayouts/homepagelayout.css" rel="stylesheet" type="text/css" />
<link href="includes/CSSLayouts/homepagelayout_user.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="includes/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="includes/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
 var $jq = jQuery.noConflict();   
</script>
<script src="includes/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<link type="text/css" href="includes/ApycomjQueryMenus/menu.css" rel="stylesheet" />
<script type="text/javascript" src="includes/ApycomjQueryMenus/jquery.js"></script>
<script type="text/javascript" src="includes/ApycomjQueryMenus/menu.js"></script>
</head>

And change this:

Code:

<!-- slide Content Starts Here -->
<center>
<p><span style="color:#f6e73c">.</span></p>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <a href="#"><img src="includes/nivo-slider/demo/images/toystory.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
                <a href="#"><img src="includes/nivo-slider/demo/images/up.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
                <a href="#"><img src="includes/nivo-slider/demo/images/walle.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
                <a href="#"><img src="includes/nivo-slider/demo/images/nemo.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
            </div>
        </div>

    <script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider();
	});
	</script>
</center>
<!-- slide Content Ends Here -->

to:

Code:

<!-- slide Content Starts Here -->
<center>
<p><span style="color:#f6e73c">.</span></p>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <a href="#"><img src="includes/nivo-slider/demo/images/toystory.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
                <a href="#"><img src="includes/nivo-slider/demo/images/up.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
                <a href="#"><img src="includes/nivo-slider/demo/images/walle.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
                <a href="#"><img src="includes/nivo-slider/demo/images/nemo.jpg" data-transition="fade" title="TEXTO AQUI" /></a>
            </div>
        </div>

    <script type="text/javascript">
	$jq(window).load(function() {
		$jq('#slider').nivoSlider();
	});
	</script>
</center>
<!-- slide Content Ends Here -->

See the result:
http://neoprize.x10.mx/teste/index4.html

NOW ALL WORKS FINE!