Any Link Drop Down Menu Question

[nootkan]

http://www.dynamicdrive.com/dynamici...pmenuindex.htm

Hello, I am trying to make this script work on my server instead of residing on the page for web optimization purposes. I have tried creating a navbar.js and navbar.css file and then placing on my server. I cannot seem to get the <script language="JavaScript" src="navbar.js"></script> or the <script language="JavaScript" src="navbar.css"></script> to work. I have other similar scripts on my server using this format that work fine. The Any Link script works fine when placed right on the page however, so I know it must be something simple that I'm overlooking. Can anyone point me down the right path?

[Zaph]

I needed the same thing for my site, and was sent in the right direction by asking here, and now, I'll return the favour!

First of all you need the script and the style in separate pages (as you have already said you have done).
You then need to create a second .js file in document.write format which will do the actual menu bar.
Like so:

with(document){
document.writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, \'150px\')" onMouseout="delayhidemenu()">Web Design</a> |&nbsp;');
document.writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, \'150px\')" onMouseout="delayhidemenu()">New Sites</a></p>');
}

and call it navbar_menu.js.

Then all you will need to do is place

<link rel="stylesheet" href="navbar.css" type="text/css">
<script src="navbar.js" type="text/javascript"></script>

in the header of each page that uses the menu and

<script src="navber_menu.js" type="text/javascript"></script>

where you want the menu to appear.

That's pretty much what I did and it works for me!

Martyn.

- credit to jscheuer1 for the help in the first place

[nootkan]

Martyn, thanks for your help, however it didn't work for me. I have my menu links in separate tables to keep them evenly spaced apart. I tried adding the tables to the navbar_menu.js and that didn't work either.

[jscheuer1]

Can't be sure but sounds like you're having trouble writing navbar_menu.js. Either that or your original external files were flawed. Forget about navbar_menu.js for a moment, can you get it to work with your HTML markup on the page and your external .js & .css files in the head of your document? If not, there is something wrong with them. Did you remember to remove the beginning and ending script (<script> </script>), style (<style> </style>) and comment (<!-- and //-->) tags from the external files? If that's not it, post a link to what you have so far so I can diagnose the trouble.

[nootkan]

The only way it works is to place code into header and body like the instructions state, but I wanted to try and do externally to optimize my site. However, because of the size of the code, I'm not sure if I copied and pasted it correctly in the navbar.js file. For example the last few lines of code reads:

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

That doesn't look right to me, but when I add } to the end it doesn't work either. I'm okay with smaller scripts externally, but cannot seem to get this one.

I'd attach my .js files but I don't see a way to do so on this forum.

[Zaph]

The final if statement of the script does not need a closing } as the is no { to close.

To attach your .js file simply click on "post reply" instead of using the quick reply option and scroll down the page.
Below the "reply to thread" section is an "additional options" section which has a button for attaching any files you want to, called "manage attachments". You will need to either first zip the .js or save it as a .txt first though, as .js files are not allowed to be attached, I'm guessing for the obvious security reasons.

Martyn

[nootkan]

Well I'm not sure what I done wrong, but after deleting all files and starting over, I seem to have it working. I didn't use the created nav_menu.js file for the document.write format though, just left it the way it is. I would still like to learn how to use this document.write format if I could. I can't seem to get it to work with my tables, but I'll keep trying. I've attached the nav_menu.js zipped file for you to look at. Can this format be used for all scripts on my page? For example, I have some script that rotates banners on my site and I would love to place that externally also. To view the page source you can go to: Bottlecaplure Company

Thanks for all your help!!

[jscheuer1]

Your page looks pretty neat! The main problem you had was using unescaped single quotes inside your writeln statements. When you use writeln('some stuff here to write to the page'), if you put a single quote (') in there it has to be escaped with a downslash (\). Your use of:

'150px'

should therefore have been:

\'150px\'

There were a few other problems with the code but, none of those would have made it not work at all, like the above does. In case you are interested, when you use:

with (document){
lines of code go here
}

you don't need to use:

document.

at the beginning of every line. Also, you inserted some non-breaking spaces (&nbsp;) into the code that are not there on your page, that would throw things off a bit appearance wise. Finally, although it is workable, you haven't closed any of your <TD> tags, a very minor point in this case.

I have a problem though, with putting the visible part of this menu into an external script file. If someone visits your site without javascript enabled, they will see nothing, or worse (like the rest of your page out of alignment). As it is now, there are default pages you could be sending folks without script to. I suggest you worry about configuring those, rather than getting this part of the menu into an external file.

About your banner script, that should not be a problem to put into an external file. It doesn't need any writeln statements in it. Again, a very nice looking site!

[nootkan]

Thanks for your help. I didn't even think about those who disable javascript. As for the default links, they're just temporary until I complete the other pages then they will all link together. Is there someway to make this compatable with all browsers? What about using hidden text to warn users to enable javascript? Is that possible?

As for the body tag banner rotation script, do you mean that I can create an external js file and point to it like the others? It already uses an external script which used to be in the head tags. I'll give it a try to see if I can make it work.

Thanks again for all your help.

[jscheuer1]

You can put content you wish only those without javascript to see in the body of your page enclosed in the:

<noscript>non javascript content goes here</noscript>

tags. However, for people unwilling or unable to turn javascript on, a warning or advisory isn't such a good solution. The AnyLink Drop Down Menu does have the default.htm's for which you can substitute the actual addresses of real pages. These links will only be active for non-javascript enabled browsers. They could take folks to a navigation page that has the same choices (presented as conventional links) on it that the drop down for that link has, along with an advisory that the site is best experienced with javascript/active scripting enabled.

Let us know if you have trouble with the banner rotation script. Best to post about that in the general coding section under JavaScript. Also, that would be a great place to use the noscript tag to insert a static image chosen from all of the rotating banners that will be seen by non-javascript enabled browsers.