Toggle ninesixty theme (960) grids with js

I love the "show-grid" body class, but sometimes you don't want to see the pretty grids when you developing.

As it is right now, you have to edit your subtheme bodytag as in remove or rename the "show-grid" class to disable the grids, then add it or rename is to show-grid again.

I was tired of doing that every time I wanted to see how the site really looked without the grids, so I made a little JS-Snippet.

Include the js-file in your subtheme and press "shift + g" to toggle.

To include this, edit your .info theme file and paste this

; The grid toggle javascript
scripts[] = gridtoggle.js

If you are in a <textarea> or an <input> the script will not toggle (It will think you are typing as usually).

It's tested on my Windows XP machine with

• IE8
• IE7 (compability mode in IE8)
• FF 3.6
• Chrome 4.0.249.78
• Safari 4.0.3

I have no good idea how to integrate this in a smart way if the ninesixty maintainers decide to include this in future releases.

Demo

Press shift+g on this page.

Bookmarklet

If you dont want to inlcude the JS-file, you can also user this bookmarklet. Simply click and drag the bookmarklet image to your bookmark field in your browser. Then all you have to do is to click on the bookmarket and the grid will toggle on and off.