JS Grid Overlay
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.
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’.
Try it on the example below - click in the iframe and then press Control and ;
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.
1 2 var pageid = document.getElementsByTagName("body").id; grid.init("template", "/_templates/" + pageid + ".jpg", "left top", "no-repeat");