A question about javascript files

Status
Not open for further replies.
R

rlodge

Member
Messages
230
Reaction score
0
Points
16
I've googled my brains out and can't find the info I need so hopefully someone here can help. I am designing a new site and I made a javascript navigation bar for the site. What I would like to know is, "Is there a way to link to the javascript file like you link to a .css file?".

I want to add a .js file in my site, place a link in the head of my pages and have it loaded in the top navigation area of all my pages. Is this possible? If it is, where can I find information on how to do this? I've found info about loading javascript at page load but nothing tells me how to define the location where the script will load.

I should have prefaced this with the fact that I am a novice to all this. I've got about a 70% grasp on writing css files and about a 15% grasp on javascript.

Any help is appreciated, even if that help is only a link to point me in the right direction.

Thanks
 
flinx

flinx

New Member
Messages
68
Reaction score
0
Points
0
<script type="text/javascript" language="javascript" src="javascriptname.js"></script>

Put this whereever you want to load the script.
 
DefecTalisman

DefecTalisman

Community Advocate
Community Support
Messages
4,148
Reaction score
5
Points
38
You will then need to call the script as a function(bearing in mind that you can't have functions within a function).

You would do this like so as to the above example :


Code: 
<script type="text/javascript" language="javascript" src="javascriptname.js">
what_ever_you_want_to_call_it(variable,var,another_var);
</script>

Code: 
function what_ever_you_want_to_call_it(variable,var,another_var) {
 ....
}
 
Last edited:
R

rlodge

Member
Messages
230
Reaction score
0
Points
16
I guess I have more problems than just how to put it where I want it. I tried what you gave me above and nothing. No navigation bar at all. It's probably something else I'm doing wrong.

I typed out the script file in notepad and saved it as "navbar.js". If I place the script directly into the head and content area I want the bar to be in, it works fine. If I just place the "navbar.js" in the root of the website and use the code given above, nothing happens.

This is the script if it helps:

<script language="javaScript" type="text/JavaScript">
<!-- Begin

image1 = new Image();
image1.src = "buttons/about-over.gif";

image2 = new Image();
image2.src = "buttons/directionsover.gif";

image3 = new Image();
image3.src = "buttons/links-over.gif";

image4 = new Image();
image4.src = "buttons/comments-over.gif";

image5 = new Image();
image5.src = "buttons/contacts-over.gif";

image6 = new Image();
image6.src = "buttons/calendar-over.gif";

image7 = new Image();
image7.src = "buttons/bar.gif";

image8 = new Image();
image8.src = "buttons/bar.gif";

// End -->
</script>


<img name="image7" src="buttons/bar.gif" alt="Navbar"
border="0">
<a href="http://msmcctt.exofire.net"
onmouseover="image1.src='buttons/about-over.gif';"
onmouseout="image1.src='buttons/about-up.gif';"><img
name="image1" src="buttons/about-up.gif" alt="Home"
border="0"></a>
<a href="http://msmcctt.exofire.net/Directions.html"
onmouseover="image2.src='buttons/directions-over.gif';"
onmouseout="image2.src='buttons/directions-up.gif';"><img
name="image2" src="buttons/directions-up.gif"
alt="Directions" border="0"></a>
<a href="http://msmcctt.exofire.net/Links.html"
onmouseover="image3.src='buttons/links-over.gif';"
onmouseout="image3.src='buttons/links-up.gif';"><img
name="image3" src="buttons/links-up.gif" alt="Links"
border="0"></a>
<a href="http://msmcctt.exofire.net/Comments.html"
onmouseover="image4.src='buttons/comments-over.gif';"
onmouseout="image4.src='buttons/comments-up.gif';"><img
name="image4" src="buttons/comments-up.gif"
alt="Comments" border="0"></a>
<a href="http://msmcctt.exofire.net/Contacts.html"
onmouseover="image5.src='buttons/contacts-over.gif';"
onmouseout="image5.src='buttons/contacts-up.gif';"><img
name="image5" src="buttons/contacts-up.gif"
alt="Contact Us" border="0"></a>
<a href="http://msmcctt.exofire.net/Calendar/plans.cgi"
onmouseover="image6.src='buttons/calendar-over.gif';"
onmouseout="image6.src='buttons/calendar-up.gif';"><img
name="image6" src="buttons/calendar-up.gif"
alt="Calendar" border="0"></a>
<img name="image8" src="buttons/bar.gif" alt="Navbar"
border="0">
Click to expand...

Any thoughts? (And yes, I had a lot of help with the script. I retyped it from an example so I could hopefully learn something.)
Edit:
DefecTalisman said:
You will then need to call the script as a function(bearing in mind that you can't have functions within a function).

You would do this like so as to the above example :


Code: 
<script type="text/javascript" language="javascript" src="javascriptname.js">
what_ever_you_want_to_call_it(variable,var,another_var);
</script>

Code: 
function what_ever_you_want_to_call_it(variable,var,another_var) {
 ....
}
Click to expand...

I'm sorry but I'm a little slow with this. In your example above, are you stating it should look like this?:

Code: 
<script type="text/javascript" language="javascript" src="navbar.js">
var (navbar);
var navbar {
}
</script>

And thank you for the help.
 
Last edited:
DefecTalisman

DefecTalisman

Community Advocate
Community Support
Messages
4,148
Reaction score
5
Points
38
Ok, try this :

save me as nav.js
Code: 
function gen_nav()
{
image1 = new Image();
image1.src = "buttons/about-over.gif";

image2 = new Image();
image2.src = "buttons/directionsover.gif";

image3 = new Image();
image3.src = "buttons/links-over.gif";

image4 = new Image();
image4.src = "buttons/comments-over.gif";

image5 = new Image();
image5.src = "buttons/contacts-over.gif";

image6 = new Image();
image6.src = "buttons/calendar-over.gif";

image7 = new Image();
image7.src = "buttons/bar.gif";

image8 = new Image();
image8.src = "buttons/bar.gif";

}

Put this in your page :
Code: 
<script language="JavaScript" type="text/javascript">
gen_nav();
</script>


<img name="image7" src="buttons/bar.gif" alt="Navbar"
border="0">
<a href="http://msmcctt.exofire.net"
onmouseover="image1.src='buttons/about-over.gif';"
onmouseout="image1.src='buttons/about-up.gif';"><img
name="image1" src="buttons/about-up.gif" alt="Home"
border="0"></a>
<a href="http://msmcctt.exofire.net/Directions.html"
onmouseover="image2.src='buttons/directions-over.gif';"
onmouseout="image2.src='buttons/directions-up.gif';"><img
name="image2" src="buttons/directions-up.gif"
alt="Directions" border="0"></a>
<a href="http://msmcctt.exofire.net/Links.html"
onmouseover="image3.src='buttons/links-over.gif';"
onmouseout="image3.src='buttons/links-up.gif';"><img
name="image3" src="buttons/links-up.gif" alt="Links"
border="0"></a>
<a href="http://msmcctt.exofire.net/Comments.html"
onmouseover="image4.src='buttons/comments-over.gif';"
onmouseout="image4.src='buttons/comments-up.gif';"><img
name="image4" src="buttons/comments-up.gif"
alt="Comments" border="0"></a>
<a href="http://msmcctt.exofire.net/Contacts.html"
onmouseover="image5.src='buttons/contacts-over.gif';"
onmouseout="image5.src='buttons/contacts-up.gif';"><img
name="image5" src="buttons/contacts-up.gif"
alt="Contact Us" border="0"></a>
<a href="http://msmcctt.exofire.net/Calendar/plans.cgi"
onmouseover="image6.src='buttons/calendar-over.gif';"
onmouseout="image6.src='buttons/calendar-up.gif';"><img
name="image6" src="buttons/calendar-up.gif"
alt="Calendar" border="0"></a>
<img name="image8" src="buttons/bar.gif" alt="Navbar"
border="0">

Please note I have very limited knowledge of JS.
 
R

rlodge

Member
Messages
230
Reaction score
0
Points
16
Thank you for your help. That works just fine. One thing I did note was that I goofed by not putting the <img> tags in the body. I thought they would load along with the script. Now I know better.
 
Status
Not open for further replies.
Top