DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VI (v3.06) | 6 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VI (v3.06) | 6

Logo

Hierarchical Menus Ver. 3 - Addendum VI (v3.06)
fixes and improvements for Navigator


The Cursor Problem Revisited

Now that we have omitted the link tags, we are faced with one of the problems that made us include them in the first place: the i-bar cursor:


Since the item text is not wrapped in an <A> tag, it is plain text, which gets an insert (i-bar) cursor by default

Outside the item text, the default (arrow) cursor appears

This is the look we want to achieve: A default cursor for both text and blank parts of the item.

We can force a default cursor in Navigator 4 by placing a "dummy" transparent layer over each item. The user sees the text through the layer, but the cursor doesn't and remains in its default form.

Recall that if the NSfontOver parameter variable is true, the contents of an item layer are rewritten every time the user mouses over or out of the item, to change the font color. If we include a dummy layer in each item, as we want to do, then this layer would also have to be created every time the mouse events fire. We need to minimize the HTML written upon mouse events, so we have to come up with a better idea.

The solution is to create two child layers for every item. One layer, created first, is the text-containing layer. This is the one we will write to to change the font color. The dummy layer is created second, and therefore placed over the text layer. It will be created only once.

The component parts of a menu would therefore look like this:


The item layers are created as before but only their background color is specified. This is the color that changes with mouse events.

Each item layer has a child transparent layer that includes the item text. This layer is updated if NSfontOver is true.

Each item layer also has a child transparent dummy layer, created once and never written to that "floats" on top of the text layer, forcing the default cursor.

The two children layers are placed within the parent item layer as in the illustration above. Navigator's powerful, fast, new Layer() constructor does not mind creating layers. There is no loss of speed or stability.

On the next page, we'll discuss the necessary code additions and modifications to produce this new behavior.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Mar 09, 1999
Revised: Mar 09, 1999

URL: http://www.webreference.com/dhtml/column21/addendum6/col21addVI5.html