Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Compacting contents using Glider script

Using Glider.js

Thanks to Iva for requesting for this tutorial! Finally I have something to add to my long-dormant list of resources. Iva asked me over Twitter whether could I write a tutorial on how I’ve incorporated the famous Coda glider effect on my blog header. The basic function of the glider script is to replicate the effects of the Coda glider. Gliders, like accordions, are very useful in compressing/compacting contents in an area of a fixed size, and animate the process when a visitor switches between the different ‘panels’ (which involves gliding, hence the name).

My previous themes were plagued with the problem of overcrowding, where I attempt to squeeze too much information into too little screen real estate space – resulting in a rather nasty, visitor-unfriendly clutter and confusion. When I redesigned my blog, I kept that problem in mind and I was very impressed when I saw The Wojo Group‘s glider in action. It then led me to discovering the original synthesis of this idea at Coda, and to the Google Code page of Glider.js.

What is glider.js?

Glider.js is a rather lightweight javascript effect that weighs around 4kb uncompressed. So far I’ve not seen much development of the script after it’s previous update in May 2007, but for the moment being, it doesn’t have much issues with most major browsers (including IE6, surprise!). I’ve tested it in Firefox 2 and 3, Safari, Opera, Safari and Chrome, and it excelled in all these browsers. It is downloadable over here.

So are you ready to continue with the tutorial? Goodies after the jump, I promise!

Using the glider

So now let’s move on to the part that lets you implement your own glider. There is a demo link at the end of the tutorial, but it’s always better to read through the details because that’s where the majority of the explaning goes to.

What you will need

Download the Glider.js and if you don’t have, Prototype.js and Scriptaculous.js. Of course, if you’re using WordPress, you don’t have to worry about the latter because they’ve been taken care of by your WordPress installation. It’s safer to check your blog header and see if they’re loaded. If they’re not, you don’t need to actualy download them – you can simply load Google AJAX Libraries to make things easier:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/"></script>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
  3. <script type="text/javascript" src="glider.js"></script>

*Note: It’s absolutely important that you load the glider.js file after loading prototype and scriptaculous.

Alternatively, if you prefer to use the google.load function:

  1. <script src="http://www.google.com/jsapi"></script>
  2. <script type="text/javascript">
  3. google.load("prototype", "");
  4. google.load("scriptaculous", "1.8.2");
  5. </script>
  6. <script type="text/javascript" src="glider.js"></script>

For WordPress users who prefer to place their glider.js file in their theme’s JS directory (recommended, and you can use any other names, just be sure to change the ‘/js/’ into something else – ‘/name-of-directory/’), replace the last line above with:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/glider.js"></script>

For more information on the Google AJAX Libraries, you can read Jeff’s writeup.

Prior to setting up the glider

Glider.js relies on using classes to identify the individual gliders, so you will have to make sure that the following classes are unused in your layout (except for elements meant for the glider):

  • scroller
  • section
  • controls

*Note to advanced coders: these classes are identified in the javascript file, so if you’re planning to use other classes, do keep track of the changes and replace the class names in the file with relevant ones.

Basically, you will have a <div class="scroller"> to serve as a window around the content, and then <div class="section"> to wrap around each individual panels (which will be glided over when the event is initiated by a user mouseclick on a link – we’ll come to that later) and then a <div class="controls"> to house the control tabs. For some designers, you might want a forward and backward button to be present – if that’s the case, you can make do without the <div class="controls"> part. Here’s a summary of what the individual classes serve as:

  • scroller – serves as a window in which sections will appear, one at a time
  • section – wraps around contents in individual panels in the glider
  • controls – wraps around the tabs to allow navigation to any panel in the glider

A very basic layout, as evient in the blog header in the current design, can be seen below:

Basic layout of a glider.

Basic layout of a glider.

The basic idea is that we will have the scroller to be of the same width of the panels – it will be the ‘window’ in which the each section, or panel, is displayed. For this reason, all sections have to be of the same width. When the animation is not running, you will only see one section/panel in the window, and when you click on the navigation menu, the glider effects kicks in, fetches for the other section located outside of the window (see screenshot above) and repositions the new section in the window. That’s a mouthful! Now take a deep breath and try to digest it *burp*

And this brings us to the next section. Read on!

Step 1 – Adding an overall and a content wrapper

I have a habit of wrapping huge, chunky sections with a wrapper, so for this case, we will be using <div id="glider">.

  1. <div id="glider">
  2. ...
  3. </div>

Now we add in the scroller, and then the content wrapper that wraps around all the individual panels. We will also need to append the script that specifies the glider, after the entire glider element.

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. ...
  5. </div>
  6. </div>
  7. </div>
  8. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

*Note: If you have a different id for your glider container, you will have to make changes to the script – change the ‘glider’ to ‘your-own-id‘. The same applies if you want to vary the duration of transition/animation.

For the CSS, we want each section to be 500px wide and 200px tall. So we need to make the window of the same size too. In addition, we will make it such that the <div class="content"> is of a very huge width (to contain all the scrollers):

  1. .scroller {
  2. overflow: hidden;
  3. width: 500px;
  4. height: 200px;
  5. }
  6. .content {
  7. width: 10000px;
  8. }

Everything cool so far? Now we move on to the second step.

Step 2 – Adding in the sections

Now we’re done with the wrappers (div-itis alert, yes, but that’s unavoidable). We shall add in the individual sections. Let’s say we want to have 5 sections, each 500px wide and 200px tall:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">...</div>
  5. <div id="section2" class="section">...</div>
  6. <div id="section3" class="section">...</div>
  7. <div id="section4" class="section">...</div>
  8. <div id="section5" class="section">...</div>
  9. </div>
  10. </div>
  11. </div>
  12. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

*Note to those who are unfamiliar with CSS – ‘id’ and ‘class’ are two different things. A particular id can only appear in the entire document once – although modern browsers render multiple elements of the same id correctly, this should not be seen as valid XHTML. A class can appear multiple times in a document. We will apply a general style for all sections, so we target the class instead of the id.

To fix the dimensions of each section, we will have to turn to CSS for help:

  1. .section {
  2. float: left;
  3. overflow: hidden;
  4. padding: 10px;
  5. width: 480px;
  6. height: 180px;
  7. }

Some really, really important notes:

  • Float the containers to the left so that they will be arranged horizontally.
  • Hide potential overflows so that it doesn’t screw up anything, just in case.
  • The CSS box model: the total, intended height of an element is the sum of all the margins, paddings AND dimensions specificed. So if you want to have a 10px padding for contents in all sections, the width has to be reduced by 2*10px = 20px (because we have left and right paddings) and the same applies for height (because we have top and bottom paddings). For more information, read the Box Model article.

Step 3 – Adding and styling the controls

For the controls, I have used a tabbed structure to arrange the individual links to each section. We will add it outside the scroller but within the entire glider wrapper:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">...</div>
  5. <div id="section2" class="section">...</div>
  6. <div id="section3" class="section">...</div>
  7. <div id="section4" class="section">...</div>
  8. <div id="section5" class="section">...</div>
  9. </div>
  10. </div>
  11. <div class="controls">
  12. <ul>
  13. <li><a title="Go to Section 1" href="#section1">Section 1</a></li>
  14. <li><a title="Go to Section 2" href="#section2">Section 2</a></li>
  15. <li><a title="Go to Section 3" href="#section3">Section 3</a></li>
  16. <li><a title="Go to Section 4" href="#section4">Section 4</a></li>
  17. <li><a title="Go to Section 5" href="#section5">Section 5</a></li>
  18. </ul>
  19. </div>
  20. </div>
  21. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

That’s a whole bunch of code! Basically what we are doing is that we’re adding an unordered list (which is to be styled, later) underneath the ‘window’ (as seen in my blog header) to be the navigation menu. There are five sections, so normally you will need to place five tabs, in five <li> tags.

Now the styling!

  1. .controls {
  2. overflow: hidden;
  3. width: 500px;
  4. height: 30px;
  5. }
  6. .controls ul {
  7. list-style: none;
  8. margin: 0;
  9. padding: 0;
  10. width: 100%;
  11. }
  12. .controls ul li {
  13. float: left;
  14. width: 20%;
  15. }
  16. .controls ul li a {
  17. display: block;
  18. height: 20px;
  19. line-height: 20px;
  20. padding: 5px 0;
  21. text-align: center;
  22. }

This is what we’ve done for the CSS part:

  • Disable styles for the unordered list, set margin and padding to zero (just in case you haven’t done so in with a reset stylesheet, and defined its dimensions.
  • For the list items, we float them to the left to arrange them horizontally. There are 5 list items in total, so each of them take up 20% of the total width.
  • For the link in each list items, we set its display to block (by default, it’s in inline element) and by applying the box model, set height to 20px such that adding up the vertical paddings will be 30px. We also center the text.

We’re done with the basic structure of the glider! If you’re satisfied, you’re done for good!

Step 4 – Backward and forward buttons

The buttons can be implemented without the tabs, with the tabs or be thrown out of the window. It all boils down to personal preferences. For me, I’ve used a combination of both. So far, we’ve been doing the basic structure without taking the buttons into mind. If we want to, modifications to the structure above have to be made.

In this example, we will be adding buttons to two-sides of the scroller:

  1. <div id="glider">
  2. <div id="nav-previous" class="side-nav">
  3. <a title="Previous" href="#" onclick="my_glider.previous();return false;">Previous</a>
  4. </div>
  5. <div class="scroller">
  6. <div class="content">
  7. <div id="section1" class="section">...</div>
  8. <div id="section2" class="section">...</div>
  9. <div id="section3" class="section">...</div>
  10. <div id="section4" class="section">...</div>
  11. <div id="section5" class="section">...</div>
  12. </div>
  13. </div>
  14. <div id="nav-next" class="side-nav">
  15. <a title="Next" href="#" onclick="my_glider.next();return false;">Next</a>
  16. </div>
  17. <div class="controls">
  18. <ul>
  19. <li><a title="Go to Section 1" href="#section1">Section 1</a></li>
  20. <li><a title="Go to Section 2" href="#section2">Section 2</a></li>
  21. <li><a title="Go to Section 3" href="#section3">Section 3</a></li>
  22. <li><a title="Go to Section 4" href="#section4">Section 4</a></li>
  23. <li><a title="Go to Section 5" href="#section5">Section 5</a></li>
  24. </ul>
  25. </div>
  26. </div>
  27. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

So, we’ve added the previous and next links to the side of the scroller, and attached the javascript funciton to them to move the sections. We need to refine their appearance using CSS:

  1. .side-nav {
  2. float: left;
  3. width: 20px;
  4. height: 200px;
  5. }
  6. .side-nav a {
  7. display: block;
  8. text-indent: -9999px;
  9. width: 20px;
  10. height: 200px;
  11. }
  12. #nav-previous a {
  13. background: url(images/previous-arrow.png) no-repeat center center;
  14. }
  15. #nav-next a {
  16. background: url(images/next-arrow.png) no-repeat center center;
  17. }

Basically, what we did to the buttons is:

  • To give them a definite width and height (preferably spanning the height of scroller).
  • Display links as a block element, indent the text by -9999px so that it’s off the screen but still readable by search engine bots.
  • Customize background images for each button.

Then replace the styles for certain elements with the new ones below:

  1. .scroller {
  2. float: left;
  3. overflow: hidden;
  4. width: 500px;
  5. height: 200px;
  6. }
  7. .controls {
  8. clear: both;
  9. overflow: hidden;
  10. width: 540px;
  11. height: 30px;
  12. }
  13. .controls ul {
  14. list-style: none;
  15. margin: 0 auto;
  16. padding: 0;
  17. width: 500px;
  18. }

The modifications are necessary because:

  • We have added two 20px wide buttons on the side, so the overall width has increased to 540px.
  • The controls are widened to 540px as well, but if you want to keep the menu the same width as the scroller (at 500px), fix width to 500px as well and use automatic left and right margin to center the menu.
  • Clear the floats above the controls.

We also need to use the clearfix method to making sure that all the list items are cleared properly. Change <ul> to <ul class="clearfix">. To the CSS, add the lines:

  1. .clearfix:after {
  2. clear: both;
  3. content: ".";
  4. display: block;
  5. height: 0;
  6. visibility: hidden;
  7. }


There are several things that might not work well with this glider script:

  • If you’re using an older version of Lightbox, you might encounter a javascript error and the glider will not work – neither will the Lightbox. If that’s the case, I recommend you to upgrade to Lightbox 2. If you’re a WordPress user, I highly recommend Lightbox 2.8.0 plugin for WordPress – not only does it work perfectly for me, it allows you to customize your lightbox as well.
  • If you’re using an <iframe> in the section that has a scrollbar, there might be a minor graphical glitch in Firefox. I am unable to reproduce the glitch in Safari, Chrome, IE (surprise!) and Opera. It seems to be an issue with Firefox?
  • Flash movie will show even when the section it is contained in is not in the ‘window’. So the conventional YouTube snippets will cause your Flash Movie to appear towards the left/right of the ‘window’. You will have to add the following lines to the code: within the <object> element, add <param name="wmode" value="transparent"></param>; and to the <embed>, add wmode="transparent".

Finally, the demo!

Yes, there is a demo file that comes with this tutorial – just follow the link to the demo page. Do not right click and download, as the download manager I’m currently using masks the original URL, so you’ll be downloading a blank file instead. If you want to get the code, just follow the link and save the page that is loaded thereafter.

[download id=”8″]

I hope the tutorial and demo is of good use to you. Have fun! If you have any queries, feel free to leave a comment. Thanks!

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?


Related posts that might interest you:


Posts that are popular among visitors: