< Pete Goodman Web developer >

Labs - Javascript grid overlay

Sunday 6th April 2008, 21:07

When working with layouts demanding cross browser pixel perfection, it is often beneficial to be able to underlay or overlay the design grid or a graphic to check alignment.

This is a javascript technique i developed a few years ago that allows you to do just that. To show or hide the design grid (or other graphic), just import the following javascript file, and then use the keys Control and ; to show or hide the grid.

View grid.js file

There are numerous other useful techniques on the web that offer similar grid-based functionality, but this one differs slightly as it allows you to use a graphic, change it's positioning depending on your situation, and use it either within an element or for the whole page.

The function call

The function call takes four variables:

  • gridElement: the id or html tag to place the grid behind
  • gridSrc: the image source for the grid - relative to the html page
  • gridPos: the CSS positioning statement (eg 'left top', '50% 50%')
  • gridRepeat: the CSS repeat value (eg 'no-repeat','repeat-x','repeat-y')

If you would like to overlay a grid (or any other image) over a full design, when you define the gridElement variable, put in an element that does not exist in the document, for example the word 'template'.

Call the following function when the page has finished loading (or preferably when the DOM has finished loading).


// initialise javascript grid overlay
grid.init("box", "./grid.gif", "left top", "no-repeat");

Try it on the example below - (try pressing Control and ;)

heading

sub-heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus augue nibh, congue vel, fringilla eu, cursus sed, lectus. Nulla ac purus nec tellus aliquam convallis. Cras porttitor odio et elit gravida vehicula. Morbi consequat dui sed tortor. Maecenas sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non augue. Vestibulum nisl mauris, molestie ut, tincidunt ut, malesuada et, diam. Fusce vulputate nulla sit amet arcu ultricies scelerisque. Cras nisi. Cras quis lectus vel turpis placerat pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis odio. Nullam vel ligula ac erat pharetra feugiat. Cras pulvinar accumsan justo. Curabitur condimentum mattis arcu. Sed vulputate. Praesent nulla lorem, venenatis et, hendrerit nec, interdum eu, eros.

(also, here's an example of how you could use this technique to overlay a whole design over a page build)

One function call for the entire site:

If you rename all image templates to their corresponding page ids, and place them in a directory called "_templates" you can have every page call up its template automatically. This is the technique i use at the start of every new site build.

		
var pageid = document.getElementsByTagName("body")[0].id;

grid.init("template", "/_templates/" + pageid + ".jpg", "left top", "no-repeat");

Update - 29/01/2009:

Richard Hallows and Michael Allanson have updated this as a jquery plugin, with additional functionality. It's available from google code

Comments

Be the first person to comment on this lab...

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.