Opensource, CMS, PHP, MySql, Drupal, Frameworks

Wednesday, February 16, 2011

Rotate content using jquery

Create the sticky_rotate.js


var StickyRotate = StickyRotate || {};
StickyRotate.init = function() {
var stickies = $(".sticky");
// If we don't have enough, stop immediately.
if (stickies.size() <= 1 || $('#node-form').size() > 0) {
return;
}
var highest = 100;
stickies.each(function () {
var stickyHeight = $(this).height();
if(stickyHeight > highest) {
highest = stickyHeight;
}
});
stickies.hide().css('height', highest + 'px');
StickyRotate.counter = 0;
StickyRotate.stickies = stickies;
stickies.eq(0).fadeIn('slow');
setInterval(StickyRotate.periodicRefresh, 7000);
};


StickyRotate.periodicRefresh = function () {
var stickies = StickyRotate.stickies;
var count = StickyRotate.counter;
var lastSticky = stickies.size() - 1;
var newcount;
if (count == lastSticky) {
newcount = StickyRotate.counter = 0;
}
else {
newcount = StickyRotate.counter = count + 1;
}
stickies.eq(count).fadeOut('slow', function () {
stickies.eq(newcount).fadeIn('slow');
});
};


Call the script by using 
$(document).ready(StickyRotate.init);


Ref book: Drupal 6 JavaScript and jQuery