PDA

View Full Version : body onload="initRotator();preloadImages()" = Not Working



WGW
02-09-2008, 06:56 PM
Hello all, I need another set of eyes cause it just isn't working, no matter how identical I make it.
The initRotator function works when called by itself, but when adding another function, only the "other function" works, not the initRotator function.

Here's some examples of what I've tried
1st Example using the 2 functions on body tag:


<head>
<script src="css/dw_rotator.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function initRotator() {
// arguments: image name, rotation speed, (optional) path to images
var rotator1 = new dw_Rotator('topright_image', 3400, "/images/");
// add the images to rotate into that image object
rotator1.addImages("main_image7_topright_content.jpg", "main_image2_topright_content.jpg");
// rotator1.rotate(); // sometimes may want to call rotate here
dw_Rotator.start();
}

// --></script>

</head>

<body onload="initRotator();preloadImages()">
<img name="topright_image" src="images/main_image7_topright_content.jpg" height="291" width="404" border="0" alt="">

2nd Example using a script to call both functions, thus using 1 function in body tag instead:


<head>
<script src="css/dw_rotator.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function initRotator() {
// arguments: image name, rotation speed, (optional) path to images
var rotator1 = new dw_Rotator('topright_image', 3400, "/images/");
// add the images to rotate into that image object
rotator1.addImages("main_image7_topright_content.jpg", "main_image2_topright_content.jpg");
// rotator1.rotate(); // sometimes may want to call rotate here
dw_Rotator.start();
}

// --></script>

<script type="text/javascript">
function loadtwo() {
initRotator();
preloadImages();
}
</script>

</head>

<body onload="loadtwo()">
<img name="topright_image" src="images/main_image7_topright_content.jpg" height="291" width="404" border="0" alt="">

The img name="topright_image" has been tried with out the underscore seperation.
I've also tried the onload function without the ending semi-colon on the end:

<body onload="initRotator();preloadImages();">
<body onload="initRotator();preloadImages()">
<body onload="preloadImages();initRotator();">
<body onload="preloadImages();initRotator()">
The Javascript: dw_rotator.js, Works fine, unless I'm not seeing something.


dw_Rotator.restartDelay = 3400; // delay onmouseout before call to rotate
dw_Rotator.col = [];

// arguments: image name, rotation speed, path to images (optional),
// target, i.e. name of window to direct url's to onclick (optional)
function dw_Rotator(name, speed, path, tgt) {
this.name = name; this.speed = speed || 3400; // default speed of rotation
this.path = path || ""; this.tgt = tgt;
this.ctr = 0; this.timer = 0; this.imgs = []; this.actions = [];
this.index = dw_Rotator.col.length; dw_Rotator.col[this.index] = this;
this.animString = "dw_Rotator.col[" + this.index + "]";
}

dw_Rotator.prototype.addImages = function() { // preloads images
var img;
for (var i=0; arguments[i]; i++) {
img = new Image();
img.src = this.path + arguments[i];
this.imgs[this.imgs.length] = img;
}
}

dw_Rotator.prototype.addActions = function() {
var len = arguments.length; // in case an argument's value is null
for (var i=0; i < len; i++)
this.actions[this.actions.length] = arguments[i];
}

dw_Rotator.prototype.rotate = function() {
clearTimeout(this.timer); this.timer = null;
if (this.ctr < this.imgs.length-1) this.ctr++;
else this.ctr = 0;
var imgObj = document.images[this.name];
if (imgObj) {
imgObj.src = this.imgs[this.ctr].src;
this.timer = setTimeout( this.animString + ".rotate()", this.speed);
}
}

// Start rotation for all instances
dw_Rotator.start = function() {
var len = dw_Rotator.col.length, obj;
for (var i=0; i<len; i++) {
obj = dw_Rotator.col[i];
if (obj && obj.name ) // check for empty instance created by dw_random.js
obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
}
}

// called onclick of images
dw_Rotator.doClick = function(n) {
var obj = dw_Rotator.col[n];
if ( !document.images || !obj ) return true;
if ( obj.actions && obj.actions[obj.ctr] ) {
if ( typeof obj.actions[obj.ctr] == "string" ) { // url
if ( obj.tgt ) { // open in separate window
// add features here if you want, i.e., chrome, size, position, ...
var win = window.open(obj.actions[obj.ctr], obj.tgt);
if ( win && !win.closed ) win.focus();
} else {
window.location = obj.actions[obj.ctr];
}
} else { // function pointer
obj.actions[obj.ctr](); // execute function
}
}
return false;
}

// for stopping/starting onmouseover/out
dw_Rotator.pause = function(n) {
dw_Rotator.clearTimers(n);
}

dw_Rotator.clearTimers = function(n) {
var obj = dw_Rotator.col[n];
if ( obj ) {
clearTimeout( obj.timer ); obj.timer = null;
}
}

dw_Rotator.resume = function(n) {
dw_Rotator.clearTimers(n);
var obj = dw_Rotator.col[n];
if ( obj ) {
obj.timer = setTimeout( obj.animString + ".rotate()", dw_Rotator.restartDelay );
}
}

jscheuer1
02-09-2008, 09:42 PM
As far as I can see:


preloadImages()

is undefined. That will break any event or function that includes it. All of the methods you have posted will work if the code that they refer to works and is available to the page - As long as there are no other onload events in code associated with the page that could override the body onload. These could be in the scripts you've mentioned, or in others (if any). A good test would be to try each script by itself and make sure it is working as expected and with no errors. If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

WGW
02-10-2008, 12:27 AM
Actually, I just left that part off cause I knew it worked, and the funny thing is, everything works as long as it's solo.
Meaning, If I use the preloadImages script in the onload by it'self it works fine, but if I add the initRotator to the onload tag then only the preloadImages script works.
But if I use a 2 script function, to call out both scripts it doesn't work for either.....

So, on that note, here is the website:
http://www.sentinelslemcco.com
The image in question is the one with the 3 people standing near the right top side of the screen.
I'd like to have it rotate to different images every so-many seconds.

I've also tried it with and without these tags before and after the function section of the script:


<!--
// -->


Both functions work separately.

<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
over_photos2 = newImage(/*URL*/'images/photos_on.gif');
over_events2 = newImage(/*URL*/'images/aboutus_on.gif');
over_memorials2 = newImage(/*URL*/'images/memorials_on.gif');
over_friends2 = newImage(/*URL*/'images/friends_on.gif');
over_NationalHome = newImage(/*URL*/'images/home_on_forum.gif');
over_login_off_forum = newImage(/*URL*/'images/membersonly_on.gif');
over_guestbook = newImage(/*URL*/'images/guestbook_on_forum.gif');
preloadFlag = true;
}
}

// --></script>
However, as it stands, the "2scripts" function isn't even letting the preloadImages work......



<script type="text/javascript">
function 2scripts() {
initRotator();
preloadImages();
}
</script>

</head>

<body onload="2scripts()">

jscheuer1
02-10-2008, 02:20 AM
That's is not what you posted before. A function name may not begin with a number. And, as it happens, you have another onload. So, change this:


<script type="text/javascript"><!--
function 2scripts() {
initRotator();
preloadImages();
}
// --></script>

</head>

<body onload="2scripts()">

<div align="left">

to:


<script type="text/javascript">
function loadthree() {
initRotator();
preloadImages();
populate();
}
</script>

</head>

<body onload="loadthree();">

<div align="left">

and remove this:


window.onload=populate

from the Scroller script.

WGW
02-10-2008, 03:04 AM
That's is not what you posted before.Sorry about switching up the "loadtwo , 2scripts" section, 2nd was a different try and I forgot about the, not allowing a number to be first. Then there's the ticker I have running..... haha Thanks a bunch jscheuer1 for the extra set of eyes that I needed.

jackbenimble4
02-10-2008, 05:15 PM
If the problem was that multiple functions weren't running when you write them into an onload handler, it could be the nature of event handlers. Event handlers only allow for one event handler for any given event type for any given element. So far example, you can't set two onload event handlers for a html body element.

Luckily, there is an alternative -- and what an alternative it is! Event listeners are more difficult to setup because of browser differences, but the benefits far outweigh the few annoyances. The W3C specification is that event listeners should be added by the addEventListener method. Unfortunately, IE has to be a renegade like always, and uses the attachEvent method. There are differences between these, but these differences can easily be handled by a small library.

If you're building javascript applications of this scale, I suggest you switch to event listeners for more functionality. If you're already using a javascript library, it's guaranteed to have functions built in for using event listeners. Sorry if this is information you don't really care about, or already know. Ever since I read SitePoint's "Simply Javascript" the way I write javascript has completely changed for the better and I just thought I'd share.

jscheuer1
02-10-2008, 05:22 PM
If the problem was that multiple functions weren't running when you write them into an onload handler, it could be the nature of event handlers. Event handlers only allow for one event handler for any given event type for any given element. So far example, you can't set two onload event handlers for a html body element.

Luckily, there is an alternative -- and what an alternative it is! Event listeners are more difficult to setup because of browser differences, but the benefits far outweigh the few annoyances. The W3C specification is that event listeners should be added by the addEventListener method. Unfortunately, IE has to be a renegade like always, and uses the attachEvent method. There are differences between these, but these differences can easily be handled by a small library.

If you're building javascript applications of this scale, I suggest you switch to event listeners for more functionality. If you're already using a javascript library, it's guaranteed to have functions built in for using event listeners. Sorry if this is information you don't really care about, or already know. Ever since I read SitePoint's "Simply Javascript" the way I write javascript has completely changed for the better and I just thought I'd share.

This problem was already solved.

jackbenimble4
02-10-2008, 05:31 PM
This problem was already solved.

Sorry, I was trying to convey some best practices that would solve the problem and avoid having to write a function that is written simply to work around the nature of event handlers.

jscheuer1
02-10-2008, 05:37 PM
That's OK. I often suggest using addEvent and attachEvent. But when the problem can be solved using other simpler methods, I usually just leave it at that. The addEvent and attachEvent methods can bring with them other issues, depending upon the nature of the event, and aren't backward compatible. Code can be created to fall back to direct event assignment, but then it becomes a matter of precedence again, so directly assigning all events in one function is often easiest and best.

Another issue is that I try not to confuse people - not that I'm always successful at that.