473,387 Members | 1,628 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Cascading menus in Javascript

I found this script for cascading menus, however, I cannot reach the
author to solve the bug I am having when I add a second menu to it.
My problem is this:

If I click on the first link, the menu displays well. If I then click
on the second link, the first menu from the first link still displays.

How do I get make the first menu disappear when I click on the second
and vice versa? Please help...thanks.

Code is as follows:

/************************************************** ****
* HMenu.js - v. 1.05 000710 *
* Cascading menu creation system *
* by Aaron Prenot *
* Copyright (c) 2000 Aaron Prenot *
* http://www.redrival.com/aprenot *
* *
* Published and Documented at *
* o www.redrival.com/aprenot *
* o www.webdevelopersjournal.com *
* *
* You may use this code on a public web site only *
* if this entire copyright notice appears *
* unchanged. We would also appreciate you *
* creating a link to *
* http://www.webdevelopersjournal.com somwhere on *
* your site. *
* *
* *
* Please send questions and bug reports to: *
* ap*****@hotmail.com *
************************************************** ****/

<br>
<br>
<STYLE TYPE="text/css">
..menu {position: absolute;
font-family: MS Sans Serif;
font-size: 10pt;
background-color: menu;
color: menutext;
border: 2px threedhighlight outset;
cursor: default;
visibility: hidden;
line-height: 140%;}

..visibleMenu {position: absolute;

font-family: MS Sans Serif;
font-size: 10pt;
background-color: menu;
color: menutext;
border: 2px threedhighlight outset;
cursor: default;
visibility: visible;
line-height: 140%;}

..menuItem {color: menutext;
background-color: menu;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;}

..menuItemOver {color: highlighttext;

background-color: highlight;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;}

..menuItemOver A {color: highlighttext;

background-color: highlight;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;
cursor: default;}

..menuItem A {color: menutext;
background-color: menu;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;
cursor: default;}

..more {font-family: WebDings;
text-align: right;
z-index: 100;
position:relative;}

</style>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var menus = new Array();
var activeItem = null;
var IE4 = ((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion) >= 4 ) &&
!(navigator.appVersion.indexOf("5") > -1 ));

function Menu(){

this.id = "";
this.subMenus = new Array();
this.items = new Array();
this.hasChildren = false;
this.isChild = false;
this.parentMenu = null;
this.parentItem = null;

}

function Item(){

this.id = "";
this.hasMenu = false;
this.menu = null;
this.parentMenu = null;
}

function initMenu(){

// test for IE4+, it won't work otherwise
if(!document.all) return false;

findMenus();
menuContainer.activeMenu = null;
menuContainer.closeAll = closeAll;

attachMenus();

}

function findMenus(){

var cTag = menuContainer.children;
for(var i=0; i < cTag.length; i++){

tcTag = cTag[i];
if(tcTag.className == "menu"){

var tMenu = findSubMenus(tcTag);
menus[menus.length] = tMenu;
}
}

var tHTML = "<div id=\"menuContainer\">";
for(var i=0; i < menus.length; i++){
var tcTag = menus[i]
tHTML += moveHTML(tcTag);
}

tHTML += "</div>";
menuContainer.outerHTML = "";
document.body.innerHTML += tHTML;

for(var i=0; i < menus.length; i++){
var tcTag = menus[i];
setupMenu(tcTag);

}

}

function findSubMenus(menu){

var cMenu = menu.children;
var tMenu = new Menu();
tMenu.id = menu.id;
for(var i=0; i < cMenu.length; i++){
var tcMenu = new Item();
tcMenu.id = cMenu[i].id;
if(tcMenu.id.indexOf("subMenu") != -1){
++i;

var subMenu = cMenu[i];
tMenu.subMenus[tMenu.subMenus.length] =
findSubMenus(subMenu)

tMenu.subMenus[(tMenu.subMenus.length
- 1)].isChild = true;

tMenu.subMenus[(tMenu.subMenus.length
- 1)].parentMenu = tMenu;

tMenu.subMenus[(tMenu.subMenus.length
- 1)].parentItem = tcMenu;

tMenu.hasChildren = true;

tcMenu.hasMenu = true;

tcMenu.menu =
tMenu.subMenus[(tMenu.subMenus.length - 1)];

}

tcMenu.parentMenu = tMenu;

tMenu.items[tMenu.items.length] = tcMenu;

}

return tMenu;

}

function moveHTML(menu){

var tHTML = "";

if(menu.hasChildren == true){

for(var i=0; i < menu.subMenus.length; i++){

tHTML += moveHTML(menu.subMenus[i]);

}

}

var tMenu = eval(menu.id);

var tMenuHTML = tMenu.outerHTML;

tMenu.outerHTML = "";

tHTML += tMenuHTML;

return tHTML;

}

function setupMenu(menu){

if(menu.hasChildren == true){

for(var i=0; i < menu.subMenus.length; i++){

setupMenu(menu.subMenus[i]);

}

}

tMenu = eval(menu.id);
tMenu.noWrap = true;
tMenu.hasChildren = menu.hasChildren;
tMenu.hasVisibleChild = false;
tMenu.visibleChild = null;
tMenu.isChild = menu.isChild;
tMenu.onselectstart = returnFalse;
tMenu.onclick = handleMenuClick;
tMenu.currWidth = 0;
tMenu.items = menu.items;
for(var i=0; i < menu.items.length; i++){
setupItem(menu.items[i]);

}

tMenu.style.pixelWidth += 5;
for(var i=0; i < menu.items.length; i++){
var tItem = eval(menu.items[i].id);
if(!IE4){
tItem.style.width = "100%";
if(tItem.hasMenu == true) {
tItem.more.style.position =
"absolute";
tItem.more.style.pixelLeft =
(tMenu.style.pixelWidth - 17);

}

}

}

if(menu.isChild == true){

tMenu.parentMenu = eval(menu.parentMenu.id);
tMenu.parentItem = eval(menu.parentItem.id);

}

}

function setupItem(item){

tItem = eval(item.id);
tItem.highlight = highlight;
tItem.onmouseover = tItem.highlight;
tItem.parentMenu = eval(item.parentMenu.id);
tItem.hasMenu = false;
tItem.menu = null;
tItem.onclick = handleItemClick;
tItem.ondragstart = returnFalse;
tItem.noWrap = true;
if(item.hasMenu == true){
tItem.innerHTML += "<span id=\"" + item.id +
"_more\" class=\"more\">4</span>";

tItem.more = eval(item.id + "_more");
tItem.menu = eval(item.menu.id);
tItem.hasMenu = true;

}

if(!IE4) {

tItem.parentMenu.style.pixelWidth =
Math.max(tItem.parentMenu.currWidth, tItem.offsetWidth);

}

}

function highlight(){

if(activeItem != null){
if(activeItem != this){
unhighlight(activeItem);

} else {

return;
}
}
event.cancelBubble = true;
this.className = "menuItemOver";
activeItem = this;

// dont open a menu thats already open

if((this.hasMenu == true) &&
(this.parentMenu.hasVisibleChild == true) &&
(this.parentMenu.visibleChild == this.menu)) return;
// if there is a menu open, close it

if(this.parentMenu.hasChildVisible == true){
hideMenu(this.parentMenu.visibleChild);

}

// if this item has a menu, show it
if(this.hasMenu){
showMenu(this.menu);
}

}

function unhighlight(menu){
event.cancelBubble = true;
menu.className = "menuItem";

}

function showMenu(menu, x, y){
event.cancelBubble = true;
if(menu){
if(IE4){
for(var i=0; i < menu.items.length;
i++){
tItem = eval(menu.items[i].id);
if(tItem.hasMenu == true) {

tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
- 17);

}
}
}

if(menu.isChild == true){

menu.style.pixelTop =
menu.parentItem.offsetTop + menu.parentMenu.offsetTop + 4;

menu.style.pixelLeft =
menu.parentMenu.offsetLeft + menu.parentMenu.offsetWidth - 4;

menu.parentMenu.hasChildVisible =
true;
menu.parentMenu.visibleChild = menu;
menu.style.zIndex =
menu.parentMenu.style.zIndex + 1;

} else if(x && y){

menu.style.pixelTop = y;
menu.style.pixelLeft = x;
menuContainer.activeMenu = menu;
document.onclick =
menuContainer.closeAll;

}

} else {

menu = eval(this.menu);

if(IE4){

for(var i=0; i < menu.items.length;
i++){
tItem = eval(menu.items[i].id);
if(tItem.hasMenu == true) {

tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
- 17);

}

}

}

menu.style.pixelTop = event.clientY;
menu.style.pixelLeft = event.clientX;
menuContainer.activeMenu = menu;
document.onclick = menuContainer.closeAll;

}

menu.className = "visibleMenu";

return false;

}

function hideMenu(menu){

// to handle the careless child menu hiding down below

if(menu == null) return false;
event.cancelBubble = true;

// i do this kind of carelessly. i was having trouble
otherwise

hideMenu(menu.visibleChild);

if(menu.isChild == true){

menu.parentMenu.hasChildVisible = false;
menu.parentMenu.visibleChild = null;

} else {

document.onclick = "";
menuContainer.activeMenu = null;
}
menu.className = "menu";

}

function closeAll(){

hideMenu(menuContainer.activeMenu);

}

// simple function to return false
function returnFalse(){return false;}
// function to be used for later functionality
// for now it just keeps the menu open when it receives a click;
function handleMenuClick(){

event.cancelBubble = true;
return false;

}

// just like the function above, only it closes the menu
function handleItemClick(){

event.cancelBubble = true;
menuContainer.closeAll();

}

// searches the document for elements with a menu paramater
function attachMenus(){
for(var i in document.all){
if(document.all[i].menu){
document.all[i].onclick = showMenu;
}
}
}
</script>
</head>
<body onload="initMenu()">

<a href="#" menu="menu1">Brands of Shampoo</a>

<div id="menuContainer">
<div id="menu1" class="menu">
<div id="subMenu1_1" class="menuItem"><a href="/hair/index.html">Hair
Products</a></div>
<div id="menu1_1" class="menu">
<div id="menuItem1_1_1" class="menuItem"><a
href="/hair/shampoo.html">Shampoo</a></div>
<div id="menuItem1_1_2" class="menuItem"><a
href="/hair/gel.html">Gel</a></div>
</div>
<div id="subMenu1_2" class="menuItem"><a href="/skin/index.html">Skin
Care Products</a></div>
<div id="menu1_2" class="menu">
<div id="menuItem1_2_1" class="menuItem"><a
href="/skin/lotion.html">Lotions</a></div>
<div id="subMenu1_2_2" class="menuItem"><a
href="/skin/ointments/index.html">Ointments</a></div>
<div id="menu1_2_2" class="menu">
<div id="menuItem1_2_2_1" class="menuItem"><a
href="/skin/ointments/bengay.html">Ben-Gay</a></div>
<div id="menuItem1_2_2_2" class="menuItem"><a
href="/skin/ointments/icyhot.html">Icy Hot</a></div>
<div id="menuItem1_2_2_3" class="menuItem"><a
href="/skin/ointments/burncream.html">Burn Cream</a></div>
</div>
<div id="menuItem1_2_3" class="menuItem"><a
href="/skin/powder.html">Powder</a></div>
</div>
<div id="menuItem1_3" class="menuItem"><a href="/nailpolish.html">Nail
Polish</a></div>
</div>
</div>

<br>

<a href="#" menu="menu2">Brands of Shampoo</a>

<div id="menu2" class="menu">
<div id="subMenu2_1" class="menuItem"><a href="/hair/index.html">Hair
Products</a></div>
<div id="menu2_1" class="menu">
<div id="menuItem2_1_1" class="menuItem"><a
href="/hair/shampoo.html">Shampoo</a></div>
<div id="menuItem2_1_2" class="menuItem"><a
href="/hair/gel.html">Gel</a></div>
</div>
<div id="subMenu2_2" class="menuItem"><a href="/skin/index.html">Skin
Care Products</a></div>
<div id="menu2_2" class="menu">
<div id="menuItem2_2_1" class="menuItem"><a
href="/skin/lotion.html">Lotions</a></div>
<div id="subMenu2_2_2" class="menuItem"><a
href="/skin/ointments/index.html">Ointments</a></div>
<div id="menu2_2_2" class="menu">
<div id="menuItem2_2_2_1" class="menuItem"><a
href="/skin/ointments/bengay.html">Ben-Gay</a></div>
<div id="menuItem2_2_2_2" class="menuItem"><a
href="/skin/ointments/icyhot.html">Icy Hot</a></div>
<div id="menuItem2_2_2_3" class="menuItem"><a
href="/skin/ointments/burncream.html">Burn Cream</a></div>
</div>
<div id="menuItem2_2_3" class="menuItem"><a
href="/skin/powder.html">Powder</a></div>
</div>
<div id="menuItem2_3" class="menuItem"><a href="/nailpolish.html">Nail
Polish</a></div>
</div>
</div>
</body>
</html>
Jul 23 '05 #1
7 2688
Marci,

Firstly, you need to added "<html><head>" at top of page.

Then the copyright comment needs to be enclosed in a javascript tags ie...

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> COPYRIGHT
STUFF...</SCRIPT>

0That should sort it out for you. BTW, you've also got two superfluous <BR>
tags just after the copyright stuff, you should
get rid of them too.

Hope this sorts it out for you.
Noel.
"Marci" <mk****@mts.net> wrote in message
news:4d**************************@posting.google.c om...
I found this script for cascading menus, however, I cannot reach the
author to solve the bug I am having when I add a second menu to it.
My problem is this:

If I click on the first link, the menu displays well. If I then click
on the second link, the first menu from the first link still displays.

How do I get make the first menu disappear when I click on the second
and vice versa? Please help...thanks.

Code is as follows:

/************************************************** ****
* HMenu.js - v. 1.05 000710 *
* Cascading menu creation system *
* by Aaron Prenot *
* Copyright (c) 2000 Aaron Prenot *
* http://www.redrival.com/aprenot *
* *
* Published and Documented at *
* o www.redrival.com/aprenot *
* o www.webdevelopersjournal.com *
* *
* You may use this code on a public web site only *
* if this entire copyright notice appears *
* unchanged. We would also appreciate you *
* creating a link to *
* http://www.webdevelopersjournal.com somwhere on *
* your site. *
* *
* *
* Please send questions and bug reports to: *
* ap*****@hotmail.com *
************************************************** ****/

<br>
<br>
<STYLE TYPE="text/css">
.menu {position: absolute;
font-family: MS Sans Serif;
font-size: 10pt;
background-color: menu;
color: menutext;
border: 2px threedhighlight outset;
cursor: default;
visibility: hidden;
line-height: 140%;}

.visibleMenu {position: absolute;

font-family: MS Sans Serif;
font-size: 10pt;
background-color: menu;
color: menutext;
border: 2px threedhighlight outset;
cursor: default;
visibility: visible;
line-height: 140%;}

.menuItem {color: menutext;
background-color: menu;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;}

.menuItemOver {color: highlighttext;

background-color: highlight;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;}

.menuItemOver A {color: highlighttext;

background-color: highlight;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;
cursor: default;}

.menuItem A {color: menutext;
background-color: menu;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;
cursor: default;}

.more {font-family: WebDings;
text-align: right;
z-index: 100;
position:relative;}

</style>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var menus = new Array();
var activeItem = null;
var IE4 = ((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion) >= 4 ) &&
!(navigator.appVersion.indexOf("5") > -1 ));

function Menu(){

this.id = "";
this.subMenus = new Array();
this.items = new Array();
this.hasChildren = false;
this.isChild = false;
this.parentMenu = null;
this.parentItem = null;

}

function Item(){

this.id = "";
this.hasMenu = false;
this.menu = null;
this.parentMenu = null;
}

function initMenu(){

// test for IE4+, it won't work otherwise
if(!document.all) return false;

findMenus();
menuContainer.activeMenu = null;
menuContainer.closeAll = closeAll;

attachMenus();

}

function findMenus(){

var cTag = menuContainer.children;
for(var i=0; i < cTag.length; i++){

tcTag = cTag[i];
if(tcTag.className == "menu"){

var tMenu = findSubMenus(tcTag);
menus[menus.length] = tMenu;
}
}

var tHTML = "<div id=\"menuContainer\">";
for(var i=0; i < menus.length; i++){
var tcTag = menus[i]
tHTML += moveHTML(tcTag);
}

tHTML += "</div>";
menuContainer.outerHTML = "";
document.body.innerHTML += tHTML;

for(var i=0; i < menus.length; i++){
var tcTag = menus[i];
setupMenu(tcTag);

}

}

function findSubMenus(menu){

var cMenu = menu.children;
var tMenu = new Menu();
tMenu.id = menu.id;
for(var i=0; i < cMenu.length; i++){
var tcMenu = new Item();
tcMenu.id = cMenu[i].id;
if(tcMenu.id.indexOf("subMenu") != -1){
++i;

var subMenu = cMenu[i];
tMenu.subMenus[tMenu.subMenus.length] =
findSubMenus(subMenu)

tMenu.subMenus[(tMenu.subMenus.length
- 1)].isChild = true;

tMenu.subMenus[(tMenu.subMenus.length
- 1)].parentMenu = tMenu;

tMenu.subMenus[(tMenu.subMenus.length
- 1)].parentItem = tcMenu;

tMenu.hasChildren = true;

tcMenu.hasMenu = true;

tcMenu.menu =
tMenu.subMenus[(tMenu.subMenus.length - 1)];

}

tcMenu.parentMenu = tMenu;

tMenu.items[tMenu.items.length] = tcMenu;

}

return tMenu;

}

function moveHTML(menu){

var tHTML = "";

if(menu.hasChildren == true){

for(var i=0; i < menu.subMenus.length; i++){

tHTML += moveHTML(menu.subMenus[i]);

}

}

var tMenu = eval(menu.id);

var tMenuHTML = tMenu.outerHTML;

tMenu.outerHTML = "";

tHTML += tMenuHTML;

return tHTML;

}

function setupMenu(menu){

if(menu.hasChildren == true){

for(var i=0; i < menu.subMenus.length; i++){

setupMenu(menu.subMenus[i]);

}

}

tMenu = eval(menu.id);
tMenu.noWrap = true;
tMenu.hasChildren = menu.hasChildren;
tMenu.hasVisibleChild = false;
tMenu.visibleChild = null;
tMenu.isChild = menu.isChild;
tMenu.onselectstart = returnFalse;
tMenu.onclick = handleMenuClick;
tMenu.currWidth = 0;
tMenu.items = menu.items;
for(var i=0; i < menu.items.length; i++){
setupItem(menu.items[i]);

}

tMenu.style.pixelWidth += 5;
for(var i=0; i < menu.items.length; i++){
var tItem = eval(menu.items[i].id);
if(!IE4){
tItem.style.width = "100%";
if(tItem.hasMenu == true) {
tItem.more.style.position =
"absolute";
tItem.more.style.pixelLeft =
(tMenu.style.pixelWidth - 17);

}

}

}

if(menu.isChild == true){

tMenu.parentMenu = eval(menu.parentMenu.id);
tMenu.parentItem = eval(menu.parentItem.id);

}

}

function setupItem(item){

tItem = eval(item.id);
tItem.highlight = highlight;
tItem.onmouseover = tItem.highlight;
tItem.parentMenu = eval(item.parentMenu.id);
tItem.hasMenu = false;
tItem.menu = null;
tItem.onclick = handleItemClick;
tItem.ondragstart = returnFalse;
tItem.noWrap = true;
if(item.hasMenu == true){
tItem.innerHTML += "<span id=\"" + item.id +
"_more\" class=\"more\">4</span>";

tItem.more = eval(item.id + "_more");
tItem.menu = eval(item.menu.id);
tItem.hasMenu = true;

}

if(!IE4) {

tItem.parentMenu.style.pixelWidth =
Math.max(tItem.parentMenu.currWidth, tItem.offsetWidth);

}

}

function highlight(){

if(activeItem != null){
if(activeItem != this){
unhighlight(activeItem);

} else {

return;
}
}
event.cancelBubble = true;
this.className = "menuItemOver";
activeItem = this;

// dont open a menu thats already open

if((this.hasMenu == true) &&
(this.parentMenu.hasVisibleChild == true) &&
(this.parentMenu.visibleChild == this.menu)) return;
// if there is a menu open, close it

if(this.parentMenu.hasChildVisible == true){
hideMenu(this.parentMenu.visibleChild);

}

// if this item has a menu, show it
if(this.hasMenu){
showMenu(this.menu);
}

}

function unhighlight(menu){
event.cancelBubble = true;
menu.className = "menuItem";

}

function showMenu(menu, x, y){
event.cancelBubble = true;
if(menu){
if(IE4){
for(var i=0; i < menu.items.length;
i++){
tItem = eval(menu.items[i].id);
if(tItem.hasMenu == true) {

tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
- 17);

}
}
}

if(menu.isChild == true){

menu.style.pixelTop =
menu.parentItem.offsetTop + menu.parentMenu.offsetTop + 4;

menu.style.pixelLeft =
menu.parentMenu.offsetLeft + menu.parentMenu.offsetWidth - 4;

menu.parentMenu.hasChildVisible =
true;
menu.parentMenu.visibleChild = menu;
menu.style.zIndex =
menu.parentMenu.style.zIndex + 1;

} else if(x && y){

menu.style.pixelTop = y;
menu.style.pixelLeft = x;
menuContainer.activeMenu = menu;
document.onclick =
menuContainer.closeAll;

}

} else {

menu = eval(this.menu);

if(IE4){

for(var i=0; i < menu.items.length;
i++){
tItem = eval(menu.items[i].id);
if(tItem.hasMenu == true) {

tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
- 17);

}

}

}

menu.style.pixelTop = event.clientY;
menu.style.pixelLeft = event.clientX;
menuContainer.activeMenu = menu;
document.onclick = menuContainer.closeAll;

}

menu.className = "visibleMenu";

return false;

}

function hideMenu(menu){

// to handle the careless child menu hiding down below

if(menu == null) return false;
event.cancelBubble = true;

// i do this kind of carelessly. i was having trouble
otherwise

hideMenu(menu.visibleChild);

if(menu.isChild == true){

menu.parentMenu.hasChildVisible = false;
menu.parentMenu.visibleChild = null;

} else {

document.onclick = "";
menuContainer.activeMenu = null;
}
menu.className = "menu";

}

function closeAll(){

hideMenu(menuContainer.activeMenu);

}

// simple function to return false
function returnFalse(){return false;}
// function to be used for later functionality
// for now it just keeps the menu open when it receives a click;
function handleMenuClick(){

event.cancelBubble = true;
return false;

}

// just like the function above, only it closes the menu
function handleItemClick(){

event.cancelBubble = true;
menuContainer.closeAll();

}

// searches the document for elements with a menu paramater
function attachMenus(){
for(var i in document.all){
if(document.all[i].menu){
document.all[i].onclick = showMenu;
}
}
}
</script>
</head>
<body onload="initMenu()">

<a href="#" menu="menu1">Brands of Shampoo</a>

<div id="menuContainer">
<div id="menu1" class="menu">
<div id="subMenu1_1" class="menuItem"><a href="/hair/index.html">Hair
Products</a></div>
<div id="menu1_1" class="menu">
<div id="menuItem1_1_1" class="menuItem"><a
href="/hair/shampoo.html">Shampoo</a></div>
<div id="menuItem1_1_2" class="menuItem"><a
href="/hair/gel.html">Gel</a></div>
</div>
<div id="subMenu1_2" class="menuItem"><a href="/skin/index.html">Skin
Care Products</a></div>
<div id="menu1_2" class="menu">
<div id="menuItem1_2_1" class="menuItem"><a
href="/skin/lotion.html">Lotions</a></div>
<div id="subMenu1_2_2" class="menuItem"><a
href="/skin/ointments/index.html">Ointments</a></div>
<div id="menu1_2_2" class="menu">
<div id="menuItem1_2_2_1" class="menuItem"><a
href="/skin/ointments/bengay.html">Ben-Gay</a></div>
<div id="menuItem1_2_2_2" class="menuItem"><a
href="/skin/ointments/icyhot.html">Icy Hot</a></div>
<div id="menuItem1_2_2_3" class="menuItem"><a
href="/skin/ointments/burncream.html">Burn Cream</a></div>
</div>
<div id="menuItem1_2_3" class="menuItem"><a
href="/skin/powder.html">Powder</a></div>
</div>
<div id="menuItem1_3" class="menuItem"><a href="/nailpolish.html">Nail
Polish</a></div>
</div>
</div>

<br>

<a href="#" menu="menu2">Brands of Shampoo</a>

<div id="menu2" class="menu">
<div id="subMenu2_1" class="menuItem"><a href="/hair/index.html">Hair
Products</a></div>
<div id="menu2_1" class="menu">
<div id="menuItem2_1_1" class="menuItem"><a
href="/hair/shampoo.html">Shampoo</a></div>
<div id="menuItem2_1_2" class="menuItem"><a
href="/hair/gel.html">Gel</a></div>
</div>
<div id="subMenu2_2" class="menuItem"><a href="/skin/index.html">Skin
Care Products</a></div>
<div id="menu2_2" class="menu">
<div id="menuItem2_2_1" class="menuItem"><a
href="/skin/lotion.html">Lotions</a></div>
<div id="subMenu2_2_2" class="menuItem"><a
href="/skin/ointments/index.html">Ointments</a></div>
<div id="menu2_2_2" class="menu">
<div id="menuItem2_2_2_1" class="menuItem"><a
href="/skin/ointments/bengay.html">Ben-Gay</a></div>
<div id="menuItem2_2_2_2" class="menuItem"><a
href="/skin/ointments/icyhot.html">Icy Hot</a></div>
<div id="menuItem2_2_2_3" class="menuItem"><a
href="/skin/ointments/burncream.html">Burn Cream</a></div>
</div>
<div id="menuItem2_2_3" class="menuItem"><a
href="/skin/powder.html">Powder</a></div>
</div>
<div id="menuItem2_3" class="menuItem"><a href="/nailpolish.html">Nail
Polish</a></div>
</div>
</div>
</body>
</html>

Jul 23 '05 #2
Hi Noel,

Thanks for your input...
I however had these tags in my original document...
This doesn't solve my problem, but thanks anyway.
Marci

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #3
Hi again Marci, actually done a little piece of tidying that I thought
didn't matter, but was critical to getting it working...

In the hideMenu function, there is a comment line that has split across two
lines, that's where the problem is.
It's with a little irony that the comment should read ~//i do this kind of
carelessly. i was having trouble otherwise~:D.

The word ~otherwise~ has gone on to it's own line, and is being treated as
an unknown command

....
// i do this kind of carelessly. i was having trouble
otherwise
....

Put it back together, and that will solve the problem.
....
// i do this kind of carelessly. i was having trouble
otherwise
....
function hideMenu(menu)
{

// to handle the careless child menu hiding down below.

if(menu == null) return false;
event.cancelBubble = true;

// i do this kind of carelessly. i was having trouble
otherwise.

hideMenu(menu.visibleChild);

....

}

Have fun!
Noel.
"Marci Keszi" <mk****@mts.net> wrote in message
news:40**********************@news.newsgroups.ws.. .
Hi Noel,

Thanks for your input...
I however had these tags in my original document...
This doesn't solve my problem, but thanks anyway.
Marci

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Jul 23 '05 #4
"Noel Dolan" <no*********@virgin.net> writes:
The word ~otherwise~ has gone on to it's own line, and is being treated as
an unknown command

...
// i do this kind of carelessly. i was having trouble
otherwise
...

Put it back together, and that will solve the problem.
...
// i do this kind of carelessly. i was having trouble
otherwise
...


Your example would have worked better if your own newsreader hadn't
broken the line again :) It's a known problem with Outlook/OE. I don't
know if QuoteFix can fix that in all cases, but I think it does in some.
<URL:http://home.in.tum.de/~jain/software/oe-quotefix/>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #5
Sorry I can't help it if when I post to this site it breaks my code into
lines...

Can anyone help me with my original question? I'll post the answer...if
I ever figure it out...

Marci

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #6
On 20 Jul 2004 04:25:25 GMT, Marci Keszi wrote:
Sorry I can't help it if when I post to this site it breaks my code into
lines...
Often the trick is, keep lines short.

The line I wrote above is less than
half the width of your lines.

Short lines can be slightly less easy
to read, and result in posts with more
lines, but it is well worth it to avoid
the inconvenience of code breaking due
to line wrap.
Can anyone help me with my original question?


Better still, rather than posting your code to
the group, have you considered putting it up
at GeoCities or such? After all..

a) it is in a web-page. (is it not?)
b) it can be seen in it's 'native' environment.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #7
JRS: In article <40**********************@news.newsgroups.ws>, dated
Tue, 20 Jul 2004 04:25:25, seen in news:comp.lang.javascript, Marci
Keszi <mk****@mts.net> posted :
Sorry I can't help it if when I post to this site it breaks my code into
lines... *** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!


This is, as you should know, a usenet newsgroup.

Articles are, in usenet, transmitted as sent.

Any unwanted line breaks are due to the sending or receiving software.

When good receiving software breaks a line for display, it should be
obvious what has happened and easy to undo it.

But it is the responsibility of the originator to make sure that the
launching system does not break lines. That includes making a prudent
choice of news software and access services.

Unless the author has, understands, and exercises full control, this is
best done by using lines of no more than 72 characters.

In particular, intending with tabs is non-constructive; replace each tab
by a couple of spaces in the source.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://jibbering.com/faq/> JL / RC : FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: michelle | last post by:
Hi all, I am new to Tk, or Python GUI programming and I seem to be stuck. I have looked about for help with Tk GUIs, but everything seems so terse or incomplete?? I have been mostly using the...
2
by: gregory stevenson | last post by:
I am looking for a simple cascading menu javascript.One where it lives on the left side of the screen, listed vertically and when you select a menu item the list expands to show the sub menu items...
1
by: Cindy Lee | last post by:
is it possible to have cascading menus like: http://www.cracky.net/JAVA/Navigation/cascading-menu.html With scrollbars added, so you can only see a few options at a time? On some of my options...
1
by: JMosey | last post by:
Not sure if this has been covered ( a google search came up pretty bare). I have a site that: - has multi-level cascading menus - floats center of the browser window - Will have fairly heavy...
1
by: Yavuz Bogazci | last post by:
hi, has someone a sample how to create cascading and database driven menues??? Help! I don't know where to begin! Thanks Yavuz Bogazci
5
by: Angus | last post by:
I have had a look at http://javascript.internet.com/navigation/cascade-menu.html Which is roughly what I want to do. Roughly the menu looks like this: Menu #1 Menu #2 Menu #3 Menu #4
2
N002199B
by: N002199B | last post by:
Hie Guru's I am trying to write code that can be re-used by simple calls to build menus and submenus on mobile devices. I have heard about the cascading menus design pattern, but do not...
1
by: support | last post by:
In dotNet, I want to have cascading pulldown menus. Hence, the items are: { a, b, cx, cy, cz, d}, but I don't want to show cx, cy, cz unless the user selected one of the c's. Does anyone know a...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.