By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,285 Members | 2,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,285 IT Pros & Developers. It's quick & easy.

Cascading menus in Javascript

P: n/a
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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.