AnyLink Drop Down Menu

[Zaph]

Script: AnyLink Drop Down Menu
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

Just a quick (simple) question from a newbie:
How do I make this script highlight each link on mouseover with a different bg colour?

Thanks!

[ddadmin]

Ok, do the following:

1) Add the below rules to your CSS style sheet for the script:

#dropmenudiv a{
display: block;
width: 100%;
}

#dropmenudiv a:hover{
background-color: yellow;
}

2) Then, remove the <br> tags at the end of each your menu links code, for example:

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://builder.com">Builder.com</a>'

In other words, the <br> in menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br>'

That's it!

[Zaph]

Thanks a bunch for that, it looks great now!

I do have one more question regarding this script though which may be a little more difficult.

Is there any way i can have a single copy of the script hidden away somewhere, and all pages that contain the menu just point to it, instead of hard coding it in to each page?
I'm finding it a little tedious haveing to go to each page within my site to make a simple change such as the bg colour or adding a new link.

Thanks again

[jscheuer1]

It should be possible.

First save the style to a file without the <style type="text/css"> and the </style> tags, call that file anylink.css

Second save the script to a file without the <script type="text/javascript"> and the </script> tags, call that file anylink.js

Put these two files in the same directory as your pages that use them (or in special directories, many folks put *.css files in a directory call style and *.js files in one called scripts). In the head of each page where you want the menu to appear, put these two statements (if using special directories, include the path to these files in their respective statements):

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

That's the relative easy part. You will still need to put the HTML markup for the menu on each page unless you make another file that will help do that for you. I will tell you how to make that file but, it will help tremendously if you know how to construct valid document.write statements in javascript, incase the converter makes a booboo. Go to:Convert HTML to JavaScript

Paste the HTML for your menu into the form provided and submit it. It will be converted to document.write format. Or if you know how to write the code, write it. Save the new code to a file without the beginning:

&lt;SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers

and ending:

// End Hiding -->
</SCRIPT>
<!-- Size: 456 bytes -->

statements, if using the converter. Call that file any_menu.js and put it in the directory of the pages that will use it or in the scripts directory. Then on each page at the spot where you want the menu to appear, put this:

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

For another example, let's say you put the file in the scripts directory just off of the directory where the page you want it on is located, then use:

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

That's about all there is to it, except be sure that any file, page or URL you reference from either of these *.js files is expressed in absolute terms (ex: http://www.wherever.com/somedirectory/somefile.htm), unless you understand how a relative path (ex: pictures/gallery.htm) will be interpreted.

[Zaph]

Hi, I'm having a few problems putting this into action - I must inform you that i'm a total newbie, and i'm learning the whole trade as i go along!

I followed your instructions as best i could but i get a runtime error when i preview my test page saying i have an unterminated string constant. have i made a simple error or is something more major happening here?

I think the problem might be a result of my conversion of the html markup into js, as i haven't got a clue what i'm doing here.

Here is the contents of the css file:

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
display: block;
width: 100%;
}

#dropmenudiv a:hover{
background-color: 'FAFD73';
}

Here is what came out of the conversion using the website you recommended:

document.write("<p align='center'></font><font size="
 +"'4'><a href='index.htm'>Home</a> |&nbsp;<a onClick"
 +"='return clickreturnvalue()' onMouseover='dropdown"
 +"menu(this, event, menu1, '150px')' onMouseout='del"
 +"ayhidemenu()'>  
News</a> |&nbsp;<a onClick='retur"
 +"n clickreturnvalue()' onMouseover='dropdownmenu(th"
 +"is, event, menu2, '150px')' onMouseout='delayhidem"
 +"enu()'>Mail  
Outs</a> |&nbsp;<a onClick='return c"
 +"lickreturnvalue()' onMouseover='dropdownmenu(this,"
 +" event, menu3, '150px')' onMouseout='delayhidemenu"
 +"()'>Contact  
Details</a> |&nbsp;<a onClick='retur"
 +"n clickreturnvalue()' onMouseover='dropdownmenu(th"
 +"is, event, menu4, '150px')' onMouseout='delayhidem"
 +"enu()'>Office  
Toolbar</a></p> 
");

Thanks once again for all your help, you're doing a great job!

[jscheuer1]

Try this for the any_menu.js file:

with(document){
writeln("<p align='center'></font><font size='4'><a href='index.htm'>Home</a> |&nbsp;<a ");
writeln("onClick='return clickreturnvalue()' onMouseover='dropdownmenu(this, event, menu1, '150px')' ");
writeln("onMouseout='delayhidemenu()'> News</a> |&nbsp;<a onClick='return clickreturnvalue()' ");
writeln("onMouseover='dropdownmenu(this, event, menu2, '150px')' onMouseout='delayhidemenu()'>Mail Outs</a> |&nbsp;");
writeln("<a onClick='return clickreturnvalue()' onMouseover='dropdownmenu(this, event, menu3, '150px')' ");
writeln("onMouseout='delayhidemenu()'>Contact Details</a> |&nbsp;<a onClick='return clickreturnvalue()' ");
writeln("onMouseover='dropdownmenu(this, event, menu4, '150px')' onMouseout='delayhidemenu()'>Office Toolbar</a></p> ");
}

I did say it would help if you knew about document.write, not your fault that you didn't.

[Zaph]

Thanks for that, i had a look at other document.write files, and saw that mine looked very different!

I've just added what you said, but now i'm getting a syntax error. Is there something else I've missed?

I'm determined to get this sorted!

here is the code for the test page:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test 1</title>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">

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

</head>

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

</body>

</html>

Many thanks (once again!)

[jscheuer1]

OK, here is the thing. I took the demo HTML markup and converted, no problem:

document.writeln('<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, \'150px\')" onMouseout="delayhidemenu()">Web Design</a> |');
document.writeln('<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, \'200px\')" onMouseout="delayhidemenu()">News Sites</a> (onclick)');

so either write your code into this as a template or post the plain HTML markup, make sure it works first, and I'll convert it for you. Hopefully you will soon be an expert at doing this yourself. What I did to convert the example code was simply:

1) substitute \' for all ' (that's a single quote).
2) begin each line with:

document.writeln('

3)end each line with:

');

I didn't use that converter, I'm beginning to think it is of less value than I had originally thought (read useless). Anyways, there is one other thing, on your example page you have no <body> tag. That did not cause the problem though.

[Zaph]

Success!

It works perfectly now! Thanks for all your help with this, you've just gone straight to the top of my xmas card list!

Keep up all the good work, this site is amazing.

Added:
Ok, it WAS working perfectly, but now on some pages the last drop down is appearing too far to the right and slightly below where it should. Any ideas whats gone wrong?

I've been adding the necessary code and removing the old stuff from each page, and the first few work fine, but all subsequent pages have this problem, even though they are in the same subfolder as the working ones.

Added:
Right, not sure what the problem was, but i think it had something to do with me replacing the old code which was contained in a text box with the new script sourcing. I simply deleted the old text box an recreated it again, and now it works fine, so ignore my previous question, and i'll finish by saying thanks again!

[jscheuer1]

I would have to see this to fix it. If you use the code that you have in the external files directly on the problem pages, is there still a problem? Where I am going with that question is - was the set-up on the now problem pages somehow different than what you are using in your external files?