EppsNet Labs: Glider

14 Mar 2008 /

Here’s a really simple gliding tabs demo using glider.js, which is downloadable here.

As you can see from the really simple code below, you could do something pretty nice with this without too much extra effort.

Glider is dependent on the Prototype and Scriptaculous libraries, both of which are included in the glider download, as is the required stylesheet.

  1. <script src="javascripts/prototype.js"></script>
  2.  
  3. <script src="javascripts/effects.js"></script> 
  4.  
  5. <script src="javascripts/glider.js"></script>
  6. <div id="glider">
  7. <div class="controls"><a href="#tab1">Tab 1</a> |
  8. <a href="#tab2">Tab 2</a> |
  9. <a href="#tab3">Tab 3</a> |
  10. <a href="#tab4">Tab 4</a></div>
  11. <div class="scroller">
  12. <div class="content">
  13. <div id="tab1" class="section">Tab 1</div>
  14. <div id="tab2" class="section">Tab 2</div>
  15. <div id="tab3" class="section">Tab 3</div>
  16. <div id="tab4" class="section">Tab 4</div>
  17. </div>
  18. </div>
  19. </div>
  20.  
  21. <script type="text/javascript">// <!&#91;CDATA&#91;
  22.    new Glider( 'glider', { duration:0.5 } );
  23. // &#93;&#93;></script>

No Comments on EppsNet Labs: Glider »

Why not be first?

TrackBack URI

RSS feed for comments on this post

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>