PDA

Click to See Complete Forum and Search --> : cascading menu

BillyBob
10-23-2003, 03:25 PM
Hello this is my first time here. I am new to the java script method of working menu's .Whats happening is that I am using a script from the Cascading menu library and I cannot get the menu to open over top of my main page. It just opens in the top banner where the menu bar is I am trying to understand whats happening but I am not having any luck trying to get my menu to work?
I am setup in to two frames top and main and I would like the cascding menu to open over the top of the main page as right now its opening on the top and I am a little frustrated with that happening. I really like the menu setup and I really would like to use it so I need a little promting as to what to do.
Thanks,
BillyBob :)
_Synk_
10-23-2003, 03:31 PM
Couldn't you put the divs for the menus outside of both frames and on the parent page? I'm not sure if that would work--I've never tried it, but it's worth a try...
BillyBob
10-23-2003, 05:06 PM
Originally posted by _Synk_
Couldn't you put the divs for the menus outside of both frames and on the parent page? I'm not sure if that would work--I've never tried it, but it's worth a try...
BillyBob
10-23-2003, 05:10 PM
Originally posted by BillyBob

Listed below is the way that I have the Cascading Menu setup.AnyIdeas would be greatly appreciated!
I would like to have the menu open in the main page below instead its opening in the banner part of the frame.
BillyBob
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>Name</title>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun kumar (n_arunk@hotmail.com) -->
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">

<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
<base target="main2.htm">

</head>

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>

<center>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Main </DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Buyers </DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Sellers </DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Listings </DIV>
<DIV Id="Bar5" class="Bar" menu="menu5">Virtual Tours </DIV>
<DIV Id="Bar6" class="Bar" menu="menu6">Free Reports </DIV>
<DIV Id="Bar7" class="Bar" menu="menu7">Privacy Policy </DIV>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" title="About Bill" cmd="http://www.billbuck.net/profile.htm">About Bill</div>
<div Id="menuItem1_2" class="menuItem" title="Relocations" cmd="http://www.billbuck.net/relocation.htm">Relocations</div>
<div Id="menuItem1_3" class="menuItem" title="Free Reports" cmd="http://www.billbuck.net/free24hr.htm">Free Reports</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" title="Buyers Services" cmd="http://www.billbuck.net/buyerServices.htm">Buyers Service</div>
<div Id="menuItem2_2" class="menuItem" title="Calculator" cmd="http://www.billbuck.net/calc.htm">Calculator</div>
<div Id="menuItem2_3" class="menuItem" title="Mortgage Rates" cmd="http://www.billbuck.net/rates.htm">Mortgage Rates</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem" title="Sellers Services" cmd="http://www.billbuck.net/homeSServ.htm">Sellers Service</div>
<div Id="menuItem3_2" class="menuItem" title="Feature Property" cmd="http://www.billbuck.net/feature1.htm">Feature Property</div>
<div Id="menuItem3_3" class="menuItem" title="Selling Form" cmd="http://www.billbuck.net/freeInfo.htm">Selling Form</div>
<div Id="menuItem3_4" class="menuItem" title="Showing Tips" cmd="http://www.billbuck.net/showingTips.htm">Showing Tips</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem" title="Office Listings" cmd="http://www.maxwellrealty.ca/max/rls/realtors/Bbuck/">Office Listings</div>
<div Id="menuItem4_2" class="menuItem" title="New and Sold" cmd="http://www.billbuck.net/catsold.htm">New and Sold</div>
<div Id="menuItem4_3" class="menuItem" title="MLS Listings" cmd="http://www.mls.ca/mls/listings.asp?L=1&aid=31035">MLS Listings</div>
<div Id="menuItem4_4" class="menuItem" title="Free Evaluation" cmd="http://www.billbuck.net/market_eval.htm">Free Evaluation</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem" title="Virtual Tours" cmd="http://www.billbuck.net/tours/new/vr_tours.htm">Virtual Tours</div>
<div Id="menuItem5_2" class="menuItem" title="Sold Listings" cmd="http://www.billbuck.net/catsold.htm">Sold Listings</div>
<div Id="menuItem5_3" class="menuItem" title="Free Evaluation" cmd="http://www.billbuck.net/market_eval.htm">Free Evaluation</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem" title="Free Reports" cmd="http://www.billbuck.net/free24hr.htm">Free Reports</div>
<div Id="menuItem6_2" class="menuItem" title="No Money Down" cmd="http://www.billbuck.net/noDownPay.htm">No Money Down</div>
<div Id="menuItem6_3" class="menuItem" title="Selling Mistakes" cmd="http://www.billbuck.net/28020.htm">Selling Mistakes</div>
<div Id="menuItem6_4" class="menuItem" title="New Home Secrets" cmd="http://www.billbuck.net/10secretsnbuyer.htm">New Home Secrets</div>
<div Id="menuItem6_5" class="menuItem" title="Expired Listing" cmd="http://www.billbuck.net/homeSServ.htm">Expired Listing</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem" title="Privacy Policy" cmd="http://www.billbuck.net/privacy.htm">Privacy Policy</div>
<div Id="menuItem7_2" class="menuItem" title="Favorate Links" cmd="http://www.billbuck.net/billslinks.htm">Favorate Links</div>
<div Id="menuItem7_3" class="menuItem" title="Email Bill" cmd="mailto:bill@billbuck.net">Email Bill</div>
</div><!-- End of Menu -->

<table border="0" cellpadding="8" cellspacing="0" width="100%">
<tr>
<td><img src="maxlogo.jpg"
alt="Maxwell Realty Edmonton.jpg (9201 bytes)"></td>
<td width="*"><p align="center" ><b><font face="Arial" size="3" color="navy">Bill
Buck, Agent </font><br>
<font face="Arial" size="2" color="navy">Office(780)490-5006 Fax(780)490-5076<br>
Maxwell Realty Edmonton <br>
#204,7205 Roper Rd Edmonton Alberta T6B 3J4<br>
E-mail<a HREF="mailto:bill@billbuck.net">Bill@billbuck.net</a><br>
</font><font face="Arial" color="navy" size="1">Each Office Is Independently Owed And
Operated</font></b></td>
<td><img src="bbuck.gif" width="92" align="right"
alt="Bill Buck.gif (16591 bytes)"></td>
</tr>
</table>
</center>
</body>
</html>
HackerX
10-23-2003, 05:20 PM
use css instead.
_Synk_
10-23-2003, 06:18 PM
Isn't he already using CSS, hacker?

Anyway, from what I can see, the menu links are in the top frame, right? Lemme know if I'm wrong, and the menu itself is long enough to cover the bottom of the frame, but instead of going overtop, it's going under? You could try putting scrollbars on your divs and settings a length, or, like I said before, put the divs on the parent page and change some of the js files to access the parent page. I think that should do it, though it's kinda hard to tell without seeing the source scripts themselves...
BillyBob
10-23-2003, 06:19 PM
What is css?
_Synk_
10-23-2003, 06:25 PM
Cascading Style Sheets. You can use them for all kinds of stuff like making hyperlinks black, but when the mouse moves over them they turn red, or something. What hacker is saying is that you should use the position:absolute command in correspondance with putting the divs on your main page.

PS: How do you notice when I reply so fast? :)
BillyBob
10-23-2003, 07:52 PM
Hello again,
I have enclosed the JS that is calling up when the menu is accessed. I would welcome your ideas as how to get the menu to work and open in the main page below the banner page.




function InitMenu()
{
var bar = menuBar.children

for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)

if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)


if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}

function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}

function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)

}

function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children

for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}

if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)

childMenu.style.visibility = "hidden"
}
}

}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}





///////////////////CascadedDropdown Menu/////////////////
//Date : 08/09/2001 //
//Version : 1.0 //
//Author Mr.Arun N Kumar //
//EMail: n_arunk@hotmail.com //
/////////////////////////////////////////////////////////
// Modifications on this code is not recomended
// Suggestions are welcome
_Synk_
10-24-2003, 04:20 PM
Yeah, from what I can see, copying the divs and JS files should work. Copy all the divs onto the main page, as well as the external JS files, and that should probably fix your problem. Good luck
BillyBob
10-24-2003, 06:43 PM
Hello,
Thanks fror your replies much appreciated. I think that I may have explained my problem the wrong way so I will start over.
I am working in a frameset lets call the top one banner and the bottom one the main frame. What I am tryind to do is have the menu installed in the Banner frame and when the menu is clicked the page will open below in the Main frame. I believe that somewhere in the JS I might have to make a modification to do that but I don't know where to begin. I will attach the setup that I have right now . Hopefully someone will be able to help me out.
Thanks,
BillyBob

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>Name</title>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun kumar (n_arunk@hotmail.com) -->
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">

<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
<base target="main2.htm">

</head>

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>

<center>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Main </DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Buyers </DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Sellers </DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Listings </DIV>
<DIV Id="Bar5" class="Bar" menu="menu5">Virtual Tours </DIV>
<DIV Id="Bar6" class="Bar" menu="menu6">Free Reports </DIV>
<DIV Id="Bar7" class="Bar" menu="menu7">Privacy Policy </DIV>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" title="About Bill" cmd="http://www.billbuck.net/profile.htm">About Bill</div>
<div Id="menuItem1_2" class="menuItem" title="Relocations" cmd="http://www.billbuck.net/relocation.htm">Relocations</div>
<div Id="menuItem1_3" class="menuItem" title="Free Reports" cmd="http://www.billbuck.net/free24hr.htm">Free Reports</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" title="Buyers Services" cmd="http://www.billbuck.net/buyerServices.htm">Buyers Service</div>
<div Id="menuItem2_2" class="menuItem" title="Calculator" cmd="http://www.billbuck.net/calc.htm">Calculator</div>
<div Id="menuItem2_3" class="menuItem" title="Mortgage Rates" cmd="http://www.billbuck.net/rates.htm">Mortgage Rates</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem" title="Sellers Services" cmd="http://www.billbuck.net/homeSServ.htm">Sellers Service</div>
<div Id="menuItem3_2" class="menuItem" title="Feature Property" cmd="http://www.billbuck.net/feature1.htm">Feature Property</div>
<div Id="menuItem3_3" class="menuItem" title="Selling Form" cmd="http://www.billbuck.net/freeInfo.htm">Selling Form</div>
<div Id="menuItem3_4" class="menuItem" title="Showing Tips" cmd="http://www.billbuck.net/showingTips.htm">Showing Tips</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem" title="Office Listings" cmd="http://www.maxwellrealty.ca/max/rls/realtors/Bbuck/">Office Listings</div>
<div Id="menuItem4_2" class="menuItem" title="New and Sold" cmd="http://www.billbuck.net/catsold.htm">New and Sold</div>
<div Id="menuItem4_3" class="menuItem" title="MLS Listings" cmd="http://www.mls.ca/mls/listings.asp?L=1&aid=31035">MLS Listings</div>
<div Id="menuItem4_4" class="menuItem" title="Free Evaluation" cmd="http://www.billbuck.net/market_eval.htm">Free Evaluation</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem" title="Virtual Tours" cmd="http://www.billbuck.net/tours/new/vr_tours.htm">Virtual Tours</div>
<div Id="menuItem5_2" class="menuItem" title="Sold Listings" cmd="http://www.billbuck.net/catsold.htm">Sold Listings</div>
<div Id="menuItem5_3" class="menuItem" title="Free Evaluation" cmd="http://www.billbuck.net/market_eval.htm">Free Evaluation</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem" title="Free Reports" cmd="http://www.billbuck.net/free24hr.htm">Free Reports</div>
<div Id="menuItem6_2" class="menuItem" title="No Money Down" cmd="http://www.billbuck.net/noDownPay.htm">No Money Down</div>
<div Id="menuItem6_3" class="menuItem" title="Selling Mistakes" cmd="http://www.billbuck.net/28020.htm">Selling Mistakes</div>
<div Id="menuItem6_4" class="menuItem" title="New Home Secrets" cmd="http://www.billbuck.net/10secretsnbuyer.htm">New Home Secrets</div>
<div Id="menuItem6_5" class="menuItem" title="Expired Listing" cmd="http://www.billbuck.net/homeSServ.htm">Expired Listing</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem" title="Privacy Policy" cmd="http://www.billbuck.net/privacy.htm">Privacy Policy</div>
<div Id="menuItem7_2" class="menuItem" title="Favorate Links" cmd="http://www.billbuck.net/billslinks.htm">Favorate Links</div>
<div Id="menuItem7_3" class="menuItem" title="Email Bill" cmd="mailto:bill@billbuck.net">Email Bill</div>
</div><!-- End of Menu -->

<table border="0" cellpadding="8" cellspacing="0" width="100%">
<tr>
<td><img src="maxlogo.jpg"
alt="Maxwell Realty Edmonton.jpg (9201 bytes)"></td>
<td width="*"><p align="center" ><b><font face="Arial" size="3" color="navy">Bill
Buck, Agent </font><br>
<font face="Arial" size="2" color="navy">Office(780)490-5006 Fax(780)490-5076<br>
Maxwell Realty Edmonton <br>
#204,7205 Roper Rd Edmonton Alberta T6B 3J4<br>
E-mail<a HREF="mailto:bill@billbuck.net">Bill@billbuck.net</a><br>
</font><font face="Arial" color="navy" size="1">Each Office Is Independently Owed And
Operated</font></b></td>
<td><img src="bbuck.gif" width="92" align="right"
alt="Bill Buck.gif (16591 bytes)"></td>
</tr>
</table>
</center>
</body>
</html>
BillyBob
10-24-2003, 10:38 PM
Thanks _Synk_ , for the replies. Yes I am trying to get the menu to open over top of the main page<I have a frameset named Banner and Main. Maybe you could suggest another cascading menu for me to use as this one sounds a little more complicated than I thought.
Thanks for your feedback,
BillyBob