EppsNet: Notes from the Golden Orange » Prototype http://eppsnet.com Online journal based in Orange County, CA. Hilarious anecdotes tempered by the icy chill of certain death. Fri, 05 Dec 2008 06:50:13 +0000 http://wordpress.org/?v=2.6.2 en EppsNet Labs: Glider http://eppsnet.com/2008/03/eppsnet-labs-glider http://eppsnet.com/2008/03/eppsnet-labs-glider#comments Sat, 15 Mar 2008 06:39:07 +0000 PE http://eppsnet.com/2008/03/eppsnet-labs-glider 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.

PLAIN TEXT
HTML:
  1. <link rel="stylesheet" href="stylesheets/glider.css" type="text/css">
  2. <script src="javascripts/prototype.js"></script>
  3. <script src="javascripts/effects.js"></script>
  4. <script src="javascripts/glider.js"></script>
  5.  
  6. <div id="glider">
  7.     <div class="controls">
  8.         <a href="#tab1">Tab 1</a> |
  9.         <a href="#tab2">Tab 2</a> |
  10.         <a href="#tab3">Tab 3</a> |
  11.         <a href="#tab4">Tab 4</a>
  12.     </div>
  13.  
  14.     <div class="scroller">
  15.         <div class="content">
  16.             <div class="section" id="tab1">Tab 1</div>
  17.             <div class="section" id="tab2">Tab 2</div>
  18.             <div class="section" id="tab3">Tab 3</div>
  19.             <div class="section" id="tab4">Tab 4</div>
  20.         </div>
  21.     </div>
  22. </div>
  23.  
  24. <script>
  25.     new Glider( 'glider', { duration:0.5 } );
  26. </script>

]]> http://eppsnet.com/2008/03/eppsnet-labs-glider/feed