Hi all,
I'm wondering where is the best place to put javascript onLoad functions since we do not have access to the body tag. I would like to preload images as well as call a custom function. Right now I have inserted a <body onLoad="some code"></body> at the top of my left column HTML. It seems like that could create a problem for some browsers though so I am wondering if there is a better method.
Thanks!
Full Version: Best Place For Onload Functions?
QUOTE(jason.munning @ Jul 5 2007, 01:40 PM) 
Hi all,
I'm wondering where is the best place to put javascript onLoad functions since we do not have access to the body tag. I would like to preload images as well as call a custom function. Right now I have inserted a <body onLoad="some code"></body> at the top of my left column HTML. It seems like that could create a problem for some browsers though so I am wondering if there is a better method.
Thanks!
I'm wondering where is the best place to put javascript onLoad functions since we do not have access to the body tag. I would like to preload images as well as call a custom function. Right now I have inserted a <body onLoad="some code"></body> at the top of my left column HTML. It seems like that could create a problem for some browsers though so I am wondering if there is a better method.
Thanks!
Try putting it after all of your footer code. It "usually" works...sounds odd, but it's what seems to work in many cases.
Good luck!
Instead of -
CODE
<body onLoad="some code"></body>
- you could try - CODE
<div onLoad="some code"></div>
- and this would be valid HTML within your <body /> tags. I'm not sure the JavaScript would always work, but it's worth a shot.
QUOTE(ArcoJedi @ Jul 9 2007, 08:21 AM)
Instead of -
CODE
<body onLoad="some code"></body>
- you could try - CODE
<div onLoad="some code"></div>
- and this would be valid HTML within your <body /> tags. I'm not sure the JavaScript would always work, but it's worth a shot.That's basically what we do. It works wherever we put it. Failing the need to be on a specific page, we just load our .js into "Top of Page HTML Editor". That's where most of them were when I started helping with coding here.
One note, we no longer load the full .js into the pages. We just load the "call" and keep the actual script on the root.
Good Call Kenny,
SE experts will always tell you that you want to surpress as much of the code as possible and put it into a file that you call. The SE's don't like to crawl through all of the code.
-Matt
SE experts will always tell you that you want to surpress as much of the code as possible and put it into a file that you call. The SE's don't like to crawl through all of the code.
-Matt
Hey guys,
Thanks for the replies. What I am doing now is placing all my js in an external custom.js file and then linking to it using the code
Kenny, is this the same thing you are referring to?
Thanks!
Jason
Thanks for the replies. What I am doing now is placing all my js in an external custom.js file and then linking to it using the code
CODE
<script
language="javascript" src="custom.js"></script>
language="javascript" src="custom.js"></script>
Kenny, is this the same thing you are referring to?
Thanks!
Jason
Jason,
Yes it is. Altho' you've taken it even one step further creating just one .js script. I have each of the scripts separately in the root and call them wherever they are needed. Have you implemented the all-in-one script? I'm curious about execution and conflict within the parent .js.
Yes it is. Altho' you've taken it even one step further creating just one .js script. I have each of the scripts separately in the root and call them wherever they are needed. Have you implemented the all-in-one script? I'm curious about execution and conflict within the parent .js.
Hi Kenny,
The external js file works fine and is a good way to keep everything organized.
I cannot get <div onLoad="somecode"></div> to work.
I've grouped all the fcns I want at onLoad into a fcn called "myOnLoad" which I am then calling with a <body onLoad="myOnLoad()"></body>statement in the top HTML. This works although if you add another <body onLoad="some code"></body> anywhere the second one will not work.
The problem is, I have one fcn I want to run only on the product details page. So I've added this code to the top of the product details editor:
<script language="JavaScript" SRC="custom.js">calculate(document.sqftform);</SCRIPT>
I feel like it should work but it doesn't.
Anyone have any ideas? Thanks!
The external js file works fine and is a good way to keep everything organized.
I cannot get <div onLoad="somecode"></div> to work.
I've grouped all the fcns I want at onLoad into a fcn called "myOnLoad" which I am then calling with a <body onLoad="myOnLoad()"></body>statement in the top HTML. This works although if you add another <body onLoad="some code"></body> anywhere the second one will not work.
The problem is, I have one fcn I want to run only on the product details page. So I've added this code to the top of the product details editor:
<script language="JavaScript" SRC="custom.js">calculate(document.sqftform);</SCRIPT>
I feel like it should work but it doesn't.
Anyone have any ideas? Thanks!
HI Jason,
Just guessing here, but from most of the calc forms I've found the call is a bit different. Not sure where you got your .js from. They could be a good source for correcting the problem. However, I think the problem is in this line: <script language="JavaScript" SRC="custom.js">calculate(document.sqftform);</SCRIPT>
Most of the calcs seem to use (this.form). So I'm thinking if you played with that area you might eventually hit the correct combination. Such as (this.document.sqftform) or (this.form) or some other variation. Mind you, I'm just guessing. Is your form actually called "sqftform"?
Another suggestion is to shoot ArcoJedi a PM. I seem to recall seeing him troubleshooting other .js scripts before. He might actually know how to program it.
Just guessing here, but from most of the calc forms I've found the call is a bit different. Not sure where you got your .js from. They could be a good source for correcting the problem. However, I think the problem is in this line: <script language="JavaScript" SRC="custom.js">calculate(document.sqftform);</SCRIPT>
Most of the calcs seem to use (this.form). So I'm thinking if you played with that area you might eventually hit the correct combination. Such as (this.document.sqftform) or (this.form) or some other variation. Mind you, I'm just guessing. Is your form actually called "sqftform"?
Another suggestion is to shoot ArcoJedi a PM. I seem to recall seeing him troubleshooting other .js scripts before. He might actually know how to program it.
Hey guys,
After some research I came across this fcn which works great. Should be useful to some of you:
After some research I came across this fcn which works great. Should be useful to some of you:
CODE
//this fcn came from http://simonwillison.net/2004/May/26/addLoadEvent/
//the fcn adds events to window.onload without overwriting what's already there
//put this in your external js file or between script tags
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
myfcn() {
//some code goes here
}
//put this in your content pages where you want the action to occur
addLoadEvent(function() {
myfcn();
})
//the fcn adds events to window.onload without overwriting what's already there
//put this in your external js file or between script tags
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
myfcn() {
//some code goes here
}
//put this in your content pages where you want the action to occur
addLoadEvent(function() {
myfcn();
})
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.