All Javascript code placed in an external JS file as well?

[razsports]

I was wondering how I get the coding(show below) to work within all my HTML pages? I know how to do it with CSS, but this javascripting is driving me nuts. I've tried creating a file for it.......Please help :)

/***********************************************
* 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 5
var menu5=new Array()
menu5[0]='Baseball
'
menu5[1]='Basketball
'
menu5[2]='Wrestling
'





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+';backg round-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!="4"){
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().clientWid th-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
}
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

</script>

[paulhiles]

The code you've posted above needs to be saved with the .js extension (javascript file).
Then you can simply link to the script from the <head> of your web page (example below).

<html>
<head>
<title>Sports: For Sports Directory, PPC Engine, Forums, Blogs, Radio, Site Reviews, Rumors, RPG</title>
<meta name="keywords" content="sports, sports ppc search engine, sports blogs, sports radio, sports rumors, sports forums, sports rpg">
<meta NAME="description" CONTENT="Search our human edited sports pages for rumors, wanted lists, site reviews, blogs and
links to other sports related websites">
<META name="allow-search" content="yes">
<META name="audience" content="all">
<META name="robots" content="all, index, follow">
<link rel="StyleSheet" href="http://www.raz-sports.com/style.css" TYPE="text/css" MEDIA=screen>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
-->
</style>

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

</head>

Then you would add the code calling the menu functions to the navigation area in the <body> section of your page.

<body bgcolor="#FFFFFF">

Web Design |

News Sites (onclick)

Does that help at all?

Paul

[razsports]

Hi Paul,

I placed that(my) javascripting code all into a file called razsports.js

Then in my HTML header I did this:

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

But then I went back to my site and the sports rumors
is not working correctly. Comes up as error. It is supposed to allow you to click over sports rumors and others links appear such as baseball.

[paulhiles]

Whereabouts on your site are you testing this?
Try posting a link to a URL and I'll see what I can do to help.

Paul

[razsports]

Hi paulhiles,

Here is the page I uploaded for you to check out:

http://www.raz-sports.com/test45.html

[paulhiles]

Try replacing your current stylesheet (style.css) with the following. There were several invalid lines in there that were causing problems. The stylesheet still needs some work but you should find the menu drops down in the correct position now.

/* CSS For Style(styleid: 3) */
body
{
background-color: #FFFFFF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px;
}
a:link
{
color: #22229C;
}
a:visited
{
color: #22229C;
}
a:hover, a:active
{
color: #FF4400;
}
.page
{
background-color: #FFFFFF;
color: #000000;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background-color: #D1D1E1;
color: #000000;
border: 1px solid #0B198C;
}
.tcat
{

color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active
{
color: #FFFF66;
text-decoration: underline;
}
.thead
{


color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link
{
color: #FFFFFF;
}
.thead a:visited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active
{
color: #FFFF00;
}
.tfoot
{
background-color: #3E5C92;
color: #E0E0F6;
}
.tfoot a:link
{
color: #E0E0F6;
}
.tfoot a:visited
{
color: #E0E0F6;
}
.tfoot a:hover, .tfoot a:active
{
color: #FFFF66;
}

.raz_sports
{
background-color: #738FBF;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}

.raz_sports a:link
{
color: #FFFFFF;
text-decoration: none;
}
.raz_sports a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.raz_sports a:hover, .raz_sports a:active
{
color: #FFFFFF;
text-decoration: underline;
}

#dropmenudiv{
position:absolute;
border:1px solid #31309C;
color: #FFFFFF;
font:normal 10pt Verdana;
line-height:1.3em;
margin-top:0.2em;
padding:0.2em

}
#dropmenudiv a:link {
color: #FFFFFF;
text-decoration:none;

}
#dropmenudiv a:hover, a:active {
color: #FFFFFF;
text-decoration: underline;
}

[razsports]

Hi paulhiles,

I added the css coding.However, now the 3 links that are supposed to go with the sports rumors such as baseball, are not appearing.

[paulhiles]

I'm not seeing any change in the style.css

Are you sure you've uploaded the new version?

Paul

[razsports]

paulhiles,

the CSS style is now uploaded. See the sports rumors drop down? The 3 links are now appearing and working.
Not sure what I am missing. I think I might have over-looked something.

[paulhiles]

I know what you're missing!
Try adding this to the razsports.js file

var menubgcolor='#738EBD' //menu bgcolor

This will provide a suitable background color for the text links in your dropdown.

Paul

[razsports]

paulhiles,


It worked :) Thanks :)