Glider

Glider is a Javascript glider control, based on script.aculo.us. It lets content glide in and out of a surrounding div in either horizontal or vertical direction.

Usage

Just include glider.js in your page and initialize the glider with

  glider = new Glider($('glider'));

You can also specify the direction and parameters for the animation as well as a callback that will be invoked when the glider glides:

  glider = new Glider($('glider', { direction: 'x', transition: Effect.Transitions.sinoidal, duration: .6 }, myCallBackFunction));

The glider’s direction defaults to horizontal (x). Additionally to the Glider class, there is a GliderLink class. Just instantiate a new GliderLink for all links on the page that are supposed to trigger the glider, e.g.:

  $$('a[href^="#"]').each(function(link) {
    link = new GliderLink(link, glider);
  });

Setup of the HTML required for the glider to work is pretty straight forward. You need a surrounding div, a div that marks the list of sections the glider can glide and one div fore each section:

  <div id="glider">
    <div class="sections">
      <div id="section1" class="section">
        section1
      </div>
      <div id="section2" class="section">
        section2
      </div>
      <div id="section3" class="section">
        section3
      </div>
    </div>
  </div>

The ids of these sections have to correspond to the GliderLinks’ hrefs, e.g. a link with href="#section1" triggers the glider to glide div#section1 into view.

Glider will also scale the surrounding container (div#glider) to match the current section’s width or height respectively. To disable that scaling, simply specify a fixed width and/or height for all sections.

For guidance on the required CSS, see the examples

Author

Copyright © 2008 Marco Otte-Witte (simplabs.com), released under the MIT license