Controlling the event-handling layer

The script uses an invisible layer to handle 'mouseout events' from the menus. By default this layer stretches to the width and height of the browser window, but there are a few situations where being able to control it is useful.

In the following examples, the event-handling layer (from here on referred to as grid) is coloured red to highlight it. This screenshot shows its default size:

Now suppose you've disabled the resize/reload mechanism. When the browser window is made smaller, horizontal scrollbars will appear, even if the rest of your page content is able to contract, because the grid-size is defined onload.

You can overcome this by manually reducing the width and height of the grid; it only really needs to be big enough to go underneath all the menus - a bit longer than the lowest, and a bit wider than the farthest-right. Two variables in custom.js control this:

var gridWIDTH = 0;     // override grid width
var gridHEIGHT = 0;     // override grid height

If set to zero then the default size is used, but any larger values overrides the default and the grid is drawn at the size you specify. For example, these values:

var gridWIDTH = 650
var gridHEIGHT = 350;

Will produce this:

Actually gridHEIGHT isn't a necessary control most of the time, because its likely that your pages will have a vertical scrollbar anyway, so reducing the window height isn't going to matter. But you might have a couple of pages of all-above-the-fold content, where it could be useful.

In this example the navbar itself is set to stretch the width of the screen - a size also determined by retrieving the value for the internal-width of the browser window. So in this case, our non-refreshing page is still going to get horizontal scrollbars if it's made any smaller. We can properly solve this issue by overriding the document width value and telling the script how big we want it to be:

var documentWIDTH = 0;     // override document width

Again, the default is used if set to 0, but any larger value overrides it. So these values:

var gridWIDTH = 650;
var gridHEIGHT = 350;
var documentWIDTH = 750;

Will produce this:

This is incredibly useful: If your page is designed to a fixed- or practical-minimum width, setting the grid and document width to the same value as this will mean resize/refreshing is not even useful, nevermind necessary - no horizontal scrollbars are ever going to appear that wouldn't do so anyway. If you have mac/ie users as your principal audience, you can also use documentWIDTH to overcome its issue with horizontal scrollbars.

You can set a value for documentWIDTH and leave gridWIDTH at 0, and the grid will inherit the document width. Any value greater than 1 will override the default, so you should ensure that documentWIDTH is at least equal to the combined width of your main link cells, or numerous problems will arise: remember that as far as the script is concerned, the value you specify here is the width of the window.

Since the amount of navbar stretching is determined by the document width, you could set gridWIDTH to a higher value than documentWIDTH, and thereby control the stretched navbar while extending the grid to cover all the menus. For example: you have a fixed-width layout of 750 pixels, and you want your navbar to be centrally aligned within that fixed space. By defining documentWIDTH at 750 with menuALIGN set to "center", the nav will be positioned in the center of that space, while the grid can be extended to cover the right-most menu:

Of course all of this is easy when you can see, so there's one more variable for testing:

var redGRID = true;     // show a red grid

Interestingly the need for this control became apparent when I overhauled the rest of my site to use these menus. I just didn't want to refresh onresize - it felt too intrusive - but I wanted a way out of the negative side-effects of not using it; so this is what I came up with. It was much easier to implement than it has been to document!