PDA

View Full Version : Any Link Drop Down Menu Question



nootkan
05-23-2005, 04:47 PM
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.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
05-23-2005, 05:33 PM
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
05-23-2005, 06:25 PM
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
05-23-2005, 07:17 PM
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
05-23-2005, 09:10 PM
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
05-23-2005, 09:18 PM
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
05-23-2005, 10:37 PM
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 (http://www.bottlecaplure.com/newsite.php)

Thanks for all your help!!

jscheuer1
05-24-2005, 02:15 AM
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
05-24-2005, 06:12 AM
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
05-24-2005, 07:18 AM
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.

stipl
05-24-2005, 05:49 PM
I'm successfully using the AnyLink Drop Down Menu and everything works exactly like the sample on the page (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm). The problem I have is exactly what jscheuer1 stated

"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."

I would very much like to be able to use the links (default.htm in the example) as well as links in the drop down. What should I modify? Thanks

nootkan
05-24-2005, 05:54 PM
John, thanks again for all your help. I will post on the general coding board under javascript for my questions pertaining to the banner rotation script.

As for the default.htm links you refer to. Does this mean that they will only work in non enabled javascript browsers? They seem to work fine for me with a javascript enabled browser now. I've also decided to add text links at the bottom of the page for those who fear javascript. I see so many sites out there with drop down menus, do they all have the same problem with non-javascript enabled browsers or do certain drop down menus work in non-javascript enabled browsers? I was thinking about trying the drop down menu in my Dreamweaver MX 2004 program.
Nootkan

stipl
05-24-2005, 05:56 PM
Just tried a few things:
Removing the {onClick="return clickreturnvalue()} in the link fixes my problem.

jscheuer1
05-24-2005, 07:04 PM
to nootkan,

Home Community Contact Legal Links Products Services Top Sites

When I click on any of those, nothing happens. That's what I am talking about. Without javascript enabled, those should become active links but, at the moment they are all 'default.htm'. But it gets worse, in IE6 without javascript the page looks horrible and there is no menu at all. In FF, still no menu but, at least it looks ok. This is something that, if you are concerned about it, you should work on by turning javascript off and trying to get it to look OK like that. Once you have a good non javascript page, you can add javascript embellishments to it. Hopefully, without messing up the good that is already there. This can be done, just takes a little more ingenuity. Another approach is to serve up a non-javascript page that has a script on it to redirect to the javascript page. Only folks with javascript will be taken to the javascript page. Don't feel bad, many 'professional' sites are crap without their scripts though, many are not. It is up to you but, I wanted you to know about it.

nootkan
05-25-2005, 06:44 AM
John, thanks for the advice. I'm wondering how many actual browsers are out there without javascript enabled. I will keep plugging away.
Nootkan

nootkan
05-28-2005, 09:59 PM
I am having problems getting the menu text to show up in a disabled javascript browser. I can't seem to get any text to show up at all, but everything seems to work great in a javascript enabled browser. I know the previous post mentions the no script tags, but I don't know where to place them. Everything I try fails. I have attached my .js files that I've written. Any help is appreciated.
Paul

nootkan
05-30-2005, 06:18 AM
Just thought I'd post to say I've figured it out. Used the noscript tags to create another nav bar using text only.
Nootkan