Welcome to WebmasterWorld Guest from 23.20.241.155

Forum Moderators: open

Message Too Old, No Replies

Placing JS in a separate file

My script no longer works once it's removed to a separate file

     
12:57 pm on Jul 8, 2005 (gmt 0)

10+ Year Member



I've seen the below used to avoid large blocks of js at the top of a page:

<SCRIPT type="text/javascript" src="javascript.js"></SCRIPT>

Where the script is dumped into the(imaginitively titled) 'javascript.js' file in my root folder, which reads thusly:

// JavaScript Document
<script language="JavaScript" type="text/JavaScript">
<!--
-----blah blah blah----
//-->
</script>

However, this doesn't appear to work. Please, is there any chance someone can point out what i've messed up?

1:21 pm on Jul 8, 2005 (gmt 0)

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi kate theisinger, welcome to WebmasterWorld.

Is your HTML document in the root folder too? If not, you might want to modify the path, notice the slash:

src="/javascript.js"
1:32 pm on Jul 8, 2005 (gmt 0)

5+ Year Member



You do not need to specify
<script language="JavaScript" type="text/JavaScript">

inside a .Js file.

Just add your Js directly

// some funciton
function(){
alert('Hello world!');
}

2:09 pm on Jul 8, 2005 (gmt 0)

10+ Year Member



Hi, thanks for the responses...

Yep, both files are in the same folder.

And sadly it doesn't work any better even if i remove the <script language="JavaScript" type="text/JavaScript">.

I think it must be to do with me not really knowing one end of js from the other - i've moved the section which is obvious, ie :
// some funciton
function(){
alert('Hello world!');

But i've also got some image swaps inside my div tags:

<div id="Abstract" style="position:absolute; left:559px; top:155px; width:97px; height:134px; z-index:10"><a href="abstract.htm" onmouseover="MM_swapImage('Bigcat','','Images/Abstract1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Images/Abstract1thumb.jpg" width="97" height="134" border="0" /></a></div>

Is there a way to extricate my js from my css?

3:19 pm on Jul 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry, misread first post.
10:30 pm on Jul 8, 2005 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



-----blah blah blah----

What the above represents is VERY important to know, I think you may need to paste the external file contents to figure out what's broken.

MM_swapImage

Editing Dreamweaver code - you must tread cautiously here, this convoluted auto-generated stuff can be very tricky for someone new at JS. IMO it's also next to worthless, but again, IMO.

To get you started, put this:
alert('hello');

. . . at the top of your external file. If you get the alert, it's reading the file and the problem is in your JS. If you don't get the alert, there is a path file issue or something, the page is not **actually** including the Javascript when it loads.

3:58 pm on Jul 19, 2005 (gmt 0)

10+ Year Member



Just to check, is this

alert('hello');

sufficient to trigger the alert, or is that only part of the script? That alone isn't working, but as i'm not familiar with the function i'm still not sure whether that leaves me with a js problem or a file path thing.

Just re-read the TOS, so i *think* i'm allowed to post....
Example of the js in my external file:

function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

Example of stuff which remains within my html file:

<div id="Wildlife" style="position:absolute; left:445px; top:154px; width:112px; height:134px; z-index:9"><a href="wildlife.htm" onmouseover="MM_swapImage('Bigcat','','Images/wildlife1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Images/wildlife1thumb.jpg" width="112" height="134" border="0" /></a></div>

Does this shed any light?
Can i separate the js from the CSS? - can i export it all into an external file, or am i just hopelessly out of my depth? :(

10:20 pm on Jul 20, 2005 (gmt 0)

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Here is a quick example of how to determine whether or not your path is correct. Create two files, the first is the html:

<html> 
<head>
<title>JavaScript Test</title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<p>JavaScript Test: You should have seen a pop-up window saying Hello!</p>
</body>
</html>

Now, in the same directory, create an external JavaScript file named "javascript.js" and all it has to contain is the following line:

alert('Hello!');

Now open your browser and call up the html document you created. A pop-up window should appear saying 'Hello!' and you can click the OK button to continue (that is what an "Alert" function does).

If you get that to work, then you can begin moving your external javascript file to a different directory and work on changing the path in the "src" attribute of your <script> tag. Make sense?

3:41 pm on Jul 21, 2005 (gmt 0)

10+ Year Member



*Thank you*... that makes perfect sense.

At least I can now safely say its not a file path issue.

Is there anything else i should check to find out why the image swaps aren't working?

3:51 pm on Jul 21, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In the example div and image tags you posted, your image tag doesn't have an id attribute. (If this code triggering an image swap on a different image, then that would be okay) The swapimage function is looking for an image with id='Bigcat'.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month