Hiermenus Go Forth, XIX - DHTML Lab | 3 | WebReference

Hiermenus Go Forth, XIX - DHTML Lab | 3

Logo

Hiermenus Go Forth, XIX:
Version 4.0.12 - The Complete Script (Full-Window)



Mousing Out Into the Void in IE

In IE, all versions and platforms, a JavaScript error was generated:

  1. if the user moused out of a menu item at the speed of light onto the browser chrome

  2. if the user moused out of a menu item onto an operating system dialog or element. For example, in Windows, pressing Alt-Tab brings up the switch-current-application window. If this window appeared next to a menu and the user moused out of the menu onto the OS window, an error was generated.

The JS error message looked like this:

In IE, the event-bubbling model caused us problems with our item mouse events. These, and the solution proposed, were originally discussed in detail in HM Version 1.0. Suffice to say that, in IE, we always check which element is being moused onto, whenever we mouse out of an adjacent element. This helps us to determine the user's intention, and avoids the screen "flicker" caused by unnecessary multiple event firing:

function HM_f_ItemOut() {
    if (event.srcElement.contains(event.toElement)
      || (event.fromElement.tagName=="IMG" && (event.toElement.contains(event.fromElement))))
        return;
    if ( (!HM_KeepHilite || ((this.tree.TopIsPermanent && (this.tree.treeParent==this)) && !this.menu.hasChildVisible)) && this.hasRollover) {
        with(this.style) {
            backgroundColor = this.tree.BGColor;
            color = this.tree.FontColor
        }
    }
}

If the user mouses onto an object that is not a page element, like the browser chrome or a special OS window that can occupy the same screen space as the browser without the browser losing focus, then the "to" element of the mouseout is non-page-related and not recognized and the error is generated.

If we first check for the validity of the "to" element, the error can be avoided:

function HM_f_ItemOut() {
    if (event.srcElement.contains(event.toElement)
      || (event.fromElement.tagName=="IMG" && (event.toElement && event.toElement.contains(event.fromElement))))
        return;
    if ( (!HM_KeepHilite || ((this.tree.TopIsPermanent && (this.tree.treeParent==this)) && !this.menu.hasChildVisible)) && this.hasRollover) {
        with(this.style) {
            backgroundColor = this.tree.BGColor;
            color = this.tree.FontColor
        }
    }
}


On the next page, more problems solved.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: June 12, 2001
Revised: June 12, 2001

URL: https://www.webreference.com/dhtml/column55/2.html