By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,142 Members | 1,839 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,142 IT Pros & Developers. It's quick & easy.

Body onLoad 2 Function issue

P: 2
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:
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <script src="css/dw_rotator.js" type="text/javascript"></script>
  3. <script type="text/javascript"><!--
  4. function initRotator() {
  5.     // arguments: image name, rotation speed, (optional) path to images
  6.     var rotator1 = new dw_Rotator('topright_image', 3400, "/images/");
  7.     // add the images to rotate into that image object  
  8.     rotator1.addImages("main_image7_topright_content.jpg", "main_image2_topright_content.jpg");
  9.     // rotator1.rotate(); // sometimes may want to call rotate here
  10.     dw_Rotator.start();
  11. }
  12.  
  13. // --></script>
  14.  
  15. </head>
  16.  
  17. <body onload="initRotator();preloadImages()">
  18. <img name="topright_image" src="images/main_image7_topright_content.jpg" height="291" width="404" border="0" alt="">
  19.  
2nd Example using a script to call both functions, thus using 1 function in body tag instead:
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <script src="css/dw_rotator.js" type="text/javascript"></script>
  3. <script type="text/javascript"><!--
  4. function initRotator() {
  5.     // arguments: image name, rotation speed, (optional) path to images
  6.     var rotator1 = new dw_Rotator('topright_image', 3400, "/images/");
  7.     // add the images to rotate into that image object  
  8.     rotator1.addImages("main_image7_topright_content.jpg", "main_image2_topright_content.jpg");
  9.     // rotator1.rotate(); // sometimes may want to call rotate here
  10.     dw_Rotator.start();
  11. }
  12.  
  13. // --></script>
  14.  
  15. <script type="text/javascript">
  16. function loadtwo() {
  17. initRotator();
  18. preloadImages();
  19. }
  20. </script>        
  21.  
  22. </head>
  23.  
  24. <body onload="loadtwo()">
  25. <img name="topright_image" src="images/main_image7_topright_content.jpg" height="291" width="404" border="0" alt="">
  26.  
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:
Expand|Select|Wrap|Line Numbers
  1. <body onload="initRotator();preloadImages();">
  2. <body onload="initRotator();preloadImages()">
  3. <body onload="preloadImages();initRotator();">
  4. <body onload="preloadImages();initRotator()">
The javascript: dw_rotator.js, Works fine, unless I'm not seeing something.
Expand|Select|Wrap|Line Numbers
  1. dw_Rotator.restartDelay = 3400; // delay onmouseout before call to rotate
  2. dw_Rotator.col = []; 
  3.  
  4. // arguments: image name, rotation speed, path to images (optional), 
  5. // target, i.e. name of window to direct url's to onclick (optional)
  6. function dw_Rotator(name, speed, path, tgt) {
  7.     this.name = name; this.speed = speed || 3400; // default speed of rotation
  8.     this.path = path || ""; this.tgt = tgt;
  9.     this.ctr = 0; this.timer = 0; this.imgs = []; this.actions = [];
  10.     this.index = dw_Rotator.col.length; dw_Rotator.col[this.index] = this;
  11.     this.animString = "dw_Rotator.col[" + this.index + "]";
  12. }
  13.  
  14. dw_Rotator.prototype.addImages = function() { // preloads images
  15.     var img;
  16.     for (var i=0; arguments[i]; i++) {
  17.         img = new Image();
  18.         img.src = this.path + arguments[i];
  19.         this.imgs[this.imgs.length] = img;
  20.     }
  21. }
  22.  
  23. dw_Rotator.prototype.addActions = function() {
  24.     var len = arguments.length; // in case an argument's value is null
  25.     for (var i=0; i < len; i++) 
  26.         this.actions[this.actions.length] = arguments[i]; 
  27. }
  28.  
  29. dw_Rotator.prototype.rotate = function() {
  30.     clearTimeout(this.timer); this.timer = null;
  31.     if (this.ctr < this.imgs.length-1) this.ctr++;
  32.     else this.ctr = 0;
  33.     var imgObj = document.images[this.name];    
  34.     if (imgObj) {
  35.         imgObj.src = this.imgs[this.ctr].src;
  36.         this.timer = setTimeout( this.animString + ".rotate()", this.speed);
  37.     }
  38. }
  39.  
  40. // Start rotation for all instances 
  41. dw_Rotator.start = function() {
  42.     var len = dw_Rotator.col.length, obj;
  43.     for (var i=0; i<len; i++) {
  44.         obj = dw_Rotator.col[i];
  45.         if (obj && obj.name ) // check for empty instance created by dw_random.js
  46.             obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
  47.     }
  48. }
  49.  
  50. // called onclick of images
  51. dw_Rotator.doClick = function(n) {
  52.     var obj = dw_Rotator.col[n]; 
  53.     if ( !document.images || !obj ) return true;
  54.     if ( obj.actions && obj.actions[obj.ctr] ) {
  55.         if ( typeof obj.actions[obj.ctr] == "string" ) { // url
  56.             if ( obj.tgt ) { // open in separate window
  57.                 // add features here if you want, i.e., chrome, size, position, ...
  58.                 var win = window.open(obj.actions[obj.ctr], obj.tgt);
  59.                 if ( win && !win.closed ) win.focus();
  60.             } else {
  61.                 window.location = obj.actions[obj.ctr];
  62.             }
  63.         } else { // function pointer 
  64.             obj.actions[obj.ctr](); // execute function
  65.         }
  66.     }
  67.     return false;
  68. }
  69.  
  70. // for stopping/starting onmouseover/out
  71. dw_Rotator.pause = function(n) {    
  72.     dw_Rotator.clearTimers(n);
  73. }
  74.  
  75. dw_Rotator.clearTimers = function(n) {
  76.     var obj = dw_Rotator.col[n]; 
  77.     if ( obj ) {
  78.         clearTimeout( obj.timer ); obj.timer = null;
  79.     }
  80. }
  81.  
  82. dw_Rotator.resume = function(n) {
  83.     dw_Rotator.clearTimers(n);
  84.     var obj = dw_Rotator.col[n]; 
  85.     if ( obj ) {
  86.         obj.timer = setTimeout( obj.animString + ".rotate()", dw_Rotator.restartDelay );
  87.     }
  88. }
  89.  
Feb 9 '08 #1
Share this Question
Share on Google+
2 Replies


hsriat
Expert 100+
P: 1,654
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...
Expand|Select|Wrap|Line Numbers
  1. function waitToInitRotator() {
  2.     if (!flag) var wait = setTimeout("waitToInitRotator()", 100);
  3.     else initRotator();
  4. }
Just give it a try... or the other way round (use flag in initRotator and creeate a function waitToPreloadImages())
Feb 10 '08 #2

P: 2
WGW
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 remove that from the scroller script and implementing the following code, I was able to get all three items to load upon page load.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function loadthree() {
  3. initRotator();
  4. preloadImages();
  5. populate();
  6. }
  7. </script>
  8. </head>
  9. <body onload="loadthree();">
Feb 10 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.