PDA

View Full Version : noob question

neonwhiskey
02-18-2003, 06:42 PM
Hi ; )

I wrote a simple script, which works, but now I want to keep it separate from my html document. I used an import javascript command:
<html>
<head>
<script language="javascript" src="forms.js" type="text/javascript"></script>
</head>

Before, I was using <body onload="applyStyles()">. How can I rewrite the onload, so it will work from inside forms.js instead of having to put it in the top of every html?

Thx!
Jennifer
Roy Sinclair
02-18-2003, 07:07 PM
While you can actually do what you want very easily, to prevent future conflicts you really should add something like the following example code to your JS file (and to every other Javascript you write which hooks an event like onload):


<html>
<head>
<title>Testing</title>
<style>
</style>
<script>
function S1_Onload() // Sample script 1
{
alert("Script 1"); // Show that the script is being run
S1_Onload_Save(); // Run saved onload function
}
S1_Onload_Save = (window.onload) ? window.onload : new Function; // Create or save current onload function
window.onload = S1_Onload // Set onload event to our function
</script>
</head>
<body>
<h1>Event conflict resolution</h1>
<script>
function S2_Onload() // Sample script 2
{
alert("Script 2"); // Show that the script is being run
S2_Onload_Save(); // Run saved onload function
}
S2_Onload_Save = (window.onload) ? window.onload : new Function; // Create or save current onload function
window.onload = S2_Onload // Set onload event to our function
</script>
<p>
This sample page shows the cross-browser scripting technique which allows multiple scripts to hook a single event
without requiring the builder of the page to worry about a conflict. Of course this technique requires that the scripts
hooking an event use this technique or that the scripts using this technique are declared after scripts on the page that
don't use this technique.
</p>
</body>
</html>
neonwhiskey
02-18-2003, 08:32 PM
hi, thx, but I dont understand & I am only designing for IE5+...

i want to know if I import a script, then then how do I make it run in the page?

if i use in JS file:
function anyFunction(){
document.write("something");
}

then how can I make it appear in the page? can i do it automatically onload?

thx,
jennifer
Skyzyx
02-19-2003, 02:15 AM
Either add an onLoad event to your BODY tag...


<body onload="myFunction();">


or, inside your JS file, don't place it in a function, and it'll run automatically...


//Instead of...
function newStuff()
{
document.write('Do this...');
}

// Just do this...
document.write('Do this...');


Granted, whether this will work greatly depends on how your function is built, but for simple stuff, it should work.
Roy Sinclair
02-19-2003, 04:05 PM
The sample I posted above is the right way to handle it but if you insist on using the common method (which results in conflicts when you use multiple scripts which try to hook the same event) then all you need to do is add:

window.onload=applyStyles;

to the bottom of your .JS file which will hook your function to the onload event for the window just like having it in the body tag.

Note the lack of parenthesis is correct for this usage.
neonwhiskey
02-19-2003, 04:29 PM
thx Roy,
i do appreciate you were showing me the correct way; just seems a mouthful for me right now. i WILL study it for later, thx.

window.onload=applyStyles; has no parentheses...does it mean you can't pass a variable to a function?

thx ~ Jenn
Roy Sinclair
02-19-2003, 04:38 PM
does it mean you can't pass a variable to a function?


Correct, if you need to pass a variable then you need another function. What that assignment does is change the onload event from "null" to your function. If you need to pass variables you'll need another function, something like this:

function callApplyStyles()
{
applyStyles('the variable');
}
window.onload=callApplyStyles;
neonwhiskey
02-19-2003, 04:45 PM
Here's 1 of my test files, which doesn't work, errors on page:

<html>
<head><title>arrow</title>
<script language="javascript" src="drawArrow.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript">
window.onload=drawArrow();
</script>
</body>
</html>

In a separate file. drawArrow.js, I have:

function drawArrow(){
document.write(<center>
<table border="0" cellpadding="0" cellspacing="0" width="11" height="1" bgcolor=#000000><tr><td></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="9" height="1" bgcolor=#000000><tr><td></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="7" height="1" bgcolor=#000000><tr><td></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="5" height="1" bgcolor=#000000><tr><td></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="3" height="1" bgcolor=#000000><tr><td></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="1" height="1" bgcolor=#000000><tr><td></td></tr></table>
</center>)
}

Must be missing something! I always miss the easiest stuff, at first!
thx!!
jenn
arnyinc
02-19-2003, 05:19 PM
I don't think you can have the parentheses at the end of this line:

window.onload=drawArrow;


In your .js file you don't have quotation marks or apostrophes around your text. I don't think you can have carriage returns in a function call either.

function drawArrow(){
document.write('<center>')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="11" height="1" bgcolor=#000000><tr><td></td></tr></table> ')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="9" height="1" bgcolor=#000000><tr><td></td></tr></table> ')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="7" height="1" bgcolor=#000000><tr><td></td></tr></table> ')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="5" height="1" bgcolor=#000000><tr><td></td></tr></table> ')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="3" height="1" bgcolor=#000000><tr><td></td></tr></table> ')
document.write('<table border="0" cellpadding="0" cellspacing="0" width="1" height="1" bgcolor=#000000><tr><td></td></tr></table> ')
document.write('</center>')
}
beetle
02-19-2003, 05:33 PM
That's right, arnyinc. That value has to be a function pointer, not a function call. Remember, functions in javascript are variables. So basically we are assigning the drawArrow function (which is a variable) to the onload property of the window object.

You can, however, use an anonymous function to call it with parameters

window.onload = function() { applyStyles('the variable'); }
neonwhiskey
02-19-2003, 05:39 PM
was a quote problem, yes, thanks.

one more noob question if I could...
I noticed that when you load a Javascript into a page, then if it had a reference to another file, for example, if you specify an image location in a JS file... then load the JS into html pages at different levels of your site hierarchy, the image reference breaks. It seems the target comes from the html page, not the JS.

Is there a way around this without using an 'absolute' URL (such as yourdomain.com/something.jpg)?
thx!
jennifer
arnyinc
02-19-2003, 05:53 PM
The safest way to get around that is to just start in the root directory with all the links.

<img src="/mywebsite/images/1.jpg">
<img src="/mywebsite/images/2.jpg">
<img src="/mywebsite/images/3.jpg">

No matter where you are in your directory structure it will always find your images. That's at least a little bit better than an absolute URL.
whammy
02-20-2003, 12:35 AM
What arnyinc said. ;)

"/" at the beginning of a link tells HTML to start with the root directory to find the file.

"/blah.js"

would be in your root directory

"/images/myimage.jpg"

would be in your images subdirectory.

:)
neonwhiskey
02-20-2003, 05:53 PM
Hi,

Ummm, does using the / depend on what kind of server you are using? Or have I actually NOT known something so simple for so many years? How will it know which folder is the root directory of the site?

thx~
jenn
whammy
02-20-2003, 11:24 PM
As far as I know, that works everywhere... ;)

Believe me, there are still little things you learn here and there once in awhile... I learned something about meta refreshes that doesn't work just today... :D