< Return to main page

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:

        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.

< Return to main page

You're looking at a very minimalistic archived version of this website. I wish to preserve to content, but I no longer wish to maintain Wordpress, nor handle the abuse that comes with that.