Div Roller : jQuery plugin for rotating html div elements

In this post I want to introduce a jQuery plugin that i have written for one of my projects.
jquery.divroller plugin is written to rotate messages displayed in the home page of www.bahele.com. bahele is a facebook connect site where users can login with their facebook accounts and write messages about what they like or dislike. (Bahele is only available in Turkish for now.)

For the ones who have not heard of this library here's the motto from jquery.com

"jQuery is a fast and concise JavaScript Library that simplifies HTML document 
traversing, event handling, animating, and Ajax interactions for rapid web 
development. jQuery is designed to change the way that you write JavaScript."

jQuery is a widely used javascript library. There are tons of javascript libraries in the wild, each has its own clever implementations. jQuery differs from other frameworks by its chaining property. Most of the methods in the library returns a jQuery object. You can call a jQuery function on a return value of another jQuery function. Here is what i mean:

       $("a[href$='.pdf']")
           .addClass("external_link")
           .append("<img src="http://www.blogger.com/images/pdf.png" />")
           .click(pdfLinkClicked);

One line of javascript is splitted into four lines for better readability.

1. The first line selects all the links in the page whose 'href' attribute ends with '.pdf'
   
2. The second line adds 'external_link' css class to selected link elements.
   
3. The third line places an image after the link element in order to specify that is a link to download a pdf file.
   
4. The last line binds 'pdfLinkClicked' function to the click event of link element.
   

Enough for a short introduction, now lets look how we can take advantage of jquery.divroller. Below is a simple usage scenario. Plugin is applied to the html div element whose id attrubute is equal to "divroller_container". There are two configuration parameters:

• pause : Sleep duration between two rotations. This parameter determines the speed of the rolling divs.
  
• visible : Number of visible html elements inside the container. Plugin shows only "visible" number of elements, the others are hidden.
  

<div id="divroller_container">
<div class="box_dark box_size" id="item1">
<a href="http://ilkinbalkanay.blogspot.com/2007/11/my-favorite-shell-commands.html">
My favorite shell commands</a>
</div>
<div class="box_light box_size" id="item2">
<a href="http://ilkinbalkanay.blogspot.com/2007/10/volatile-variables-in-java.html">
Volatile Variables In JAVA</a>
</div>
<div class="box_dark box_size" id="item3">
<a href="http://ilkinbalkanay.blogspot.com/2007/09/power-off-shell.html">
The power off shell</a>
</div>
<div class="box_light box_size" id="item4">
<a href="http://ilkinbalkanay.blogspot.com/2007/09/seach-java-class-files-in-jars.html">
 Search java class files in jars. </a>
</div>
<div class="box_dark box_size" id="item5">
<a href="http://ilkinbalkanay.blogspot.com/2008/01/readwritelock-example-in-java.html">
ReadWriteLock example in Java</a>
</div>
<div class="box_light box_size" id="item6">
<a href="http://ilkinbalkanay.blogspot.com/2008/01/how-to-change-gnome-desktop-wallpaper.html">
How to change GNOME desktop wallpaper programmatically</a>
</div>
</div>

<script type="text/javascript">
$("#divroller_container").divroller({pause:2000, visible:3});
</script>

You can see the plugin in action : Live demonstration
You can also download the javascript source.

Note : There are countless jQuery plugins available on the internet. Before writing your own plugin you should check http://plugins.jquery.com/, you might be reinventing the wheel.