960.gs grid overlay – a jQuery plugin

I’ve now released a bookmarklet to provide a simpler gird overlay.
Please also see grid960 – a grid overlay bookmarklet for 960.gs

I’ve been using 960.gs on a few sites recently. Without wanting to get into a discussion about the pros/cons of using css grid frameworks, I find them useful for some sites.

The 960.gs framework comes with a handy demo that shows a grid overlay, but the GIF images used have no transparency, so it is difficult to add a nice grid overlay to sites when developing them.

On the 960.gs home page there is a button by the thumbnail examples that dynamically adds a grid to the image. I Googled around for a similar solution, but didn’t find one that quite did what I wanted. So, I decided to build a simple jQuery plugin of my own.

Here’s a demo of the plugin in action.

To use the plugin, simply add the following code to your pages for a 12 column grid:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.960grid-1.0.min.js"></script>
<script type="text/javascript">
	$(function() {

thumbnail of 960grid plugin

Once the plugin is activated, a small toggle link will be visible in the top left-hand corner of the page. Unsurprisingly, if you change the input parameter from 12 to 16, you get a 16 column grid available!

The plugin relies on a couple of PNGs and by default the image path is set to /images/. You can override this setting, along with several others, by passing in some options as follows:

var options= {
	img_path: 'img/',
	z_index: 999,
$("body").addGrid(12, options);

As well as the image path, it is possible to override the default z-index used by the overlay, in case there is a conflict. You can also alter the opacity of the PNG if you require.

Please feel free to download the plugin for your own use. Let me know of any problems or suggested enhancements.

IE8 Rounded Corners

Also see updated post about suitable jQuery plugin

Last night I finally got round to upgrading my Win XP VMWare image from IE8 beta to the production release. A bit slack on my behalf as the browser was released about 3 weeks ago. Still, I’d been testing websites in the beta release and all was cool.

Well, that’s what I thought. Last night I discovered that my company website, no longer worked. Looking into the problem this morning, I discovered that the culprit was a jQuery plugin that renders rounded/curvy corners.

I looked at a few other plugins, but none seemed to work. After a bit of Googling, I cam across an interesting blog entry from the guys at filmanentgroup, who are heavily involved in developing the jQuery UI API.

The blog entry highlighted an interesting piece of javascript development by Drew Diller that has nothing to do with jQuery. Drew has written an IE specific library called DD_roundies, that uses VML to produce the rounded corners.

The idea is that this code be used for browsers that don’t (yet) support CSS3 border radius. However, Drew has included an option to also render the CSS3 syntax for those browsers that support this feature.

I’ve now updated my site to use Drew’s code with CSS3 syntax support. This works in IE6, IE7, IE8, Safari, FireFox and Chrome. It doesn’t yet work in Opera, but this is only a matter of time (and perhaps a code update). If you want to support Opera, you can simply use conditional comments.