Custom navigation BUG Created Apr 25, 2009

The scrollable jquery code provided by you guys is just
not good enough. I am forced to put

<ul class="tabs">  
          <li>welcome</li> 
          <li>about us</li> 
          <li>services</li> 
          <li>contact</li> 
</ul> 

in the DIV that contains the scrollable class.

Not only this sucks, but it also sucks that you cant choose
where to put the buttons.

The solution is quite easy.
Use the "ScrollTo" jquery plugin from the jquery homepage
and use the the "localScroll" and "scrollTo" from
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

and put them in the header like this:

    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/jquery.scrollTo.js"></script>    
    <script type="text/javascript" src="script/jquery.localscroll.js"></script>
 

The only thing you need to do next is load the functions.
So create a new js file and load it after the stuff above, so
you would have something like this:

    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/jquery.scrollTo.js"></script>    
    <script type="text/javascript" src="script/jquery.localscroll.js"></script>
    <script type="text/javascript" src="script/your_scroll.js"></script>

This will be the content of the js file:

$(document).ready(function () {
    
jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';
$.localScroll.hash({
target: 'div.scrollable', 
queue:true,
duration:1500
});

$.localScroll({
target: 'div.scrollable', 
queue:true,
duration:1000,
hash:false,
onBefore:function( e, anchor, $target ){

},
onAfter:function( anchor, settings ){

}
});
});
});

Now you can let the whole thing scroll to a
link by defining the link like this:

<ul class="tabs">   
          <li><a href="#welcome">welcome</a></li>  
          <li><a href="#about_us">about us</a></li>  
          <li><a href="#services">services</a></li>  
          <li><a href="#contact">contat</a></li>  
</ul>  

And the best thing is that you can do this with every link
on the site WITHOUT restrictions !! :D

The result is that it will scroll to:

<div id="welcome">

</div>

So this is the code that will work perfectly.

THIS WORKS !!

<div id="container" class="container_12"> 
    <div id="repeater" class="grid_12"> 
 
        <div id="header" class="grid_12"> 
 
        </div><!--End Header--> 
         
        <div id="mainContent" class="grid_12"> 
          <ul class="tabs">   
             <li><a href="#welcome">welcome</a></li>  
             <li><a href="#about_us">about us</a></li>  
             <li><a href="#services">services</a></li>  
             <li><a href="#contact">contat</a></li>  
          </ul>   
 
             <div class="scrollable"> 
                 <div id="blocks">  
                       <div id="welcome">    
                        <h1>welcome</h1> 
                    </div> 
                    <div id="about_us">  
                            <h1>about us</h1> 
                    </div> 
                    <div id="services">  
                            <h1>services</h1> 
                    </div> 
                    <div id="contact">  
                            <h1>contact</h1> 
                    </div> 
                </div>  
                                       
            </div>  
          
        </div> 
         
        <div id="footer" class="grid_12"> </div> 
</div> 
</div> <!--End container-->    

THIS WORKS TOO !!

<div id="container" class="container_12"> 
    <div id="repeater" class="grid_12"> 
 
        <div id="header" class="grid_12"> 
          <ul class="tabs">   
             <li><a href="#welcome">welcome</a></li>  
             <li><a href="#about_us">about us</a></li>  
             <li><a href="#services">services</a></li>  
             <li><a href="#contact">contat</a></li>  
          </ul>  
        </div><!--End Header--> 
         
        <div id="mainContent" class="grid_12"> 
 
             <div class="scrollable"> 
                 <div id="blocks">  
                       <div id="welcome">    
                        <h1>welcome</h1> 
                    </div> 
                    <div id="about_us">  
                            <h1>about us</h1> 
                    </div> 
                    <div id="services">  
                            <h1>services</h1> 
                    </div> 
                    <div id="contact">  
                            <h1>contact</h1> 
                    </div> 
                </div>  
                                       
            </div>  
          
        </div> 
         
        <div id="footer" class="grid_12"> </div> 
    </div>     
</div> <!--End container-->    

Thanks, they work fine with me