PDA

View Full Version : Has anyone modified 'real menu' to include sub menus?

stuartwhiteford
12-11-2002, 12:23 PM
Hi folks,

I've modified Jordan Neill's Real Menu script so that when I rollover a link in the menu a submenu pops up. The problems are:

1. I cant get the original menu to stay visible and active.
2. I'm not sure how to position the sub menu correctly in relation to the link in the main menu.

No doubt other problems will arise, but I'll settle for solutions to these two for now.

TIA,
Stuart.
Roy Sinclair
12-11-2002, 06:49 PM
Uh, if you want help it might not hurt to post a link to the code or the code itself (preferably in a fashion where it won't take a lot of work simply to build something to allow it to be tested).
stuartwhiteford
12-12-2002, 08:24 AM
Here is the code that I have just now:

--Realmenu.htm--

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="../realmenu.js" type="text/JavaScript"></script>

</head>

<body>
<p oncontextmenu="showMenu(); return false;">Menu</p>
</body>
</html>

Realmenu.js is attached as a text file.
stuartwhiteford
12-12-2002, 08:28 AM
Text file didn't appear to post, here's the js code.

--realmenu.js--

subMenuItems = new Array();
subMenuItemNum = 0;

function addSubMenuItem(text, url, img){
if(img) subMenuItems[subMenuItemNum] = new Array(text, url, img);
else if(text) subMenuItems[subMenuItemNum] = new Array(text, url);
else subMenuItems[subMenuItemNum] = new Array();
subMenuItemNum++;
}

subMenuWidth = 148; //sub menu width
subMenuHeight = 176; //sub menu height
subMenuDelay = 50; //delay before sub menu appears
subMenuSpeed = 8; //speed which sub menu appears (lower=faster)
subMenuOffset = 0; //offset of sub menu from mouse pointer

addSubMenuItem("Site","addsite.asp");
addSubMenuItem("Service","addservice.asp");
addSubMenuItem("Activity","addactivity.asp");
addSubMenuItem("Task","addtask.asp");
addSubMenuItem("Hazard","addhazard.asp");

subMenuContent = '<table id="subMenu" width="0" height="0" cellspacing="0" cellpadding="0" style="font:menu;color:menutext;">\
<tr height="1">\
<td style="background:threedlightshadow" colspan="4"></td>\
<td style="background:threeddarkshadow"></td>\
</tr>\
<tr height="1">\
<td style="background:threedlightshadow"></td>\
<td style="background:threedhighlight" colspan="2"></td>\
<td style="background:threedshadow"></td>\
<td style="background:threeddarkshadow"></td>\
</tr>\
<tr height="10">\
<td style="background:threedlightshadow"></td>\
<td style="background:threedhighlight"></td>\
<td style="background:threedface">\
<table cellspacing="0" cellpadding="0" nowrap style="font:menu;color:menutext;cursor:default;">';
for(n=0;n<subMenuItems.length;n++){
if(subMenuItems[n][0] && subMenuItems[n][2])
subMenuContent += '<tr height="17" onMouseOver="this.style.background=\'highlight\';this.style.color=\'highlighttext\';" onMouseOut="this.style.background=\'threedface\';this.style.color=\'menutext\';" onClick="parent.window.location.href=\'' + subMenuItems[n][1] + '\'">\
<td style="background:threedface" width="1" nowrap></td>\
<td width="17" nowrap><img src="' + subMenuItems[n][2] + '"></td>\
<td nowrap>' + subMenuItems[n][0] + '</td>\
<td width="21" nowrap></td>\
<td style="background:threedface" width="1" nowrap></td>\
</tr>';
else if(subMenuItems[n][0])
subMenuContent += '<tr height="17" onMouseOver="this.style.background=\'highlight\';this.style.color=\'highlighttext\';" onMouseOut="this.style.background=\'threedface\';this.style.color=\'menutext\';" onClick="parent.window.location.href=\'' + subMenuItems[n][1] + '\'">\
<td style="background:threedface" width="1" nowrap></td>\
<td width="17" nowrap></td>\
<td nowrap>' + subMenuItems[n][0] + '</td>\
<td width="21" nowrap></td>\
<td style="background:threedface" width="1" nowrap></td>\
</tr>';
else
subMenuContent += '<tr>\
<td colspan="5" height="4"></td>\
</tr>\
<tr>\
<td colspan="5">\
<table cellspacing="0">\
<tr>\
<td width="2" height="1"></td>\
<td width="0" height="1" style="background:threedshadow"></td>\
<td width="2" height="1"></td>\
</tr>\
<tr>\
<td width="2" height="1"></td>\
<td width="100%" height="1" style="background:threedhighlight"></td>\
<td width="2" height="1"></td>\
</tr>\
</table>\
</td>\
</tr>\
<tr>\
<td colspan="5" height="3"></td>\
</tr>';
}
subMenuContent += '</table>\
</td>\
<td style="background:threedshadow"></td>\
<td style="background:threeddarkshadow"></td>\
</tr>\
<tr height="1">\
<td style="background:threedlightshadow"></td>\
<td style="background:threedhighlight"></td>\
<td style="background:threedface"></td>\
<td style="background:threedshadow"></td>\
<td style="background:threeddarkshadow"></td>\
</tr>\
<tr height="1">\
<td style="background:threedlightshadow"></td>\
<td style="background:threedshadow" colspan="3"></td>\
<td style="background:threeddarkshadow"></td>\
</tr>\
<tr height="1">\
<td style="background:threeddarkshadow" colspan="5"></td>\
</tr>\
</table>';

subMenuPopup = window.createPopup();
subMenuPopup.document.body.innerHTML = subMenuContent;


function showSubMenu(){
subMenuXPos = 500;
subMenuYPos = 400;
//subMenuXPos = event.clientX + subMenuOffset;
//subMenuYPos = event.clientY + subMenuOffset;

subMenuXIncrement = subMenuWidth / subMenuSpeed;
subMenuYIncrement = subMenuHeight / subMenuSpeed;

subMenuTimer = setTimeout("openSubMenu(0,0)", subMenuDelay);

return false;
}


function openSubMenu(sheight, swidth){
siHeight = sheight;
siWidth = swidth;

subMenuPopup.show(subMenuXPos, subMenuYPos, siWidth, siHeight, document.body);

if(siHeight < subMenuHeight)
subMenuTimer = setTimeout("openSubMenu(siHeight + subMenuYIncrement, siWidth + subMenuXIncrement)", 1);
else
clearTimeout(subMenuTimer);

}

//////////////////////////////////////////////////////////////////////////////////

menuItems = new Array();
menuItemNum = 0;

function addMenuItem(text, url, img){
if(img) menuItems[menuItemNum] = new Array(text, url, img);
else if(text) menuItems[menuItemNum] = new Array(text, url);
else menuItems[menuItemNum] = new Array();
menuItemNum++;
}

menuWidth = 100; //menu width
menuHeight = 176; //menu height
menuDelay = 50; //delay before menu appears
menuSpeed = 8; //speed which menu appears (lower=faster)
menuOffset = 0; //offset of menu from mouse pointer

addMenuItem("Add New");
addMenuItem("Delete","http://javascriptkit.com");
addMenuItem("Import","http://www.dynamicdrive.com");
///////////////////////////////////////////////////////////////////////////////
// do not edit the code below, it is required for the menu to work correctly
///////////////////////////////////////////////////////////////////////////////


if(window.navigator.appName == "Microsoft Internet Explorer" && window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE") + 5, window.navigator.appVersion.indexOf("MSIE") + 8) >= 5.5)
isIe = 1;
else
isIe = 0;

if(isIe){
menuContent = '<table id="rightMenu" width="0" height="0" cellspacing="0" cellpadding="0" style="font:menu;color:menutext;"><tr height="1"><td style="background:threedlightshadow" colspan="4"></td><td style="background:threeddarkshadow"></td></tr><tr height="1"><td style="background:threedlightshadow"></td><td style="background:threedhighlight" colspan="2"></td><td style="background:threedshadow"></td><td style="background:threeddarkshadow"></td></tr><tr height="10"><td style="background:threedlightshadow"></td><td style="background:threedhighlight"></td><td style="background:threedface"><table cellspacing="0" cellpadding="0" nowrap style="font:menu;color:menutext;cursor:default;">';
for(m=0;m<menuItems.length;m++){
if(menuItems[m][0] && menuItems[m][2])
menuContent += '<tr height="17" onMouseOver="this.style.background=\'highlight\';this.style.color=\'highlighttext\';" onMouseOut="this.style.background=\'threedface\';this.style.color=\'menutext\';" onClick="parent.window.location.href=\'' + menuItems[m][1] + '\'"><td style="background:threedface" width="1" nowrap></td><td width="17" nowrap><img src="' + menuItems[m][2] + '"></td><td nowrap>' + menuItems[m][0] + '</td><td width="21" nowrap></td><td style="background:threedface" width="1" nowrap></td></tr>';
else if(menuItems[m][0])
menuContent += '<tr height="17" onMouseOver="this.style.background=\'highlight\';this.style.color=\'highlighttext\';parent.showSubMenu();" onMouseOut="this.style.background=\'threedface\';this.style.color=\'menutext\';" onClick="parent.showSubMenu();"><td style="background:threedface" width="1" nowrap></td><td width="17" nowrap></td><td nowrap>' + menuItems[m][0] + '</td><td width="21" nowrap></td><td style="background:threedface" width="1" nowrap></td></tr>';
else
menuContent += '<tr><td colspan="5" height="4"></td></tr><tr><td colspan="5"><table cellspacing="0"><tr><td width="2" height="1"></td><td width="0" height="1" style="background:threedshadow"></td><td width="2" height="1"></td></tr><tr><td width="2" height="1"></td><td width="100%" height="1" style="background:threedhighlight"></td><td width="2" height="1"></td></tr></table></td></tr><tr><td colspan="5" height="3"></td></tr>';
}
menuContent += '</table></td><td style="background:threedshadow"></td><td style="background:threeddarkshadow"></td></tr><tr height="1"><td style="background:threedlightshadow"></td><td style="background:threedhighlight"></td><td style="background:threedface"></td><td style="background:threedshadow"></td><td style="background:threeddarkshadow"></td></tr><tr height="1"><td style="background:threedlightshadow"></td><td style="background:threedshadow" colspan="3"></td><td style="background:threeddarkshadow"></td></tr><tr height="1"><td style="background:threeddarkshadow" colspan="5"></td></tr></table>';

menuPopup = window.createPopup();
menuPopup.document.body.innerHTML = menuContent;
}

function showMenu(){
menuXPos = event.clientX + menuOffset;
menuYPos = event.clientY + menuOffset;

menuXIncrement = menuWidth / menuSpeed;
menuYIncrement = menuHeight / menuSpeed;

menuTimer = setTimeout("openMenu(0,0)", menuDelay);

return false;
}


function openMenu(height, width){
iHeight = height;
iWidth = width;

menuPopup.show(menuXPos, menuYPos, iWidth, iHeight, document.body);

if(iHeight < menuHeight)
menuTimer = setTimeout("openMenu(iHeight + menuYIncrement, iWidth + menuXIncrement)", 1);
else
clearTimeout(menuTimer);
}
Roy Sinclair
12-12-2002, 06:30 PM
You are missing the createPopup() function so that's one problem, the other problem I noticed is that you have a nested quotes conflict.

Where your menus are defined you have an outer set of single quotes and most internal quote usage is done with double quotes but there are places where you have single quotes inside there and those single quotes will terminate your strings instead of being included. You need to escape those single quotes so they'll be included in the string by prefixing them with the backslash character (\). Also make sure those lines where you're building those long strings are single lines or break them up into multiple strings (they came into here as multiple lines but that may be an artifact of the board here).

Fixing those things should get you going (or at least closer).
Roy Sinclair
12-12-2002, 06:32 PM
Using a browser like Mozilla with it's javascript console makes finding errors in your script a lot easier. If you must use IE at least make sure IE is set up to inform you when script errors occur instead of silently terminating your script.