PDA

View Full Version : how to make external- anylink dd css



clp
05-10-2006, 03:31 PM
Hi-

I am very new to all this so-
How do I add this menu to every page (I have about 24 pages) without copying all the script into the header section?
I can put the copyright into each header- but how to I call this externally?

http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

How do I make my links

<a href="myhtml.htm" onClick="return clickreturnvalue()" ..... into a separate css file then put the css files and the javascipt into the header section?

If I change the drop down menu, I don't want to have to change the <a href section on every single page. Although I have searched, I can't seem to find any examples of how to do this. I am trying use the anylink drop down CSS script.

Thanks
CLP

jscheuer1
05-10-2006, 05:09 PM
Not a good idea. Parts of it are. All of it can be, if done properly but, this depends upon your having access to server side scripting on your host. The parts that can easily be made external with no consequences for the non-javascript enabled user are the javascript and the the style. When it comes to the header links, these should be made external only with a server side include (PHP is the most popular around here). To do this, you need access to a server side scripting language like PHP or asp, etc. The reasoning for this is that a non-javascript enabled browser should be able to navigate your site and the href's contained in links like these:


<a href="myhtml.htm" onClick="return clickreturnvalue()" ...

Will work as ordinary links in these browsers and should be used to facilitate site navigation for them. Css cannot be used to make these or any links external. Css is only for setting the style of things on your page, not content.

Using the demo you linked to, we can make its style external by saving this:


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

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

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


in a text editor, save the file as anylinkdd.css and link to it in the head of the pages that will use it via this tag:


<link rel="stylesheet" type="text/css" href="anylinkdd.css">

A similar method can be used for the script, save this in a text editor and call it anylinkdd.js:



/***********************************************
* 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="-500px"
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

It can be linked to the pages that will use it via a tag like this in the head of each page:


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

/***********************************************
* 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
***********************************************/

</script>

As for including the HTML or body section in your page, that should either be pasted into each page or included via server side scripting in the manner appropriate to the server side language available to you, if any.

With a decent text editor that can make editing files globally an easy task, editing this part on many files would be fairly simple but not as easy as editing one file, if you have access to a server side include language that is.

clp
05-10-2006, 08:42 PM
Thanks- makes sense now.
Since I am doing this for a friend, I don't want to learn another scripting language- doing kshell scripts and dba work for my real job can overload the brain.

Thanks for the very good explanation of how this works. Had externalized the files and didn't know why they wouldn't work. (not hosted yet) - just designing for now...

clp
05-11-2006, 04:21 AM
I tried this- maybe I misunderstood.

Had the href in the file- the js and css separate as indicated and referenced. Error on the page was that an object was missing. If these are separate files, then you must use server side scripting?

Put the javascript back into the page, and kept the css external- the drop down menu part drops down in the upper left hand corner of the page instead of under the menu link, which I put in a table mid page.

????

I guess I am lazy- I just hate making so many edit changes- and I don't have any unix like commands on my pc....I really don't want to add a menu item to each and every page when something changes.

jscheuer1
05-11-2006, 04:35 AM
Sounds like your links are wrong, or you included inappropriate content in one or more of the external files, or that they weren't where the page thought that they'd be or a combination of some or all of the above. Could be something else.

Please post a link to the page on your site that contains the problematic script so we can check it out.