/    Sign up×
Community /Pin to ProfileBookmark

Inserting Menu inside Table’s Cell

Copy linkTweet thisAlerts:
Nov 09.2005

Let me try this again: can anybody show me the way to insert this menu inside a table’s cell so that it moves with the table? Also, if it’s not possible (which I doubt) can anybody please let me know, so that I can move on? I am willing to pay with Turtle Coins??? No seriously, I am spending way too much time on this… please help. Thank you.
elise

<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>

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoNov 09.2005 — Why not just put your menu in another page, then just put an iframe in the desired cell, with the src of the iframe being your menu page. That way it appears to just be in the table.
Copy linkTweet thisAlerts:
@eliseauthorNov 09.2005 — I don't know why but the menu alone won't appear...

this is the whole page if it helps

<!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;

color: #333333;

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>&nbsp;</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">&nbsp;</TD>

<TD height="79" colspan="5">&nbsp;</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 +++++++++++++++++++++++++++++++++++++

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 +++++++++++++++++++++++++++++++++++

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 ++++++++++++++++++++++++++++++++++++++

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 ++++++++++++++++++++++++++++++++++++++

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);



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



-->

</style>


<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">

<!-- BODY OF PAGE -->

</TD>

<TD width="39" height="19">&nbsp;</TD>

<TD width="419" height="19">&nbsp;</TD>

<TD width="49">&nbsp;</TD>

<TD height="19">&nbsp;</TD>

</TR>

<TR bgcolor="#FFFFFF"><TD height="391" colspan="4" valign="bottom" bgcolor="#d3d3d3"><p class="insidetext">&nbsp;</p> <p class="insidetext">&nbsp;</p>

<p class="insidetext">&nbsp;</p> <p>&nbsp;</p> <p><br>

<p class="insidetext">&nbsp;</p>

</TD>

<TD colspan="2" bgcolor="#FFFFFF" class="insidetext"><p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><br>

</p></TD>

<TD height="391" valign="bottom" bgcolor="#FFFFFF" class="insidetext"><div align="left"></div></TD>

</TR>

</table>


<p align="center">&nbsp;</p>

</body>

</html>
×

Success!

Help @elise spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...