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:

Code:

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

Code:

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

Code:

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

Code:

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:

Code:

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:

Code:

<!--
// -->

Both functions work separately.

Code:

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

Code:

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

Code:

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

</head>

	<body onload="2scripts()">

  <div align="left">

to:

Code:

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

</head>

	<body onload="loadthree();">

  <div align="left">

and remove this:

Code:

window.onload=populate

from the Scroller script.

**WGW** · 02-10-2008, 03:04 AM

Originally Posted by jscheuer1

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

Originally Posted by jackbenimble4

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

Originally Posted by jscheuer1

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.

Thread: body onload="initRotator();preloadImages()" = Not Working

Thread Tools

Search Thread

body onload="initRotator();preloadImages()" = Not Working

Bookmarks

Bookmarks

Posting Permissions