Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-25-2011, 12:29 AM   PM User | #1
bigdog61
New to the CF scene

 
Join Date: Apr 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
bigdog61 is an unknown quantity at this point
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.
bigdog61 is offline   Reply With Quote
Old 04-25-2011, 05:19 AM   PM User | #2
DanInMa
Senior Coder

 
DanInMa's Avatar
 
Join Date: Nov 2010
Location: Salem,Ma
Posts: 1,307
Thanks: 12
Thanked 204 Times in 204 Posts
DanInMa is on a distinguished road
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..
DanInMa is offline   Reply With Quote
Old 04-25-2011, 05:26 AM   PM User | #3
DanInMa
Senior Coder

 
DanInMa's Avatar
 
Join Date: Nov 2010
Location: Salem,Ma
Posts: 1,307
Thanks: 12
Thanked 204 Times in 204 Posts
DanInMa is on a distinguished road
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>
DanInMa is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:41 AM.


Advertisement
Log in to turn off these ads.