PDA

Click to See Complete Forum and Search --> : Javascript - What am I doing wrong?

Maverick6215
12-04-2003, 05:04 PM
Hi all

I have done a search but haven't come up with any answers:-(

Basically I want a cascading menu (I am desinging in FrontPage 2000).

I found a script on this site and copied/pasted to the HTML part of FP. But when I click on preview all I get is errors and the menus aren't displayed corectly.

I haven't customised them at all yet. Can anyone advise me as to what is going wrong?

Cheers.
Pittimann
12-04-2003, 05:11 PM
Hi!

It seems you should post some more information. Nobody knows, what script you copied/pasted, so nobody can tell you, how to solve your problem...

If you sent a link, code or something else, maybe somebody here could give you a hand.

Cheers - Pit
Maverick6215
12-04-2003, 05:20 PM
Sorry for the omission. The code I copied is as follows;

<!-- THREE STEPS TO INSTALL CASCADE MENU:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<!-- 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">
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

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

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<font color="#800080"><b>Sample Menu</b></font></p>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Menu #1</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Menu #2</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Menu #3</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Menu #4</DIV>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" menu="menu6">SubMenu #1</div>
<div Id="menuItem1_2" class="menuItem" title="JavaScripts" cmd="http://javascript.internet.com/">JavaScript Source</div>
<div Id="menuItem1_3" class="menuItem" title="WDVL" cmd="http://www.wdvl.com">WDVL</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page #1</div>
<div Id="menuItem2_2" class="menuItem">Page #2</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Page #1</div>
<div Id="menuItem3_2" class="menuItem">Page #2</div>
<div Id="menuItem3_3" class="menuItem">Page #3</div>
<div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page #1</div>
<div Id="menuItem4_2" class="menuItem">Page #2</div>
<div Id="menuItem4_3" class="menuItem">Page #3</div>
<div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Page #4-1</div>
<div Id="menuItem5_2" class="menuItem">Page #4-2</div>
<div Id="menuItem5_3" class="menuItem">Page #4-3</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem">Page #1-1</div>
<div Id="menuItem6_2" class="menuItem">Page #1-2</div>
<div Id="menuItem6_3" class="menuItem" menu="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div><!-- End of Menu -->

Step 1 was easy.

Step 2 Couldn't find a <body> tag but noticed there was one in the script so copied it just after the </head> tag.

Step 3 Copied this just below the step 2 code.

Cheers
fredmv
12-04-2003, 05:30 PM
So you only have that code? If so, that's why you're getting all of those errors! There are external files you need in order for the menu to function properly. For example, on this line:<script language="javascript" src="CascadeMenu.js">You must have the file CascadeMenu.js in the same directory for the menus to work. Also, as shown on this line:<link href="CascadeMenu.css" rel="stylesheet">You also need that external CSS stylesheet. That's most likely why it isn't being displayed properly — simply because there are styles defined in that file in which make the menu display properly. So, check to make sure that you have these files and that they're in the same directory as the file that is referencing them.
Maverick6215
12-04-2003, 05:34 PM
I'm using Terrapin. Can I assume that, as all hml files are being uploaded to htdocs folder that that is where I place these script files?

Thanks for all your help
fredmv
12-04-2003, 05:37 PM
You're welcome. Terrapin? I haven't used that before but I'll assume it's an FTP client. Well, check your htdocs directory and confirm that those two previous files are in fact uploaded.
Maverick6215
12-09-2003, 02:56 PM
Hi

Sorry for the long delay in reply.

Yes, Terrapin is a FTP client.
woodknut
12-09-2003, 05:51 PM
Maverick,
I suspect that you're missing the proper placement of opening and closing tags as well:

<HTML>
<HEAD>
<!-- this is where style sheets, javascript etc go -->
</HEAD>
<BODY>
<!-- this is where your html page coding goes -->
</BODY>
</HTML>

You probably won't get any load errors because the *.css is missing; you'll probably just default to whatever font/color/size, etc that the browser uses. Still, its a good idea to have it available if you're including it ;).

You will definitely need the cascade.js file as I suspect the functions InitMenu() and HideMenu() are in there.

HTH
Woodk
Maverick6215
12-10-2003, 12:41 PM
I have now got the menu to work OK; many thanks.

Unfortunately, it wasn't the effect I really wanted.

I actually require the kind of menu that often appears down one side and, clicking on the main menu item shifts all the others down allowing the submenu items to be viewed. Clicking on the main item again removes the submenu items and shifts everything back up again.

Sometimnes I have seen a '+' sign to the left as well.

Is there such a routine avaialble?

Thanks fo any help.
woodknut
12-10-2003, 04:41 PM
"A" routine? :p

You're basically asking to display (or hide) text items based on user action (i.e. mouse click).

My understanding of what you're after would require you to use DOM (Domain Object Model ?) elements for "visible" and/or "hidden". These elements are not fully supported by all browsers; and not supported in the same ways either.

I have seen discussion of something called "layers" for Netscape? that would do this also.

Shorter answer is that I have seen some routines (specific to IE IIRC) that would do this on this forum but don't recall the thread name. A google search will return a number of sites that have javascripts on them also (its how I found this one :) ).

woodk
Maverick6215
12-10-2003, 05:52 PM
Thanks.

I, too, came across this forum from a Google search for 'cascading menus'.

I'll do a search for layers.

Cheers
woodknut
12-10-2003, 06:02 PM
Here's a couple more places to check out:

http://www.javascriptkit.com/cutpastejava.shtml

http://www.faqts.com/knowledge_base/index.phtml/fid/53

Here's a link similiar to what I was referring to earlier about hidden/visible:

http://www.faqts.com/knowledge_base/view.phtml/aid/1132/fid/129

Sorry that I haven't been at this long enough to be more help.

woodk
Maverick6215
12-10-2003, 06:06 PM
Thanks Woodknut.

It seems, from the first of the sites you sent, that it's actually a Tree Menu I'm after. There's some stuff to download which I have done but it is late now so will venture further tomorrow.

Once again, thanks.
woodknut
12-10-2003, 06:12 PM
Hey! Did you download the cascademenu.zip file?
It has the Initmenu() function in it :

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++)
...
...


should work for what you want!
Mind you it'll probably only work for IE 4+


woodk.