Any link drop down menu - make life easy

**Unsigned** · 09-14-2005, 07:05 PM

I have over 300 pages on my site so everytime i want to change a link i have to go through them all. Is there any way of putting the javascript on my server and then running it on all of the pages like a style sheet or is it a stle sheet?. Is this possable and if so how. You can view the site at http://unsignedmuzik.com

**ddadmin** · 09-14-2005, 09:22 PM

You can certainly put the script in an external .js file, and the stylesheet, in a .css file. Then, reference these two files on all pages of your site. To take it a step further though, I recommend using SSI (server side includes) to embed the menu on your pages: http://www.javascriptkit.com/howto/externalhtml3.shtml

**Emador** · 09-15-2005, 05:23 PM

Originally Posted by ddadmin

You can certainly put the script in an external .js file, and the stylesheet, in a .css file. Then, reference these two files on all pages of your site.

I've just spent the last hour or so trying to get this script to work with external files. The .css file imports ok, but the whilst the menus work fine if the javascript is directly in the HTML, it doesn't if I link to an external .js file

The relevant HTML:

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="topmenu.js"></script>
</head>

The contents of topmenu.js are everything between <script> and </script> from the original code.

Any suggestions on what I'm doing wrong, please?

**jscheuer1** · 09-15-2005, 05:34 PM

Not sure what script you are using so, cannot tell what you've put in your topmenu.js file. Make sure you also removed:



(if there) from the beginning and end of the script. Make sure topmenu.js is in the same directory as the page that uses it and if the script belongs in the body, put the link to it there, not in the head.

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
PLEASE: Include the URL to your problematic webpage that you want help with.

**ddadmin** · 09-15-2005, 06:58 PM

Hmmm do you have a URL to the problem page? Also as jscheuer1 mentioned, in the future, please make sure you're familiar with the proper format for posting a question, namely, by posting the URL to the page on DD where you got the script.

**Emador** · 09-15-2005, 09:13 PM

Originally Posted by jscheuer1

Not sure what script you are using so, cannot tell what you've put in your topmenu.js file. Make sure you also removed:

Apologies - this script: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

and the content of topmenu.js (copied directly from the above):

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//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://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

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

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

As I mentioned before, it works fine when in the HTML between the head tags, but not as an external .js file.

I'll try and get a copy of the page up, but it doesn't seem to be my week - my ftp keeps timing out. I'll try again in the morning, see if the host has fixed the issue.

**Emador** · 09-16-2005, 10:49 AM

Apologies for the double post, but I've got the troublesome pages up for you to look at.

This is the DD Script I'm using: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

First, with the menu working (with the script in the head tags)

Working script

Then, the exact same page, the only difference being that the script for the menus is external (in topmenu.js) and referenced using the line:

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

Non-working script

Thanks again for your help with this.