Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Conflict between slider and navigation menu

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • Users who have thanked SB65 for this post:

    11bernardo11 (07-03-2012)

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by 11bernardo11; 07-03-2012 at 11:20 PM.

  • #4
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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!
    Last edited by 11bernardo11; 07-03-2012 at 11:22 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •