You now can look in almost any website or web application where the background colors are alternating. This is a great (and easy) way to improve the user interface for the end users.

Here’s a quick explanation of what’s going on in the demo file below:

First we set the alternating backgrounds we want to use.

$bg1 = "#f5f5f5";
$bg2 = "#FFFFFF";


Then as we pass through a loop of some kind this code snip rotates the variable $bg to the background colors we set above:
$bg = ($i++ & 1) ? $bg1 : $bg2;

In the example files, we’ve added some javascript to the table
’s to add an additional hover effect as well as some styling to improve the look of the tables.

Demo | Source File

Comment if you have any questions or suggestions.

A friend of mine recently requested a quick image rotator script that was not using Flash, but would use Javascript. Below is a script that will read through a single directory and look for any image file (jpg, gif, or png) and rotate it.

Requirements:

1. PHP
2. jQuery (latest version)
3. InnerFade plugin (see docs for variables explanations and additional vars)

// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/examples/imgs"; // directory on server
$image_relative_path = '/examples/imgs'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)

if($handle = opendir($image_dir)) {
	while (false !== ($file = readdir($handle))) {
	if ($file != "." && $file != "..") {
		$ext_bits = explode(".",$file); // finds file extensions
		foreach($ext_bits as $key => $value){
			if(in_array($value,$file_types)){
				$image_rotation .= '


';
			}
		}
	}
}
closedir($handle);
}

	< ?= $image_rotation; ?>

Live demo or source file rotating three images for single directory

If you have any questions about this, please leave a comment.

John

More javaScript resources than you could ever ask for. Jason does another great job getting them all together in one convenient place.

read more | digg story