Screen size dependent CSS with jQuery
A simple jQuery plugin to let the CSS handle resolution dependent content - jQuery.classBySize(). This little plugin maps the current document's size to classnames applied to the element the plugin is used on.
For example:
#!javascript
$('div.container').classBySize({
0: 'without-side without-header',
600: 'without-side',
900: ''
});
Would add a without-side without-header class to the div.container element, whenever the size of the document is between 0 and 600. If between 600 and 900, the without-side class is added. If more than 900, all classes are removed. The classes are mutually exclusive; that is, all classes of all sizes are removed before the applicable size class is added. That's why in this example the without-side class is mentioned in both the 0 and 600 size.
The advantage of using a plugin for this, rather than showing or hiding all kinds of elements based on events, is that the entire display is controlled from the CSS.