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
traversing, event handling, animating, and Ajax interactions for rapid web
.append("<img src="http://www.blogger.com/images/pdf.png" />")
- The first line selects all the links in the page whose 'href' attribute ends with '.pdf'
- The second line adds 'external_link' css class to selected link elements.
- The third line places an image after the link element in order to specify that is a link to download a pdf file.
- 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 class="box_dark box_size" id="item1">
My favorite shell commands</a>
<div class="box_light box_size" id="item2">
Volatile Variables In JAVA</a>
<div class="box_dark box_size" id="item3">
The power off shell</a>
<div class="box_light box_size" id="item4">
Search java class files in jars. </a>
<div class="box_dark box_size" id="item5">
ReadWriteLock example in Java</a>
<div class="box_light box_size" id="item6">
How to change GNOME desktop wallpaper programmatically</a>
You can see the plugin in action : Live demonstration
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.