Randomly Rotating Content Using CSS and JavaScript

This script takes an unordered list and randomly displays one in intervals.

Did you know that...

... if you want to become a better coder you need to eat your vegetables?
... it takes more time to code a web page then to make a pizza?
... you should validate your code?
... jQuery is your friend? For real!
... no matter what some people claim, you can't learn CSS in 3 hours?

The Script

this.randomtip = function(){

	var pause = 3000; // define the pause for each tip (in milliseconds) 
	var length = $("#tips li").length; 
	var temp = -1;		

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		// to avoid repeating
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#tips li").hide();	
		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");		
	};
	
	show(); setInterval(show,pause);
	
};

$(document).ready(function(){	
	randomtip();
});

Go back to the article

This script is supported by Css Templates by Templatica