HighDots Forums  

A problem with a menu on my site

Javascript JavaScript language (comp.lang.javascript)


Discuss A problem with a menu on my site in the Javascript forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Kevin Morenski
 
Posts: n/a

Default A problem with a menu on my site - 06-30-2003 , 05:04 AM






Hello,

This problem is truly baffling. On my site
(http://www.geekcenter.net/temp.html), I have a javascript menu. At the
bottom of the page is white space that is deleted when you place your mouse
over the link. To be quite honest, I have absolutely NO idea why this
happens. None whatsoever. I do, however, know that its cause lies in the
javascript file I've included below. If anyone could help, I'd greatly
appreciate it.

Thanks,
Kevin

----------------------------------------------

// Javascript File

var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}

function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
}

// Hide timeout.
var popTimer = 0;

// Array showing highlighted menu items.
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].targetmenu;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) +
parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) +
parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
}
}
}

function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].targetmenu)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}

function getTree(menuNum, itemNum) {
// The array index is the menu number. Its contents are null (if the menu
is not a parent)
// or the item number of the menu that has kids (just so that we can light
it up)
itemArray = new Array(menu.length);

while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the hierarchy, return
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
}
}

// Pass an array and a boolean to specify color change, true = over color.
function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol :
menu[menuCount][0].backCol;
// Change the colors of the div/layer background.
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
}
}
}
}

function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++) {
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}
}

function Menu(VerticalMenu, PopoutIcon, x, y, width, overCol, backCol,
borderClass, textClass) {
// True or false - a vertical menu or not
this.VerticalMenu = VerticalMenu;

// The popout icon used (if any) for this menu
this.PopoutIcon = PopoutIcon;

// Position and size settings.
this.x = x;
this.y = y;
this.width = width;

// Colors of menu and items.
this.overCol = overCol;
this.backCol = backCol;

// The stylesheet class used for item borders and the text within items.
this.borderClass = borderClass;
this.textClass = textClass;

// Parent menu and item numbers, indexed later.
this.parentMenu = null;
this.parentItem = null;

// Reference to the object's style properties (set later).
this.ref = null;
}

function Item(text, href, target, length, spacing, targetmenu) {
this.text = text;
this.href = href;
this.target = target;
this.length = length;
this.spacing = spacing;
this.targetmenu = targetmenu;

// Reference to the object's style properties (set later).
this.ref = null;
}

function writeMenu() {
if (!isDOM && !isIE4 && !isNS4) return;
for (currMenu = 0; currMenu < menu.length; currMenu++) with
(menu[currMenu][0]) {
// Variable for holding the HTML for items and the positions of the next
items.
var str = '', itemX = 0, itemY = 0;

// Items start from 1 in the array (0 is menu object).
// Also, they use properties of each item nested in the other with() for
construction.
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with
(menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;

// The width and height of the menu item depending on its orientation
var w = (VerticalMenu ? width : length);
var h = (VerticalMenu ? length : width);

// Create a div or layer text string with appropriate styles/properties.

if (isDOM || isIE4)
str += '<div id="' + itemID + '" style="position: absolute; left: ' +
itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + ';
visibility: inherit; background: #FFFFFF;"';

if (isNS4)
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY +
'" width="' + w + '" height="' + h + '" visibility="inherit"
bgcolor="#FFFFFF"';

if (borderClass)
str += 'class="NormalBorder"';

// Add mouseover handlers and finish div/layer.
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')"
onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';

// Add contents of item (default: table with link inside).
// In IE/NS6+, add padding if there's a border to emulate NS4's layer
padding.
// If a target frame is specified, also add that to the <a> tag.

str += '<table width="' + w + '" border="0" cellspacing="0"
cellpadding="0"><tr><td align="left" height="' + h + '"
onClick="window.location=\'' + href + '\';" style="cursor: hand"
valign="middle"><a class="' + textClass + '" href="' + href + '">' + text +
'</a></td>';

if (targetmenu > 0) {
// Set target's parents to this menu item.
menu[targetmenu][0].parentMenu = currMenu;
menu[targetmenu][0].parentItem = currItem;

// Add a popout indicator.
if (PopoutIcon)
str += '<td align="right">' + PopoutIcon + '</td>';
}

str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');

if (VerticalMenu)
itemY += length + spacing;
else
itemX += length + spacing;
}

if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appe ndChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}

// Insert a div tag to the end of the body with menu HTML in place for
IE4.
if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu
+ 'div" ' + 'style="position: absolute; visibility: hidden">' + str +
'</div>');
ref = getSty('menu' + currMenu + 'div');
}

// In NS4, create a reference to a new layer and write the items to it.
if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4)
menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4)
menu[currMenu][currItem].ref = ref.document[itemName];
}
}

with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
}
}



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.