Connecting Tech Pros Worldwide Help | Site Map

A problem with a menu on my site

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 20th, 2005, 08:46 AM
Kevin Morenski
Guest
 
Posts: n/a
Default A problem with a menu on my site

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';
}
}



 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,662 network members.