loop in javascript

[Christopher Brandsdal]

Hi!

I have a menu-system in JavaScript.

The menu is displayed by two js functions ( DrawMenuBar and DrawSubMenu ).
the first function displays the parent items, and includes the other
function to display sub items if it exists.
I wanted to add one more child. that means the menu contained 3 levels.
To display the third sub item, I made DrawSubMenu run a new
function(DrawSubSubMenu). That way the menu was able to have 3 levels.

My question:
If I wanted to make my menu lets say 10 levels..... Is it any good way to
loop the function? Or is it best for me to just write a new subsubsub
function and so on?
One of the inportant things about the menu is hat it only expand's the item
you have selected.(!)

Thanks a lot in advance.

best regards Christopher

THIS IS MY CODE:

////////////////////////////////////////////////////////////////////////////
///////////////////
function DrawMenuBar(oSite, oRootNode, oRequestedNode)
{
if (oSite == null || oRootNode == null)
return;

var i=0;
var oFirstLevelNode = null;

Response.Write("<TABLE BORDER=\"0\" CELLPADDING=\"0\" CELLSPACING=\"0\"
WIDTH=\"140\">");
while ((oFirstLevelNode = oRootNode.GetChildByOrder(i++)) != null)
{
Response.Write("<TR><TD CLASS=\"normal\" HEIGHT=\"21\">");

var sImgNormal = oFirstLevelNode.GetImageMenuNormal();

// Display images menu
if (sImgNormal != "")
{
if (oFirstLevelNode.IsLink())
{
Response.Write("<A HREF=" + oSite.GetNodeLink(oFirstLevelNode,true));

if (oFirstLevelNode.IsEqualOf(oRequestedNode) ||
oFirstLevelNode.IsAncestorOf(oRequestedNode))
Response.Write("><IMG SRC=\"" + oFirstLevelNode.GetImageMenuActive()
+ "\"");
else
{
Response.Write(" ONMOUSEOVER=\"document.menu" + i + ".src='" +
oFirstLevelNode.GetImageMenuMouseOver() + "'\"");
Response.Write(" ONMOUSEOUT=\"document.menu" + i + ".src='" +
oFirstLevelNode.GetImageMenuNormal() + "'\">");
Response.Write("<IMG NAME=\"menu" + i + "\" SRC=\"" +
oFirstLevelNode.GetImageMenuNormal() + "\"");
}

Response.Write(" BORDER=\"0\" ALIGN=\"top\"></A>");
}
else
Response.Write("<IMG SRC=\"" + oFirstLevelNode.GetImageMenuNormal()
+"\">");
}
// Display text menu
else
{
if (oFirstLevelNode.IsLink())
{
Response.Write("&nbsp;<A HREF=" +
oSite.GetNodeLink(oFirstLevelNode,true) + ">");
if (oFirstLevelNode.IsEqualOf(oRequestedNode) ||
oFirstLevelNode.IsAncestorOf(oRequestedNode))
Response.Write("<FONT COLOR=\"#F06B00\"><B>" +
oFirstLevelNode.GetTextMenu() + "</B></FONT>");
else
Response.Write("<B>" + oFirstLevelNode.GetTextMenu() + "</B>");

Response.Write("</A>");
}
else
Response.Write("&nbsp;<B>" + oFirstLevelNode.GetTextMenu() + "</B>");
}

Response.Write("</TD></TR>");

// Display sub-menu for selected menu
if (oFirstLevelNode.HasChilds() &&
(oFirstLevelNode.IsAncestorOf(oRequestedNode) ||
oFirstLevelNode.IsEqualOf(oRequestedNode)))
DrawSubMenu(oSite, oFirstLevelNode, oRequestedNode);
}

Response.Write("</TABLE>");
}



////////////////////////////////////////////////////////////////////////////
/////////////////
function DrawSubMenu(oSite, oNode, oRequestedNode)
{
if (oSite == null || oNode == null)
return;

// Display only text menu

var oSecondLevelNode = null;
var i=0;

Response.Write("<TR><TD><IMG SRC=\"./images/1px_t.gif\" WIDTH=\"1\"
HEIGHT=\"5\"></TD></TR>");

while ((oSecondLevelNode = oNode.GetChildByOrder(i++)) != null)
{
Response.Write("<TR><TD CLASS=\"normal\" HEIGHT=\"21\">");

if (oSecondLevelNode.IsLink() &&
!oSecondLevelNode.IsEqualOf(oRequestedNode))
{
Response.Write("<IMG SRC=\"./images/1px_t.gif\" WIDTH=\"12\"
HEIGHT=\"1\">");
Response.Write("<A HREF=" + oSite.GetNodeLink(oSecondLevelNode,true) +
">");
Response.Write(oSecondLevelNode.GetTextMenu());
Response.Write("</A>");
}
else
{
Response.Write("<IMG SRC=\"./images/arrow01.gif\">");
Response.Write(oSecondLevelNode.GetTextMenu());
}

Response.Write("</TD></TR>");
// Display subsub-menu for selected menu
if (oSecondLevelNode.HasChilds() &&
(oSecondLevelNode.IsAncestorOf(oRequestedNode) ||
oSecondLevelNode.IsEqualOf(oRequestedNode)))
DrawSubSubMenu(oSite, oSecondLevelNode, oRequestedNode);
}

Response.Write("<TR><TD><IMG SRC=\"./images/1px_t.gif\" WIDTH=\"1\"
HEIGHT=\"10\"></TD></TR>");
}


////////////////////////////////////////////////////////////////////////////
////////////////////
function DrawSubSubMenu(oSite, oNode, oRequestedNode)
{
if (oSite == null || oNode == null)
return;

// Display only text menu

var oThirdLevelNode = null;
var i=0;

Response.Write("<TR><TD><IMG SRC=\"./images/1px_t.gif\" WIDTH=\"1\"
HEIGHT=\"5\"></TD></TR>");

while ((oThirdLevelNode = oNode.GetChildByOrder(i++)) != null)
{
Response.Write("<TR><TD CLASS=\"normal\" HEIGHT=\"21\">");

if (oThirdLevelNode.IsLink() &&
!oThirdLevelNode.IsEqualOf(oRequestedNode))
{
Response.Write("<IMG SRC=\"./images/1px_t.gif\" WIDTH=\"12\"
HEIGHT=\"1\">");
Response.Write("<A HREF=" + oSite.GetNodeLink(oThirdLevelNode,true) +
">");
Response.Write(oThirdLevelNode.GetTextMenu());
Response.Write("</A>");
}
else
{
Response.Write("<IMG SRC=\"./images/arrow01.gif\">");
Response.Write(oThirdLevelNode.GetTextMenu());
}

Response.Write("</TD></TR>");
}

Response.Write("<TR><TD><IMG SRC=\"./images/1px_t.gif\" WIDTH=\"1\"
HEIGHT=\"10\"></TD></TR>");
}

 

[Dave Anderson]

I have a menu-system in JavaScript...

...If I wanted to make my menu lets say 10 levels..... Is
it any good way to loop the function? Or is it best for me
to just write a new subsubsub function and so on?
One of the inportant things about the menu is hat it only
expand's the item you have selected.(!)

Menu/submenu systems are tree structures, and thus are well-suited for
recursion. I would avoid loops entirely, and I would *definitely* use a
single "function" (I would most likely use a constructor) for establishing
all submenus.


--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.