Transformer layout jQuery plugin adds support for CSS3 media queries (min-width and max-width) across all browsers allowing you to develop layouts that adapt depending on the current window width, text size and zoom level without horizontal scrolling.
Each layout can then be liquid so as to always make the best use of space. This provides the benefits of both liquid and elastic layout approaches! That said, media queries can also be used to create fixed-width layouts that adapt for low resolutions.
Inspiration
The Transformer layout plugin is the culmination of ideas from:
This plugin is also based on the work of Alexander Farkas. I have improved on Alexander’s implementation by:
- Supplementing functionality for browsers that support media queries but don’t recalculate the layout on zoom (for example: Chrome and Safari).
- Supporting
em
units in media queries (providing seamless account for text size along with resolution).
Examples
Place the following code in the <head>
of your XHTML document.
Note: For best performance, it is recommended that you combine all JavaScript files below into a single minified file.
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.transformer-layout.js"></script>
<script type="text/javascript" src="jquery.resize-events.js"></script>
<script type="text/javascript" src="pxToEm.js"></script><!-- Optional: Adds support for em units in media queries -->
Next: Add your linked stylesheets using media queries to the <head>
of your document.
<link href="layout-small.css" media="all" rel="stylesheet" type="text/css" />
<link href="layout-medium.css" media="only all and (min-width: 30em) and (max-width: 60em)" rel="stylesheet" type="text/css" />
<link href="layout-large.css" media="only all and (min-width: 60em)" rel="stylesheet" type="text/css" />
Usually, three layouts are enough for most sites (for example: small, medium, and large), but there’s no limit to the number of different layouts that can be specified.
The first link
contains “all
” in the media
attribute, making this link
the default stylesheet used by browsers that don’t support JavaScript or media queries. By making your ‘small layout’ the default you are providing the most suitable layout for mobile devices that don’t support JavaScript or media queries.
To avoid flicker in browsers that don’t support CSS3 media queries natively, initialise the script as soon as possible after the opening <body>
tag:
<body>
<script type="text/javascript">
$.transformer({
addClasses : true // optional classes added to body in all browsers
});
</script>
...
Browser support
The transformer layout plugin has been tested in:
- Firefox 3.6.3
- Chrome 4
- Safari 4
- Internet Explorer 6, 7 and 8
- Opera 10.51
Working example
A complete demonstration of the Transformer layout plugin is available.
Download
Transformer layout is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.
Package
Download the complete Transformer layout 3.1 example package (.zip)
Individual files
- jquery.transformer-layout.js 3.1 (10 kB uncompressed)
- Dependencies
- Required: jQuery (tested with version 1.4.2)
- Required: jQuery Resize Events plugin
- Optional: pxToEm (required to support
em
values in media queries)
By Transformer layout : jQuery plugin support for CSS3 media queries - Pixel Library September 15, 2016 - 2:54 pm
[…] Learn Extra Demo […]