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

    Navigation breaking with ScrollTo and Localscroll

    I have recently hit a wall with this and would greatly appreciate and guidance on this issue. My attempt is to have a scrolling effect for a background image and text for each menu item. I am using LocalScroll.js for the background images and ScrollTo.js for the text. The problem is that the navigation is breaking after any menu item is selected. TIA for your time and any help.


    HTML
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<title>Jason Harris</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" />
    	<!--[if IE]>
    		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    	<![endif]-->
    	  <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
    
    </head>
    
    <body>
    <div id="floater"></div>
    <div id="centered">
    <div id="navigation" class="menu">
    
    	<ul class="links">
    		<li class="home"><a href="#section_home" id="content_home" title="homebase">homebase</a></li>
    		<li class="web"><a href="#section_web01" id="content_web01" title="webbase01">webbase01</a></li>
    		<li class="web"><a href="#section_web02" id="content_web02" title="webbase02">webbase02</a></li>
    		<li class="web"><a href="#section_web03" id="content_web03" title="webbase03">webbase03</a></li>
    		<li class="photo"><a href="#section_photo01" id="content_photo01" title="photobase01">photobase01</a></li>
    		<li class="photo"><a href="#section_photo02" id="content_photo02" title="photobase02">photobase02</a></li>		
    	</ul>
    </div>
    
    <div id="content">
    <div id="overlay">	
    
    <div id="content_home" class="pane">
    <p>this is the home text</p>
    </div>
    
    <div id="content_web01" class="pane">
    <p>this is the web01 text</p>
    </div>
    
    <div id="content_web02" class="pane">
    <p>this is the web02 text</p>
    </div>
    
    <div id="content_web03" class="pane">
    <p>this is the web03 text</p>
    </div>
    
    <div id="content_photo01" class="pane">
    <p>this is the photo01 text</p>
    </div>
    
    <div id="content_photo02" class="pane">
    <p>this is the photo02 text</p>
    </div>
    	</div>
    	
    	<div id="photo-bg">
    	<div id="section_home" class="section">&nbsp;</div>
    	<div id="section_web01" class="section">&nbsp;</div>
    	<div id="section_web02" class="section">&nbsp;</div>
    	<div id="section_web03" class="section">&nbsp;</div>
    	<div id="section_photo01" class="section">&nbsp;</div>
    	<div id="section_photo02" class="section">&nbsp;</div>
    	</div>
    </div>
    </div>
      <script src="js/jquery.scrollTo-min.js"></script>
      <script src="js/jquery.localscroll-min.js"></script>
      <script src="js/init.js"></script>
    </body>
    </html>
    Init.js
    Code:
    jQuery(function( $ ){
    
    	
    	/**
    	 * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
    	 * @see http://flesler.demos.com/jquery/scrollTo/
    	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
    	 */
    	
    	// The default axis is 'y', but in this demo, I want to scroll both
    	// You can modify any default like this
    	$.localScroll.defaults.axis = 'xy';
    	
    	// Scroll initially if there's a hash (#something) in the url 
    	$.localScroll.hash({
    		target: '#content', // Could be a selector or a jQuery object too.
    		queue:true,
    		duration:1500
    	});
    	
    	/**
    	 * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
    	 * also affect the >> and << links. I want every link in the page to scroll.
    	 */
    	$.localScroll({
    		target: '#content', // could be a selector or a jQuery object too.
    		queue:true,
    		duration:1000,
    		hash:true,
    		onBefore:function( e, anchor, $target ){
    			// The 'this' is the settings object, can be modified
    		},
    		onAfter:function( anchor, settings ){
    			// The 'this' contains the scrolled element (#content)
    		}
    	});
    
    	$.scrollTo.defaults.axis = 'xy'; 			
    	// This one is important, many browsers don't reset scroll on refreshes
    	// Reset all scrollable panes to (0,0)
    	$('div.pane').scrollTo( 0 );
    	// Reset the screen to (0,0)
    	$.scrollTo( 0 );
    	
    
    	
    	// Target examples bindings
    	// THIS DEMO IS NOT INTENDED TO SHOW HOW TO CODE IT
    	// JUST THE MULTIPLE OPTIONS. THIS CODE IS UGLY.
    	var $paneTarget = $('#overlay');
    	
    	$('#content_home').click(function(){
    		$paneTarget.stop().scrollTo( '0' , 1000 );
    	});
    	$('#content_web01').click(function(){
    		$paneTarget.stop().scrollTo( '800px' , 500 );
    	});
    	$('#content_web02').click(function(){
    		$paneTarget.stop().scrollTo( '1600px' , 800 );
    	});	
    	$('#content_web03').click(function(){
    		$paneTarget.stop().scrollTo( '2400px' , 800 );
    	});	
    	$('#content_photo01').click(function(){
    		$paneTarget.stop().scrollTo( '3200px' , 800 );
    	});
    	$('#content_photo02').click(function(){
    		$paneTarget.stop().scrollTo( '4000px' , 800 );
    	});	
    
    });
    Last edited by json.harris; 05-04-2011 at 01:25 AM.

  • #2
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind... I got it resolved.


  •  

    Tags for this Thread

    Posting Permissions

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