I recently received a request to update the grid960 bookmarklet to support 24 columns. I hadn’t realised that 960.gs had been updated.
So, here it is!
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’.
For further information on this bookmarklet, see my previous post
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.
Ian commented on April 23rd, 2009 at 1:23 pmVery 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?
robert commented on May 22nd, 2009 at 12:52 amdo 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.
David commented on September 30th, 2009 at 2:29 amAwesome. THANK YOU!
Really useful. Thanks.
Works great and so useful! Thank you very much!
Absoluty perfect. Thanks
Faramarz commented on May 8th, 2010 at 11:06 amBrilliant. 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.
Thank you for the great tool!
Another option is to use a plugin for firefox FogGrid.
Sorry GridFox not FogGrid
badlyDrawnToy is the blog of Howie Weiner, a Manchester based freelance web developer.
Howie specialises in Django, PHP and Java web application development.
This site is no longer updated. You can now follow Howie at howieweiner.co.uk
Many thanks for this great tool! :-)
Great tool, Howie, and thanks for sharing. However, I noticed that when you have a layout with absolutely positioned elements the grids never show up. I’m going to try playing around with the script a bit and I’ll post back here what I find out. :)
The jQuery detection logic you use now checks for a version of jQuery that is no longer the most recent version. So even if I’ve already loaded the latest version of jQuery the bookmarklet still loads v1.4.2.
Perhaps instead of explicitly checking for v1.4.2 you should use feature detection to check for whatever critical feature it is that you need in v1.4.2 and then load jQuery only if that feature doesn’t exist. Since that feature will still exist in later versions it won’t overwrite newer versions of jQuery.
Good point Richard. Gosh, I hardly use this tool as I don’t do much front-end development these days, but clearly others like it. Now that jQuery 1.5 is out I’ll have a rethink.
The tool is only used for development, so loading the extra library on the fly isn’t a biggest crime. The important thing is that it does not conflict with an in place library. Most people developing a site will be using the latest jQuery release. Perhaps I should just use the latest.
Shame that none of the CDN versions are labelled ‘latest’ :-/
Actually, the Google CDN does have a ‘latest’ version. Just use https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js and it will always serve the latest 1.x version. (They haven’t upgraded to 1.5 yet as it was just released the other day…)
How does one extending the grid past the initial page fold? I am on Firefox 4.0.1 (Mac-Intel)
Is it possible to play with the alignment of the grid overlay? For example, shift it x number of pixels to the left or right? It might just be the site I am looking at, but nothing lines up with the grid, including the main content area. If I can shift the grid to align with the content area, then I can at least determine if the elements are out of whack or the whole page is out of whack…
This tool is wonderful.Many thanks for sharing.