Fueled by Jon Tan's talk at the Beyond Tellerrand conference, I tested the hashgrid.js for my "About me" page.

While trying to get the baselinegrid play along with relative values instead of the fixed pixel values, I noted a strange behaviour.

I wanted the grid to work only on my wrapping element (in my case the body-tag which I had set up with a width in CSS) and not on the whole document. I figured that, because the grid uses position:absolute to place itself, I only needed to apply position:relative to the css-rules for my body-tag in order to get the grid being "aware" of my desired wrapper. And yes, now the grid sat "inside" my wrap and was not spread over the whole document as by default.

But: As soon as I wanted to display the grid (by toggling with the "g","f" and "h" keys), I noticed that the vertical grids were not shown at all, reason being that they all had inline-css which stated display:none, which I found out after a while by inspecting the generated source code with Firebug. Hmmm.

Looking into the hashgrid.js code I found the reason. On line 248ff:

	function showOverlay() {
		overlay.show();
		overlayVert.css({width: overlay.width()});
		// hide any vertical blocks that aren't at the top of the viewport
		overlayVert.children('.vert').each(function () {
			$(this).css('display','inline-block');
			if ($(this).offset().top > 0 ) {
				$(this).hide();
			}
		});
	}

Inside the if-statement is checked, if the current vertical grid container has an offset().top of "0", ie it is at the top of the page. If not, it will be hidden (thus the display:none; gets applied as inline-css for that container).
Now, if the grid is not working on the whole document, but on a wrapping-container, chances are, that the offset().top value is anything but zero. Instead of checking against a fixed value, it should check against the offset().top value of it's parent element:

	function showOverlay() {
		overlay.show();
		overlayVert.css({width: overlay.width()});
		// hide any vertical blocks that aren't at the top of the viewport
		overlayVert.children('.vert').each(function () {
			$(this).css('display','inline-block');
                        /*if ($(this).offset().top > 0 ) { */
                        /*better: check for parent elements-top: */
			if ($(this).offset().top > $(this).parent().offset().top ) {
				$(this).hide();
			}
		});
	}

With this small change I got the hashgrid.js working with my "wrap", as you can test on the "About me" page, and it still works, if applied as "out of the box", on the whole document.