Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

StudioWyld

Programmer
Feb 9, 2008
2
US
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 );
    }
}
 
if [tt][maroon]addImages[/maroon][/tt] is a function you should write [tt][maroon]rotator1.addImages[red]();[/red][/maroon][/tt].

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]
 
I got it figured out, What I needed and was having problems with was calling on more than 1 function on the body tag when page loaded. The problem was in a scroller script on same page that I forgot about and it had a window.onload=populate that was causing the override. So after I removed that from the scroller script and implementing the following code, I was able to get all three items to load upon page load. All three functions: initRotator, preloadImages and populate were all working fine, just not at the same time.

Solution:
Code:
<script type="text/javascript">
function loadthree() {
initRotator();
preloadImages();
populate();
}
</script>		
</head>
<body onload="loadthree();">
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top