linkedin

grid960 – a grid overlay bookmarklet for 960.gs

This bookmarklet has now been updated to support 24 columns
Please also see grid960 bookmarklet – now with 24 columns/

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

grid-bookmarklet

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’.

grid960

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.

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() {
		$("body").addGrid(12);
	});
</script>

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,
	opacity:.6
};
$("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.

Replacing target=”_blank” for Strict XHTML using JQuery (redux)

Some time ago, I provided a simple JQuery solution for replacing target="_blank" when writing Strict XHTML. However, one commenter recently pointed out that my solution does not work if the rel attribute contains more than one value e.g. rel="external nofollow"

Well, JQuery to the rescue again. A very slight modification to the Attribute Filter fixes this issue. The code now reads: Continue reading

Yahoo Pipes and JQuery : Goodbye Same Origin Policy

I was chatting yesterday with my friend Simon about my somewhat late discovery of Yahoo! Pipes. I knew about it, I’d just never played with it. Pipes is ideal if you’re looking to create a mash-up from RSS feeds. Simon asked if Pipes were constrained by the Same Origin Policy whereby XHR requests are restricted to the domain serving the original page. I said I’d look into it.

And so I did. And the answer is No. It is indeed possible to mash-up content from a variety of RSS feeds all within the client Javascript. Whilst there are a number of ways to work around the Same Origin Policy (using a server-side proxy; dynamically creating a script tag), the beauty of Pipes is that it can return a JSONP response. By providing a callback function as an input argument, it is possible to perform cross-domain requests. So, Yahoo! Pipes acts as a conduit between a normal RSS feed (or any other content) and a JSONP response. Continue reading