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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JQuery scrollTo doesn't work

    Hi everybody,

    I can't get the JQuery scrollTo function to work (it's a single-page design). Here's the link to the page: http://www.mapguy.net/test/salem/

    I think the problem might be because I'm calling JQuery with other scripts too - there is a NIVO slider and a lightbox which call JQuery 1.4. When I click on the links, it just jumps to the page sections without the scroll effect.

    Here is the script part of the code (in the page head):

    Code:
    <script type="text/javascript"src="jquery.js"></script>
    <script type="text/javascript" src="jquery.scrollTo.js"></script>
    <script type="text/javascript" src="jquery.nav.min.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
      	$('#nav').onePageNav();
    		});
    	});
    
    </script>
    	<script type="text/javascript" src="scripts/jquery-1.4.js"></script> 
        <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
            animSpeed:500, //Slide transition speed
            pauseTime:6000,
            controlNav:false, //1,2,3...
            directionNav:false, //Next & Prev
            directionNavHide:true, //Only show on hover
    		    });
        });
        </script>
    
     
    <script type="text/javascript" src="scripts/jquery-easing.js"></script>  
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>  
    <script type="text/javascript" src="scripts/portfolio-setter.js"></script>  
    
     
    
    <script type="text/javascript">  
    	$(function(){  
    		$('#portfolio').portfolioSetter({
    				itemsPerPage: 10,
    				pageWidth: 750,
    				pageHeight: 500,
    				showCategories: false
    		});  
    	}); 
    
    </script>

    Here's the navigation HTML:

    Code:
    	<ul id="nav">
    		<li class="current"><a href="#home">home</a></li>
    		<li><a href="#services">services</a></li>
    		<li><a href="#portfolio">portfolio</a></li>
    		<li><a href="#process">process</a></li>
    		<li><a href="#contact">contact</a></li>
    	</ul>

    Here's the HTML for the slider at the top:

    Code:
    	<div id="slider">
    	<img src="images/steinbeck-nivo.jpg" alt="" height="450" width="350" />
    	<img src="images/road-nivo.jpg" alt="" height="450" width="350" />
    	<img src="images/compendium-nivo.jpg" alt="" height="450" width="350" />
    </div><!--/slider -->
    Any help would be greatly appreciated.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    first things first. you are loading the Jquery framework twice, a common mistake. remove one of the references to the jquery framework and see if that fixes the issue before continuing on.

    - also youd loading some of your coed using the JQ document.ready function and then loading more script using window.onload, which is alsmot the same thing.
    Last edited by DanInMa; 04-25-2011 at 05:22 AM.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    here I cleaned up your javascript section :

    Code:
    <script type="text/javascript" src="scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="scripts/jquery-easing.js"></script>  
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>  
    <script type="text/javascript" src="scripts/portfolio-setter.js"></script> 
    <script type="text/javascript" src="jquery.scrollTo.js"></script>
    <script type="text/javascript" src="jquery.nav.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
    
    
    <script type="text/javascript">
    	$(document).ready(function() {
      	$('#nav').onePageNav();
    		
    
    	  $('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
            animSpeed:500, //Slide transition speed
            pauseTime:6000,
            controlNav:false, //1,2,3...
            directionNav:false, //Next & Prev
            directionNavHide:true, //Only show on hover
    		    });
    
    	$('#portfolio').portfolioSetter({
    				itemsPerPage: 10,
    				pageWidth: 750,
    				pageHeight: 500,
    				showCategories: false
    		}); 	
    	});
    </script>


  •  

    Posting Permissions

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