10 jQuery 1.3 Tips and Tricks for everyday use

Some useful jQuery Tips and Tricks for your everyday use. Removing and Hiding Dom Elements, Browser Detection, Toggling, Handling Select Lists and more.
Read more >>

Random CSS themes give your Social Space a Design Twist

Many sites are using this technique to give a fresh interface on every page the user visits, giving the illusion of a fast passed user experience. Sites like MTV, Hulu, MP3.com and many others use different techniques to change the sites layout either by changing the colors, backgrounds or just converting the site to a huge ad campaign.

I came up with a simple PHP script to Random your Themes. It checks for CSS files on a specified folder and randomizes it. You can also set the parameter (theme.php?file=theme.css) if you want to have a static version. Note: Security has been stripped for clarity, setup up the script with your own security.

PHP

<?php
 
// Themes Folder
$folder = './';
 
// File Type Default CSS
$fileTypes = array();
$fileTypes['css'] = 'text/css';
 
// File
$file = null;
 
// Sanity Check
if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}
 
// Request Param
if (isset($_GET['file'])) {
	$meta = pathinfo($_GET['file']);
	if (
	    isset( $fileTypes[ strtolower( $meta['extension'] ) ] ) &&
        file_exists( $folder.$meta['basename'] )
    ) {
		$file = $folder.$meta['basename'];
	}
} else {
	$fileList = array();
 
	if (is_dir($folder)) {
	    if ($handle = opendir($folder)) {
	        while (($file = readdir($handle)) !== false) {
				$file_info = pathinfo($file);
				if ( isset( $fileTypes[ strtolower( $file_info['extension'] ) ] ) ) {
					$fileList[] = $file;
				}
	        }
	        closedir($handle);
	    }
	}
 
	if (count($fileList) > 0) {
		$rnd = rand(0, count($fileList)-1);
		$file = $folder.$fileList[$rnd];
	}
}
 
// Header and Content
if ($file != null) {
	$meta = pathinfo($file);
	$contentType = 'Content-type: '.$fileTypes[ $meta['extension'] ];
	header ($contentType);
	readfile($file);
} 
?>

USE

<link rel="stylesheet" href="theme.php" type="text/css" media="screen" />

Clear floats with overflow:auto;

You have scattered the web found lots of different hacks (example: .clearfix) on how to take care of that nasty problem with your floats overlapping. When all you needed to do was use the overflow property. Using overflow:auto; on the outer div will fix this float problem. A few tweaks must be done for div’s at the bottom but it’s way better than hacking. Works for all Grade A Browsers. Note: For IE MAC use overflow: hidden; since it will always display the scrollbars. Read more >>