Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

cascading menus - some helpful code - and questions

Status
Not open for further replies.
Dragonfish

Dragonfish

Programmer
Apr 25, 2001
62
UG
Something for beginners and experts. I´ve found some code that creates cascading Menubars - and I´m not really sure how it works. First of all the three files involved so that everyone can try it out:

main10.html
menucontext.js
stylemenu.js

<html>
<head>
<title>Test Page</title>
<meta name="Author" content="Ketan V. Mehta">
<style>
all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:hover {color: red;}
A.mess {text-decoration:none; text-align:center;}
</style>
</head>

<body onResize="window.location.reload()" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<script language="JavaScript" src="stylemenu.js"></script>
<script language="JavaScript" src="menucontext.js"></script>
<script language="JavaScript">
showToolbar();
</script>
<br>
<br>
</p>
</body>
</html>


function showToolbar()
{

// This is the content of menucontext.js
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);

menu = new Menu();
menu.addItem("oneid", "One", "One", null, null);
menu.addItem("twoid", "Two", "Two", null, null);
menu.addItem("threeid", "Three", "Three", null, null);
menu.addItem("fourid", "Four", "Four", null, null);

menu.addSubItem("oneid", "&nbsp;Hotmail", "Hotmail", " menu.addSubItem("oneid", "&nbsp;yahoo", "Yahoo", " menu.addSubItem("oneid", "&nbsp;e-bay", "E-bay", "
menu.addSubItem("twoid", "&nbsp;Tek-Tips", "Tek-tips", " menu.addSubItem("twoid", "&nbsp;yahoo", "Yahoo", " menu.addSubItem("twoid", "&nbsp;excite", "Excite", "
menu.addSubItem("threeid", "&nbsp;Hotmail", "Hotmail", " menu.addSubItem("threeid", "&nbsp;yahoo", "Yahoo", " menu.addSubItem("threeid", "&nbsp;e-bay", "E-bay", "
menu.addSubItem("fourid", "&nbsp;ebay", "ebay", " menu.addSubItem("fourid", "&nbsp;msn", "msn", " menu.addSubItem("fourid", "&nbsp;fox", "fox", "
menu.showMenu();
}


// This is the content of stylemenu.js
// DO NOT EDIT THIS FILE...UNLESS TOLD TO, OR YOU KNOW WHAT YOU ARE DOING!!

if (document.all) {n=0;ie=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;fShow="show"; fHide="hide";}

window.onerror=new Function("return true")
rightX = 0;

function showMenu()
{

document.writeln(HTMLstr);
}

function Menu()
{


//the color of the background of the menu, the type of font
this.bgColor = "#004080";
if (ie) this.menuFont = "bold xx-small Arial";
if (n) this.menuFont = "bold x-small Arial";
// this.fontColor = "white";

this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 1;
this.subMenuPaneBorder = 1;

//this changes the width of the menu pane
this.subMenuPaneWidth = 129;

lastMenu = null;

rightY = 0;
leftY = 0;
leftX = 0;

HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n";
// if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr>";
if (n) HTMLstr += "<td>&nbsp;";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr+= "</div>\n";
// if (n) HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}

function addItem(idItem, text, hint, location, altLocation)
{


var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "|&nbsp;"; //if you put a | before the &nspb you get a horizontal bar appear before the item id's
MENUitem += text;
MENUitem += "&nbsp;|"; //puts a horizontal bar after the itemid's
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie)
{
MENUitem += "<td>\n";
MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
MENUitem += "<a ";
MENUitem += "class=clsMenuItemIE ";
// MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
if (hint != null)
MENUitem += "title='"+hint+"' ";
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += ">";
MENUitem += "&nbsp;&nbsp;&nbsp;&nbsp;\n"; //if you put a | before the &nspb you get a horizontal bar appear before the item id's
MENUitem += text;
// MENUitem += "&nbsp;\n"; //(puts a horizontal bar after the itemid's)
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n";

HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}

function addSubItem(idParent, text, hint, location)
{

var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie)
{
MENUitem += "&nbsp\n";
MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
}

Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
if (ie) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}



// Private declaration
function displaySubMenu(idMainMenu)
{

var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow;

leftX = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
} else if (ie) {
menu = eval(idMainMenu);
submenu = eval(idMainMenu+"submenu.style");
submenu.left = calculateSumOffset(menu, 'offsetLeft') - 5; //no -10, positions the subItemMenu choices -10 to the left
// submenu.top = calculateSumOffset(menu, 'offsetTop') + 30;
submenu.top = menu.style.top+23;
submenu.visibility = fShow;
if (lastMenu != null && lastMenu != submenu) hideAll();

leftX = document.all[idMainMenu+"submenu"].style.posLeft;
rightX = leftX + document.all[idMainMenu+"submenu"].offsetWidth;

leftY = document.all[idMainMenu+"submenu"].style.posTop+
document.all('MainTable').offsetTop+
document.all[idMainMenu+"submenu"].offsetHeight;
rightY = leftY;
}
lastMenu = submenu;
}

function hideAll()
{
if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}

function calculateSumOffset(idItem, offsetName)
{

var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}

function updateIt(e)
{


if (ie)
{
var x = window.event.clientX;
var y = window.event.clientY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
if (n)
{
var x = e.pageX;
var y = e.pageY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}

if (document.all)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
document.onmousedown=hideAll;
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=updateIt;
}

________________________________________________________________________________

It´s interesting to change function showMenu() with an alert to find out what´s actually in HTMLstr
function showMenu()
{
alert(HTMLstr);
document.writeln(HTMLstr);
}

But the real question that´s bugging me for starters is the definition of the objects Menu and the instances menu. Instead of:
menu.addItem("oneid", "One", "One", null, null);
menu.addItem("twoid", "Two", "Two", null, null);
menu.addItem("threeid", "Three", "Three", null, null);
menu.addItem("fourid", "Four", "Four", null, null);

menu.addSubItem("oneid", "&nbsp;Hotmail", "Hotmail", " menu.addSubItem("oneid", "&nbsp;yahoo", "Yahoo", " menu.addSubItem("oneid", "&nbsp;e-bay", "E-bay", "
I would be expecting:

menu.addItem1("oneid", "One", "One", null, null);
menu.addItem2("twoid", "Two", "Two", null, null);
menu.addItem3("threeid", "Three", "Three", null, null);
menu.addItem("fourid", "Four", "Four", null, null);

menu.addSubItem1("oneid", "&nbsp;Hotmail", "Hotmail", " menu.addSubItem2("oneid", "&nbsp;yahoo", "Yahoo", " menu.addSubItem3("oneid", "&nbsp;e-bay", "E-bay", "
Obviously the are newer ways of defining oblects than what´s in the book I´m using.
And so now my questions:

Can anybody explain how the menu here is defined
Can anybody point me to some uptodate documentation about defining objects.
Anybody know of some similar/simpler code that does the same thing

Thanks for your interest - DavidinGermany
 
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
454
rogerte
rogerte
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
446
nanbread
nanbread
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
499
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
135
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
222
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top