Social Vitamin » CSS

10 jQuery 1.3 Tips and Tricks for everyday use

Michael D. Irizarry — Mon, 18 May 2009 17:22:18 +0000

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

1. Removing, Showing or Hiding DOM elements

// Remove Element
$("#div").remove();
 
// Hide
$("#div").hide();
$("#div").hide("slow"); 
$("#div").hide("fast");
$("#div").hide(1000);  
$("#div").hide(1000, callback); 
 
// Show
$("#div").show();
$("#div").show("slow"); 
$("#div").show("fast");
$("#div").show(1000);  
$("#div").show(1000, callback);  
 
// Toggle Hide/ Show
$("#div").toggle();
$("#div").toggle("slow");

2. Select All Check Boxes

// Check
$("#selectList").attr('checked', true); 
 
// Uncheck
$("#selectList").attr('checked', false);

3. Creating Images on the Fly

$("").attr({ "src": "images/loadingAnimation.gif" }).appendTo("#div");

4. jQuery noConflict used when using other libraries

var $j = jQuery.noConflict();
$j('#div').hide();

5. Getting Selected Radio Button value

$("input[name='id'][checked]").val();

6. Getting Select List values

// Value
$('#selectList').val(); 
 
// Text value
$('#selectList :selected').text() 
 
// Multiple Selection
var selections = [];
$('#multipleList :selected').each(function(i, selected){
     selections[i] = $(selected).text();
});

7. Check if checkbox is Checked

$('#checkBox').attr('checked'); 
 
$('#checkBoxID').is(':checked'); 
 
$("[:checkbox]:checked").each(
    function() {
    } 
);

8. Browser Detection

if( $.browser.safari ) { // Do something }
 
if ($.browser.msie && $.browser.version > 6 ) { // Do something }
 
if ($.browser.msie && $.browser.version <= 6 ) { // Do something }
 
if ($.browser.mozilla && $.browser.version >= "1.8" )  { // Do something }

9. Highlight a Row onClick

$("tr").click(function() {
    $(this).toggleClass("rowActive");
});

/* CSS highlights clicked row */
.rowActive {  
    border: 1px solid #333333; 
    background-color: #999999; 
}

10. Building the DOM Dynamically

$("").attr({id:"header", "class":"header"}).html("Welcome to my Site!").appendTo(document.body);
$("").attr("src", "images/logo.gif").appendTo("#header");

Random CSS themes give your Social Space a Design Twist

Michael D. Irizarry — Sat, 11 Apr 2009 05:18:31 +0000

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


 
// 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

Clear floats with overflow:auto;

Michael D. Irizarry — Tue, 31 Mar 2009 18:19:05 +0000

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.

CSS

#doc {
	width: 100%;
	overflow:auto;
}
#left {
       width: 45%;
       float: left;
}
#right {
	width: 45%;
	float: right;
}

XHTML


LEFT
RIGHT