Body onLoad 2 Function issue

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • WGW
    New Member
    • Feb 2008
    • 2

    Body onLoad 2 Function issue

    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 );
        }
    }
  • hsriat
    Recognized Expert Top Contributor
    • Jan 2008
    • 1653

    #2
    I didn't understand the problem clearly, but I you may work like this...

    Declare a universal variable as a flag (var flag=0;).
    At the end of a preloadImages function, turn the flag on (flag = 1;).

    Using setTimeout, keep on looping untill the flag is on... Once it is on, run the initRotator function.

    eg...
    Code:
    function waitToInitRotator() {
        if (!flag) var wait = setTimeout("waitToInitRotator()", 100);
        else initRotator();
    }
    Just give it a try... or the other way round (use flag in initRotator and creeate a function waitToPreloadIm ages())
    Last edited by hsriat; Feb 10 '08, 07:54 AM. Reason: Bad formatting

    Comment

    • WGW
      New Member
      • Feb 2008
      • 2

      #3
      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=p opulate that was causing the override. So after remove that from the scroller script and implementing the following code, I was able to get all three items to load upon page load.
      Code:
      <script type="text/javascript">
      function loadthree() {
      initRotator();
      preloadImages();
      populate();
      }
      </script>
      </head>
      <body onload="loadthree();">

      Comment

      Working...