Monday, August 3, 2009

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.

8 comments:

Argos said...

Great little script, just what
I was looking for! Is there a way to set the speed of the scoller? So not the pause, but the scrolling speed.

İlkin Ulaş BALKANAY said...

Hi
$(container.children()[0]).hide();
$(container.children().[0]).slideDown("slow");

these two lines does the animation.
hide and slideDown are jquery functions. You can pass animation speed to the functions (in miliseconds)
Ex : hide(3000)

I've just checked the jquery documentation, but i did not try it.

Thanks for your comment.

Unknown said...
This comment has been removed by the author.
Unknown said...

Great script thanks!

Is there anyway to set a duration for each slide? Like

Slide 1 = 5 seconds
Slide 2 = 8 seconds
...

Thanks!

İlkin Ulaş BALKANAY said...

Zollgut, script does not support different durations for different divs.
A patch will be appreciated...

Janakiraman said...

Hi there,

This is excellent script. Awesome... but this is not working in IE 8 browser. Can you please help me to solve this?

Anonymous said...

Yes exactly, in some moments I can say that I acquiesce in with you, but you may be in the light of other options.
to the article there is quiet a definitely as you did in the fall delivery of this solicitation www.google.com/ie?as_q=binary fortress software display fusion pro 2.0.2 ?
I noticed the catch-phrase you suffer with not used. Or you profit by the dark methods of development of the resource. I have a week and do necheg

nikhil said...

Is there a way where the user can manually do the rotation and without the timer set? Something like scroll down and scroll up and still have the rotation effect?