homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Placing JS in a separate file
My script no longer works once it's removed to a separate file
kate theisinger

5+ Year Member



 
Msg#: 4002 posted 12:57 pm on Jul 8, 2005 (gmt 0)

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?

 

coopster

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



 
Msg#: 4002 posted 1:21 pm on Jul 8, 2005 (gmt 0)

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"

Trace

5+ Year Member



 
Msg#: 4002 posted 1:32 pm on Jul 8, 2005 (gmt 0)

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!');
}

kate theisinger

5+ Year Member



 
Msg#: 4002 posted 2:09 pm on Jul 8, 2005 (gmt 0)

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?

Span

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4002 posted 3:19 pm on Jul 8, 2005 (gmt 0)

Sorry, misread first post.

rocknbil

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



 
Msg#: 4002 posted 10:30 pm on Jul 8, 2005 (gmt 0)

-----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.

kate theisinger

5+ Year Member



 
Msg#: 4002 posted 3:58 pm on Jul 19, 2005 (gmt 0)

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? :(

coopster

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



 
Msg#: 4002 posted 10:20 pm on Jul 20, 2005 (gmt 0)

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?

kate theisinger

5+ Year Member



 
Msg#: 4002 posted 3:41 pm on Jul 21, 2005 (gmt 0)

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

john_k

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4002 posted 3:51 pm on Jul 21, 2005 (gmt 0)

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'.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved