You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Custom navigation BUG Created Apr 25, 2009

This thread is solved

Views: 3594     Replies: 2     Last reply Jan 15, 2010  
You must login first before you can use this feature

daxydelic

Posts: 5

Registered:
Apr 10, 2009

Custom navigation BUG

Posted: Apr 25, 2009

I would like to put the
		<ul class="tabs"> 
in the header div.
But it doesnt seem to work. Any suggestions ?

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>welcome</li>
					<li>about us</li>
					<li>services</li>
                    <li>contact</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 DOES NOT !!
  
<div id="container" class="container_12">
	<div id="repeater" class="grid_12">

		<div id="header" class="grid_12">
				<ul class="tabs"> 
					<li>welkom</li>
					<li>about us</li>
					<li>services</li>
                    <li>contact</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-->   

CRAZY ISNT IT !!

why do I have to put my navigation stuff directly above the
scrollable class ? My CSS is exactly the same for header and mainContent... so this is really stupid. Could somebody tell me why
this happens and how to solve this ?

Somebody please.

daxydelic

Posts: 5

Registered:
Apr 10, 2009

Solved, using ScrollTo !

Posted: Apr 26, 2009

Reply to: Custom navigation BUG, from daxydelic
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-->    

PaulSteve

Posts: 3

Registered:
Jan 15, 2010

» Solved, using ScrollTo !

Posted: Jan 15, 2010

Reply to: Solved, using ScrollTo !, from daxydelic
Thanks, they work fine with me