Helpful Information
 
 
Category: DOM and JSON scripting
simple dhtml menu - event.toElement not working

i'm having an issue with the script below...
Occasionally the related element in the menuMoveConfirmation function is not finding the menu it is over and the menu will become hidden? I have no idea why event.toElement is not working…help... i'm just not seeing something



<script language="JavaScript" type="text/JavaScript">

function Browser() {
var ua = ' ' + navigator.userAgent.toLowerCase();

if (navigator.appVersion.indexOf("Win") > 0) this.OS = "Win";
if (navigator.appVersion.indexOf("Mac") > 0) this.OS = "Mac";

this.isID = (document.getElementById) ? true : false;

this.isIE = ua.indexOf('msie') >= 0;
this.isNN = (ua.indexOf('netscape') >= 0 || ua.indexOf('gecko') >= 0);

var iVersion = parseFloat(navigator.appVersion);
if (this.isIE) {
var sInfo = navigator.appVersion.toLowerCase().indexOf('msie') + 5;
iVersion = parseFloat(navigator.appVersion.substring(sInfo));
} else if (this.isNN){
var sInfo = ua.lastIndexOf('/') + 1;
iVersion = parseFloat(ua.substring(sInfo,ua.length));
}
this.version = iVersion;
}
var browser = new Browser();


function browserMaxX() {
if (browser.isNN) {
maxX = window.scrollX + window.innerWidth;
}
if (browser.isIE && browser.version < 6) {
maxX = document.body.scrollLeft + document.body.clientWidth;
}
if (browser.isIE && browser.version >= 6) {
//maxX = document.documentElement.scrollLeft + document.documentElement.clientWidth;
maxX = document.body.scrollLeft + document.body.clientWidth;
}
return maxX
}

function browserMaxY() {
if (browser.isNN) {
maxY = window.scrollY + window.innerHeight;
}
if (browser.isIE && browser.version < 6) {
maxY = document.body.scrollTop + document.body.clientHeight;
}
if (browser.isIE && browser.version >= 6) {
//maxY = document.documentElement.scrollTop + document.documentElement.clientHeight;
maxY = document.body.scrollTop + document.body.clientHeight;
}
return maxY
}

function getPageOffsetLeft(el) {
var x;
x = el.offsetLeft;
if (el.offsetParent != null)
x += getPageOffsetLeft(el.offsetParent);
return x;
}

function getPageOffsetTop(el) {
var y;
y = el.offsetTop;
if (el.offsetParent != null)
y += getPageOffsetTop(el.offsetParent);
return y;
}
</script>


<script type="text/javascript">
var button, menu;

//Browsers / OS that should get the Drop Down Menus
if ((browser.isIE) && (browser.version >= 5.0) && (browser.OS == "Win")){//IE 5.0+ / Win
browser.isDD = true;
}else if ((browser.isNN) && (browser.version >= 6.0) && (browser.OS == "Win")){//NN 6.0 / Win
browser.isDD = true;
}else{
browser.isDD = false;
}

function openMenu(event, id, direction) {
var x, y;
// is this browser ok to use DD
if (!browser.isDD)
return;
//find objects //
//the button used for this menu
if (window.event) {//ie
button = window.event.toElement.id;
} else {//nn
button = event.currentTarget.id;
}
//the menu
menu = document.getElementById(id);
//if a button or menu dosn't have an id don't use it
if (!button || !menu){
return false;
}
//position menu to button
//set x and y of button
x = getPageOffsetLeft(document.getElementById(button));
y = getPageOffsetTop(document.getElementById(button));
//get button width and heigth
buttonWidth = document.getElementById(button).offsetWidth ;
buttonHeight = document.getElementById(button).offsetHeight;
//get max width and height
maxX = browserMaxX();
maxY = browserMaxY();
//get menu width and height
menuWidth = menu.offsetWidth;
menuHeight = menu.offsetHeight;
//move menu off button
if (!direction){
y = y + buttonHeight;//defalut
}else{
if (direction == "T"){
y = y - menuHeight;
}else if (direction == "R"){
x = x + buttonWidth;
}else if (direction == "L"){
x = x - menuWidth;
}else{
y = y + buttonHeight;//defalut
}
}
//Is menu out of the right viewable space
menuAdjust = x + menuWidth - maxX;
if (menuAdjust > 0){
x = x - menuAdjust;
}
//set xy and display
menu.style.left = x + "px";
menu.style.top = y + "px";
menu.style.visibility = "visible";
//set event handler
menu.onmouseout = closeMenu;
document.getElementById(button).onmouseout = menuMoveConfirmation;
}

function menuMoveConfirmation() {
var current, related;
if (window.event) {
related = window.event.toElement;
} else {
related = event.relatedTarget;
}
if (menu != null && related != menu){
menu.style.visibility = "hidden";
}
}

function closeMenu() {
var current, related;
if (window.event) {
current = this;
related = window.event.toElement;
} else {
current = event.currentTarget;
related = event.relatedTarget;
}
if (current != related && !contains(current, related)){
current.style.visibility = "hidden";
}
}

function contains(a, b) {
// Return true if node a contains node b.
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}










privacy (GDPR)