Playing with CSS hooks

So, I wanted to give the new CSS hooks in jQuery a try. Unfortunately, the usually well documented jQuery has this as the total documentation on the hooks:

As of version 1.4.3, jQuery’s CSS module was rewritten to provide a set of “hooks” for the .css() method. This advanced feature, $.cssHooks, allows for fine-grained control over the way jQuery handles certain style properties and enables the creation of custom, browser-normalized properties. The $.cssHooks object also extends the set of properties available to the .animate() method.

Which isn’t much to go on. So, I broke out the old source code to see whats up. Basically, you can hook into a CSS property and create setters and getters for it. I started by making a simple hook that allows you to use show and hide on the display property, and have it call show() and hide(). The code is pretty simple:

jQuery.cssHooks.display = {
	set: function(elem, value) {
		if (typeof (value) === 'string') {
			if (value === 'hide') {
				$(elem).hide();
			} else if (value === 'show') {
				$(elem).show();
			} else {
				elem.style['display'] = value;
			}
		} else {
			if (value.hide) {
				$(elem).hide(value.hide);
			} else if (value.show) {
				$(elem).show(value.show);
			} else {
				elem.style['display'] = value;
			}			
		}
	}
};

This simply checks if you are passing in a string or an object, and then calls show/hide with the supplied value (in the case of an object.) If you are not using show/hide it runs node.style[‘display’] = value; which is what normally happens when you call .css.

I made an example for it here:

Hide
Hide Slow
Hide REALLY Slow
Hide Normal

The code here is pretty simple too:

$('#hookButton').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide') {
		$('#cssHookTest').css('display', 'hide');
		$this.text('Show');
	} else {
		$('#cssHookTest').css('display', 'show');
		$this.text('Hide');		
	}
});

$('#hookButton2').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide Slow') {
		$('#cssHookTest').css('display', {'hide': 'slow'});
		$this.text('Show Slow');
	} else {
		$('#cssHookTest').css('display', {'show': 'slow'});
		$this.text('Hide Slow');		
	}
});	

$('#hookButton3').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide REALLY Slow') {
		$('#cssHookTest').css('display', {'hide': 1400});
		$this.text('Show REALLY Slow');
	} else {
		$('#cssHookTest').css('display', {'show': 1400});
		$this.text('Hide REALLY Slow');		
	}
});		

$('#hookButton4').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide Normal') {
		$('#cssHookTest').css('display', 'none');
		$this.text('Show Slow');
	} else {
		$('#cssHookTest').css('display', 'block');
		$this.text('Hide Normal');		
	}
});	

So, that’s about it, the CSS hooks, although called an advanced feature are really not that hard to use. So, give ’em a try.