|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
|
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 5
|
|
| Author |
|
|
Stranger Joined: Nov 9, 2005 Post Count: 3 Status: Offline |
Hello, I need help in positioning a menu inside a table's cell so that it moves with the table. Right now the alignment is defined by the distance from the left side of the page. Thank you very much in advance for any help. This is the menu code: <SCRIPT LANGUAGE="JavaScript"> <!-- CODE 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); } var popTimer = 0; var litNow = new Array(); function popOver(menuNum, itemNum) { clearTimeout(popTimer); hideAllBut(menuNum); litNow = getTree(menuNum, itemNum); changeCol(litNow, true); targetNum = menu[menuNum][itemNum].target; 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].target) hideAllBut(0) else popTimer = setTimeout('hideAllBut(0)', 500); } function getTree(menuNum, itemNum) { itemArray = new Array(menu.length); while(1) { itemArray[menuNum] = itemNum; if (menuNum == 0) return itemArray; itemNum = menu[menuNum][0].parentItem; menuNum = menu[menuNum][0].parentMenu; } } function changeCol(changeArray, isOver) { for (menuCount = 0; menuCount < changeArray.length; menuCount++) { if (changeArray[menuCount]) { newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol; 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(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) { this.isVert = isVert; this.popInd = popInd this.x = x; this.y = y; this.width = width; this.overCol = overCol; this.backCol = backCol; this.borderClass = borderClass; this.textClass = textClass; this.parentMenu = null; this.parentItem = null; this.ref = null; } function Item(text, href, frame, length, spacing, target) { this.text = text; this.href = href; this.frame = frame; this.length = length; this.spacing = spacing; this.target = target; this.ref = null; } function writeMenus() { if (!isDOM && !isIE4 && !isNS4) return; for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) { var str = '', itemX = 0, itemY = 0; for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) { var itemID = 'menu' + currMenu + 'item' + currItem; var w = (isVert ? width : length); var h = (isVert ? length : width); if (isDOM || isIE4) { str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; '; if (backCol) str += 'background: ' + backCol + '; '; str += '" '; } if (isNS4) { str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' + w + '" height="' + h + '" visibility="inherit" '; if (backCol) str += 'bgcolor="' + backCol + '" '; } if (borderClass) str += 'class="' + borderClass + '" '; str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">'; str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>'; if (target > 0) { menu[target][0].parentMenu = currMenu; menu[target][0].parentItem = currItem; if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>'; } str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>'); if (isVert) itemY += length + spacing; else itemX += length + spacing; } if (isDOM) { var newDiv = document.createElement('div'); document.getElementsByTagName('body').item(0).appendChild(newDiv); newDiv.innerHTML = str; ref = newDiv.style; ref.position = 'absolute'; ref.visibility = 'hidden'; } if (isIE4) { document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>'); ref = getSty('menu' + currMenu + 'div'); } 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'; } } var menu = new Array(); // DEFAULTS ++++++++++++++++++++++++++++++ var defOver = '#999999', defBack = '#d3d3d3'; var defLength = 18; menu[0] = new Array(); // ++++++++++++++++ POSITION OF THE MAIN MENU +++++++++++++++++++++++++++ menu[0][0] = new Menu(false, '', 140, 101, 17, '#b22c1b', '#b22c1b', '', 'text'); menu[0][1] = new Item(' Top Menu 1', '#', '', 65, 31, 1); menu[0][2] = new Item(' Top Menu 2', 'http://www.ccc.com', '_new', 175, 31, 2); menu[0][3] = new Item(' Top Menu 3', 'http://ddd.com', '_new', 155, 31, 3); menu[0][4] = new Item(' Top Menu 4', '#', '_new', 120, 10, 4); // Top Menu 1 +++++++++++++++++++++++++++++++++++++ menu[1] = new Array(); menu[1][0] = new Menu(true, '>', 0, 22, 140, defOver, defBack, 'itemBorder', 'itemText'); menu[1][1] = new Item('Link 1', 'hf.htm', '', defLength, 0, 0); menu[1][2] = new Item('Link 2', 'hzfr.htm', '', defLength, 0, 0); menu[1][3] = new Item('Link 3', 'hfh.htm', '', defLength, 0, 0); menu[1][4] = new Item('Link 4', 'htry.htm', '', defLength, 0, 0); menu[1][5] = new Item('Link 5', 'pr.htm', '', defLength, 0, 0); menu[1][6] = new Item('Link 6', 'cm.htm', '', defLength, 0, 0); menu[1][7] = new Item('Link 7', 'cgrr.htm', '', defLength, 0, 0); // Top Menu 2 +++++++++++++++++++++++++++++++++++ menu[2] = new Array(); menu[2][0] = new Menu(true, '>', 0, 22, 120, defOver, defBack, 'itemBorder', 'itemText'); menu[2][1] = new Item('Link 1', 'file.htm', '', defLength, 0, 0); menu[2][2] = new Item('Link 2', 'ces.htm', '', defLength, 0, 0); menu[2][3] = new Item('Link 3', 'us.htm', '', defLength, 0, 0); // Top Menu 3 ++++++++++++++++++++++++++++++++++++++ menu[3] = new Array(); menu[3][0] = new Menu(true, '>', 0, 22, 120, defOver, defBack, 'itemBorder', 'itemText'); menu[3][1] = new Item('Link 1', 'ile.htm', '', defLength, 0, 0); menu[3][2] = new Item('Link 2', 's.htm', '', defLength, 0, 0); menu[3][3] = new Item('Link 3', 'jhs.htm', '', defLength, 0, 0); // Top Menu 4 ++++++++++++++++++++++++++++++++++++++ menu[4] = new Array(); menu[4][0] = new Menu(true, '>', 0, 22, 140, defOver, defBack, 'itemBorder', 'itemText'); menu[4][1] = new Item('Link 1', 'e.htm', '', defLength, 0, 0); menu[4][2] = new Item('Link 2', 'a.htm', '', defLength, 0, 0); menu[4][3] = new Item('Link 3', 'ica.htm', '', defLength, 0, 0); menu[4][4] = new Item('Link 4', 'hyga.htm', '', defLength, 0, 0); menu[4][5] = new Item('Link 5', 'ajgjia.htm', '', defLength, 0, 0); var popOldWidth = window.innerWidth; nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()'); if (isNS4) document.captureEvents(Event.CLICK); document.onclick = clickHandle; function clickHandle(evt) { if (isNS4) document.routeEvent(evt); hideAllBut(0); } function moveRoot() { with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5); } // CODE END --> </script> ---------------------------------------- [Edit 1 times, last edit by elise at Nov 9, 2005 10:34:53 AM] |
||
|
|
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
You don't! They are evil! Throw it away before it swallows your site like a Borg! Widerstand ist Zwecklose! Run for your lives.....!!!!!!!!!! ![]() |
||
|
|
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
Seriously though.... A) You place it in a box (DIV) and center that. b) Do be aware that some 10% of people choose to keep JS turned off. Then there are millions of user agents that do not support JS like cell phones, PDAs, Mobile Game Pads, screen readers, text browsers. All of whom will not be able to see or use your navigation. It would be a good idea to seriously ask yourself if you need JS for your navigation. If so, then be sure to at least add a copy of the navigation in the footer so they have a laternative. |
||
|
|
Stranger Joined: Nov 9, 2005 Post Count: 3 Status: Offline |
Thank you LSW, but when I do it the menu disappears, can you post the code, maybe I am putting it in the wrong place? |
||
|
|
Stranger Joined: Nov 9, 2005 Post Count: 3 Status: Offline |
If it helps, this is the whole page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="1.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- .insidetext { font-family: Verdana; font-size: 11px; font-style: normal; line-height: 18px; font-weight: normal; font-variant: normal; color: #333333; word-spacing: normal; padding: 5px; } .titlelines { border-top: 1px solid #b22c1b; border-right: 1px none #b22c1b; border-bottom: 1px solid #b22c1b; border-left: 1px none #b22c1b; } --> </style> </head> <body> <table WIDTH="780" border="0" CELLPADDING="1" CELLSPACING="0" style="border:1px #B22C1B solid" align="center"> <TR> <TD> </TD> <TD height="19" colspan="6"><div align="right"><font color="#666666" size="1" face="Verdana"><a href="index.htm" class="top">home</a> | <a href="sitemap.htm" class="top">site map</a> | <a href="terms.htm" class="top">terms of use</a> | <a href="cont.htm" class="top">contact us</a><font color="#FFFFFF">....</font></font> </div></TD> </TR> <TR> <TD width="59"> </TD> <TD height="79" colspan="5"> </TD> <TD width="55" height="79"><div align="right"></div></TD> </TR> <TR bgcolor="#b22c1b"> <TD height="19" colspan="3"><SCRIPT LANGUAGE="JavaScript"> <!-- CODE 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); } var popTimer = 0; var litNow = new Array(); function popOver(menuNum, itemNum) { clearTimeout(popTimer); hideAllBut(menuNum); litNow = getTree(menuNum, itemNum); changeCol(litNow, true); targetNum = menu[menuNum][itemNum].target; 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].target) hideAllBut(0) else popTimer = setTimeout('hideAllBut(0)', 500); } function getTree(menuNum, itemNum) { itemArray = new Array(menu.length); while(1) { itemArray[menuNum] = itemNum; if (menuNum == 0) return itemArray; itemNum = menu[menuNum][0].parentItem; menuNum = menu[menuNum][0].parentMenu; } } function changeCol(changeArray, isOver) { for (menuCount = 0; menuCount < changeArray.length; menuCount++) { if (changeArray[menuCount]) { newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol; 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(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) { this.isVert = isVert; this.popInd = popInd this.x = x; this.y = y; this.width = width; this.overCol = overCol; this.backCol = backCol; this.borderClass = borderClass; this.textClass = textClass; this.parentMenu = null; this.parentItem = null; this.ref = null; } function Item(text, href, frame, length, spacing, target) { this.text = text; this.href = href; this.frame = frame; this.length = length; this.spacing = spacing; this.target = target; this.ref = null; } function writeMenus() { if (!isDOM && !isIE4 && !isNS4) return; for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) { var str = '', itemX = 0, itemY = 0; for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) { var itemID = 'menu' + currMenu + 'item' + currItem; var w = (isVert ? width : length); var h = (isVert ? length : width); if (isDOM || isIE4) { str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; '; if (backCol) str += 'background: ' + backCol + '; '; str += '" '; } if (isNS4) { str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' + w + '" height="' + h + '" visibility="inherit" '; if (backCol) str += 'bgcolor="' + backCol + '" '; } if (borderClass) str += 'class="' + borderClass + '" '; str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">'; str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>'; if (target > 0) { menu[target][0].parentMenu = currMenu; menu[target][0].parentItem = currItem; if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>'; } str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>'); if (isVert) itemY += length + spacing; else itemX += length + spacing; } if (isDOM) { var newDiv = document.createElement('div'); document.getElementsByTagName('body').item(0).appendChild(newDiv); newDiv.innerHTML = str; ref = newDiv.style; ref.position = 'absolute'; ref.visibility = 'hidden'; } if (isIE4) { document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>'); ref = getSty('menu' + currMenu + 'div'); } 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'; } } var menu = new Array(); // DEFAULTS ++++++++++++++++++++++++++++++ var defOver = '#999999', defBack = '#d3d3d3'; var defLength = 18; menu[0] = new Array(); // ++++++++++++++++ POSITION OF THE MAIN MENU +++++++++++++++++++++++++++ menu[0][0] = new Menu(false, '', 18, 101, 17, '#b22c1b', '#b22c1b', '', 'text'); menu[0][1] = new Item(' aaaaa', '#', '', 65, 31, 1); menu[0][2] = new Item(' bbbbbbbbb', '#', '_new', 175, 31, 2); menu[0][3] = new Item(' ccccccccccccc', '#', '_new', 155, 31, 3); menu[0][4] = new Item(' ddddddddddddd', '#', '_new', 120, 10, 4); // menu +++++++++++++++++++++++++++++++++++++ menu[1] = new Array(); menu[1][0] = new Menu(true, '>', 0, 22, 140, defOver, defBack, 'itemBorder', 'itemText'); menu[1][1] = new Item('1', '#', '', defLength, 0, 0); menu[1][2] = new Item('2', '#', '', defLength, 0, 0); menu[1][3] = new Item('3', '#', '', defLength, 0, 0); menu[1][4] = new Item('4', '#', '', defLength, 0, 0); menu[1][5] = new Item('5', '#', '', defLength, 0, 0); menu[1][6] = new Item('6', '#', '', defLength, 0, 0); menu[1][7] = new Item('7', '#', '', defLength, 0, 0); // menu +++++++++++++++++++++++++++++++++++ menu[2] = new Array(); menu[2][0] = new Menu(true, '>', 0, 22, 120, defOver, defBack, 'itemBorder', 'itemText'); menu[2][1] = new Item('1', '#', '', defLength, 0, 0); menu[2][2] = new Item('2', '#', '', defLength, 0, 0); menu[2][3] = new Item('3', '#', '', defLength, 0, 0); // menu ++++++++++++++++++++++++++++++++++++++ menu[3] = new Array(); menu[3][0] = new Menu(true, '>', 0, 22, 120, defOver, defBack, 'itemBorder', 'itemText'); menu[3][1] = new Item('1', '#', '', defLength, 0, 0); menu[3][2] = new Item('2', '#', '', defLength, 0, 0); menu[3][3] = new Item('3', '#', '', defLength, 0, 0); // Menu ++++++++++++++++++++++++++++++++++++++ menu[4] = new Array(); menu[4][0] = new Menu(true, '>', 0, 22, 140, defOver, defBack, 'itemBorder', 'itemText'); menu[4][1] = new Item('1', '#', '', defLength, 0, 0); menu[4][2] = new Item('2', '#', '', defLength, 0, 0); menu[4][3] = new Item('3', '#', '', defLength, 0, 0); menu[4][4] = new Item('4', '#', '', defLength, 0, 0); menu[4][5] = new Item('5', '#', '', defLength, 0, 0); var popOldWidth = window.innerWidth; nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()'); if (isNS4) document.captureEvents(Event.CLICK); document.onclick = clickHandle; function clickHandle(evt) { if (isNS4) document.routeEvent(evt); hideAllBut(0); } function moveRoot() { with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5); } // CODE END --> </script> <style> <!-- a.top:link {color: #666666; text-decoration: none; } a.top:active {color: #666666; text-decoration: none; } a.top:visited {color: #666666; text-decoration: none; } a.top:hover {color: #666666; text-decoration: none; } .itemBorder { BORDER-RIGHT:#999999 1px solid; BORDER-TOP:#999999 1px solid; BORDER-LEFT:#999999 1px solid; BORDER-BOTTOM:#999999 1px solid } .itemText { text-decoration: none; color: #b22c1b; font: 10px Verdana } .text { text-decoration: none; color: #ffffff; font: 10px Verdana; font-weight: bold } --> </style> <BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()"> <!-- BODY OF PAGE --> </TD> <TD width="39" height="19"> </TD> <TD width="419" height="19"> </TD> <TD width="49"> </TD> <TD height="19"> </TD> </TR> <TR bgcolor="#FFFFFF"><TD height="391" colspan="4" valign="bottom" bgcolor="#d3d3d3"><p class="insidetext"> </p> <p class="insidetext"> </p> <p class="insidetext"> </p> <p> </p> <p><br> <p class="insidetext"> </p> </TD> <TD colspan="2" bgcolor="#FFFFFF" class="insidetext"><p> </p> <p> </p> <p> </p> <p> </p> <p><br> </p></TD> <TD height="391" valign="bottom" bgcolor="#FFFFFF" class="insidetext"><div align="left"></div></TD> </TR> </table> <p align="center"> </p> </body> </html> |
||
|
|
|
|
|
Current timezone is GMT Sep 5, 2010 9:38:10 PM |