A couple of days ago I released a jQuery plugin that provides a grid overlay when working with the 960.gs css grid framework. The plugin seems to have been quite popular, and as a result I now have a host of new Twitter followers – Hello to everyone in Romania!
I’m glad that others have found the plugin useful. A couple of people have suggested I release the overlay as a bookmarklet, so I spent yesterday learning how to develop one. So here it is: grid960 – a grid overlay bookmarklet for 960.gs
To install the bookmarklet simply drag the link below to your bookmarks toolbar. In Internet Explorer, right click, select ‘Add to favourites’ and then select ‘Links’.
You can test it on this page.
The bookmarklet works slightly differently to the original jQuery plugin. Firstly, if jQuery is not installed, it will inject it for you. If jQuery is already installed it will use this library – it will dynamically upgrade the library if it is not the latest vesion (1.3.2).
Secondly, the bookmarklet provides a small configuration menu on the page. When the bookmarklet loads, it will defaults to the 12 column grid. Through the menu, you can switch to a 16 column grid, and also alter the opacity of the gridlines.
The bookmarklet does not work in IE6 (yeah, whatever).
Any problems or suggestions, let me know.
Tags: 960.gs, bookmarklet, css grid, JQuery, linkedin
Very cool and quick work on the bookmarklet implementation! As a feature suggestion would it be possible to allow the user to select the width, gutter, and columns? This would then make it useful for aligning no matter which grid your working with, not just 960.
[...] badlyDrawnToy created a bookmarket for the 960.gs grid overlay. I modified it for Bluetrip. Just drag the link below to your bookmarks toolbar. In Internet Explorer, right click, select ‘Add to favourites’ and then select ‘Links’. It does not work with IE6. [...]
Nice work Howie! (Google Reader filtered out your code, mind.)
Very likely reason it doesn’t work in IE6 is that it has a 508 char limit on bookmarklets and yours is 657 chars. If you reduce it down to just load your library, and have all the guts in there, you’ll get under that limit:
javascript:(function(){document.body.appendChild(document.createElement(‘script’)).src=’http://www.yoursite.com/stuff/bookmarklet.js’;})();
Simon. The code is a little more complex than simply writing in the script element, as it first loads jQuery and then the custom script.
The code fist checks to see if jQuery is already loaded; if not the script is added. If it does exist, it checks the version, and updates if necessary. One further complication, is that the code must wait for jQuery to initialise before downloaded the second custom script.
Hmmm, much trickier than mine! But couldn’t all that be done in a download, which triggers further downloads? The key here is to just get the Bookmarklet component down to under 508 chars for broken IE.
(The reason I care about IE6 is it’s a critical target platform for me. It’s STILL in the SOE here. Gah! Not that I need your bookmarklet for work purposes, just had to solve the problem myself just now.)
@Simon – Yes, I guess I could/should have done this. I decided that web developers are unlikely to be designing their grid layouts in IE6. Could be wrong, which would be scary!
Seemed like overkill to make 3 HTTP requests to load the script. Here’s the code used
http://www.badlydrawntoy.com/static/960grid/js/960grid-bookmarklet.js
When I first started this and was trying to get Firefox et al installed, I was told by the support people to develop in IE6 and Word… Yeesh!
The reason IE6 might be handy is for debugging a bog-standard IE6 install, which is fiendishly difficult. I find XRAY incredibly handy for this (http://www.westciv.com/xray/)
I’m looking for a javascript grid-based page editor, for lack of a better term. Some javascript code that takes a set of vanilla html div blocks and allows you to order them/move them/expand contract and maintains the grid system in a fixed width interface, like 12 column 960. The javascript generates the right grid code and you can save it or do an XMLHTTPRequest post to save it. Any ideas or have you seen something like this?
do you have a decompressed version of the javascript so I can add a 24 colun grid option? I can likely edit it myself unless you want to add it which would be nice heh. Email me if you do, thanks.
That is indeed very handy particularly with the 12 and 16 grid option. Would really help if there is a way to adjust the color overlay as if you have the same color on the page you might find it a bit harder to track it.
Awesome. THANK YOU!
Really useful. Thanks.
Works great and so useful! Thank you very much!
Absoluty perfect. Thanks
Brilliant. It would be great if grid colours could be chosen.
Really nice job, thanks for sharing it with everybody else.
Perhaps Howie is a Manchester City supporter. He wouldn’t want to give you a choice of colour in case you chose one that wasn’t blue.