About
This is a jQuery plugin that displays the xy matrix so you can visualize the horizontal & vertical grids. Displays a toggle button in the top-right corner of the browser window. Designed for easy drop-in-anywhere functionality, but I’m no jQuery wizard, so if you can improve anything let me know. To see an example click the “show matrix” button in the corner of the screen. Works great in all modern browsers (i.e., not old IE).
How to use
See the demo HTML file to see how it works and all fits together. Basically just make sure to include xy.css, xy-matrix.css, and xy-matrix.js in your document’s <head> section (or just before the closing </body> tag). Depending on your design, some matrix styles may need some tweaking to dial it in. Also, see the xy-matrix.css stylesheet to pick your choice for the grid background image, either GIF image or base64-encoded string.
Download
The download ZIP file contains the following files:
visual-matrix.htmlxy-matrix.cssxy-matrix.gifxy-matrix.jsxy.css