Better flexible site layout with resize detection.

This is an update to a previous post located here: Flexible site layout with resize detection.

A while back I posted an article about a simple and quick javascript  that would add or remove styles to whatever elements you want based on window width. This is a great way to make a single site compatible with multiple display types, everything from a phone to a desktop with an unreasonable large screen if you’d like. That code used an if statement, and was rather ineffective, I have since rewritten it to be easier to deploy to new themes and came up with this.

Snipplr: http://snipplr.com/view/60562/flexible-site-layout-with-resize-detection-now-improved/

Short, more concise, and easier to implement all you do is create an object with a simple {width: ‘style name’} format and the script will do the rest. It’s then up to you do add all the appropriate styles to your CSS document. This can of course all be done with CSS and the @media tag, but I prefer this method because it simple to deploy and it’s switches are much faster. As always leave a comment with any question or problems and I’ll get back to you as soon as I can.

Leave a Reply

Your email address will not be published. Required fields are marked *