JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Trying to change this JavaScript code, to work without External File..!! How?? plz

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2008
Posts: 130
Reputation: Q8iEnG is an unknown quantity at this point 
Solved Threads: 2
Q8iEnG Q8iEnG is offline Offline
Junior Poster

Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #1
Dec 1st, 2008
Hi guys..

I'm still on my way on learning and seeing examples of JavaScript Codes

Today I saw this code (which depends on external file called *banner.js*)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!-- Paste this code into an external JavaScript file named: banner.js.js  -->
  2.  
  3. /* This script and many more are available free online at
  4. The JavaScript Source :: http://javascript.internet.com
  5. Created by: Lee Underwood :: http://javascript.internet.com/ */
  6.  
  7. var bannerImg = new Array();
  8.   // Enter the names of the images below
  9.   bannerImg[0]="image_jss.gif";
  10.   bannerImg[1]="image_js.gif";
  11.   bannerImg[2]="image_wr.gif";
  12.  
  13. var newBanner = 0;
  14. var totalBan = bannerImg.length;
  15.  
  16. function cycleBan() {
  17.   newBanner++;
  18.   if (newBanner == totalBan) {
  19.     newBanner = 0;
  20.   }
  21.   document.banner.src=bannerImg[newBanner];
  22.   // set the time below for length of image display
  23.   // i.e., "4*1000" is 4 seconds
  24.   setTimeout("cycleBan()", 4*1000);
  25. }
  26. window.onload=cycleBan;
  27.  
  28.  
  29.  
  30. <!-- Paste this code into the HEAD section of your HTML document.
  31.      You may need to change the path of the file.  -->
  32.  
  33. <script type="text/javascript" src="banner.js.js"></script>
  34.  
  35.  
  36.  
  37. <!-- Paste this code into the BODY section of your HTML document  -->
  38.  
  39. <img src="image_jss.gif" name="banner">
  40. <p><div align="center">
  41. <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  42. by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  43. </div><p>


I've tried to make it work without using (external file), but it doesn't work!!! please anyone can tell me where's my mistake?
here's my code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script type="text/javascript"> // adding the JavaScript prototype
  2.  
  3. var bannerRotate = new Array(); // creating new Array named "banner", and we set its value to unknown by saying * new Array() *
  4. // Here you can create a list of whatever, images you want to add..
  5. bannerRotate[0] = "image.gif";
  6. bannerRotate[1] = "image2.gif";
  7. bannerRotate[2] = "image3.gif";
  8.  
  9. var getNewBanner = 0;
  10. var total = bannerRotate.length;
  11.  
  12. function rotate()
  13. {
  14. 	getNewBanner++;
  15.  
  16. 	// if statement to check the condition getNewBanner == to the total number of images, or not? if yes, then starts again from ZERO
  17. 	if( getNewBanner == total )
  18. 	{
  19. 		getNewBanner = 0;
  20.  
  21. 	}
  22.  
  23. 	document.banner.src=bannerRotate[ getNewBanner ];
  24. 	setTimeout = ( "rotate()", 4*1000 );
  25.  
  26. } // end function rotate
  27.  
  28. window.onload = rotate();
  29.  
  30. </script>

here's the code in <body>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <img src="image.gif" name="banner">


waiting for the help to keep learning from my mistakes

thanks in advance
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #2
Dec 2nd, 2008
You do not have to post for these silly mistakes. Here is what is wrong:

You have put :
javascript Syntax (Toggle Plain Text) 
  1. setTimeout = ( "rotate()", 4*1000 );

Instead of this:

javascript Syntax (Toggle Plain Text) 
  1. setTimeout ( "rotate()", 4*1000 );

You should have copy/pasted that code
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 130
Reputation: Q8iEnG is an unknown quantity at this point 
Solved Threads: 2
Q8iEnG Q8iEnG is offline Offline
Junior Poster

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #3
Dec 2nd, 2008
•
•
•
•
Originally Posted by Luckychap View Post
You do not have to post for these silly mistakes. Here is what is wrong:

You have put :
javascript Syntax (Toggle Plain Text) 
  1. setTimeout = ( "rotate()", 4*1000 );

Instead of this:

javascript Syntax (Toggle Plain Text) 
  1. setTimeout ( "rotate()", 4*1000 );

You should have copy/pasted that code
thanks I did made it, but it did'nt work!!

please.. anything else is wrong?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #4
Dec 2nd, 2008
Your code is not working because for the first time when rotate is called document.banner is undefined. And setting properties to undefined objects (documet.banner.src = somthing) result in crash.

So when ever you want to set the property to any HTML element in javascript, first check that if it is defined yet or not and apply properties only when they are defined.

javascript Syntax (Toggle Plain Text) 
  1. if(document.banner)
  2.      document.banner.src = bannerRotate[ getNewBanner ];
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 130
Reputation: Q8iEnG is an unknown quantity at this point 
Solved Threads: 2
Q8iEnG Q8iEnG is offline Offline
Junior Poster

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #5
Dec 2nd, 2008
•
•
•
•
Originally Posted by Luckychap View Post
Your code is not working because for the first time when rotate is called document.banner is undefined. And setting properties to undefined objects (documet.banner.src = somthing) result in crash.

So when ever you want to set the property to any HTML element in javascript, first check that if it is defined yet or not and apply properties only when they are defined.

javascript Syntax (Toggle Plain Text) 
  1. if(document.banner)
  2.      document.banner.src = bannerRotate[ getNewBanner ];
so you meant that the problem is from this code??

Ok, is it necessary to use that code?
javascript Syntax (Toggle Plain Text) 
  1. if(document.banner)
  2.      document.banner.src = bannerRotate[ getNewBanner ];


please could anyone explain to me just why we used (document.banner.src)???
it is not defined I mean in my whole code there's no (banner) so where did it comes from? and how it works?

thanks in advance will be much more appreciated..
Last edited by Q8iEnG; Dec 2nd, 2008 at 5:51 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #6
Dec 2nd, 2008
I also said for the first time only it is undefined. But not exactly knows why it is not defined on the first time?
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #7
Dec 2nd, 2008
I got it should be:

javascript Syntax (Toggle Plain Text) 
  1. window.onload = rotate;

Not

javascript Syntax (Toggle Plain Text) 
  1. window.onload = rotate();

the later actually calls rotate() before the page is rendered. But former assign the rotate() function to window.onload event.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 130
Reputation: Q8iEnG is an unknown quantity at this point 
Solved Threads: 2
Q8iEnG Q8iEnG is offline Offline
Junior Poster

Re: Trying to change this JavaScript code, to work without External File..!! How?? pl

 
0
  #8
Dec 2nd, 2008
•
•
•
•
Originally Posted by Luckychap View Post
I got it should be:

javascript Syntax (Toggle Plain Text) 
  1. window.onload = rotate;

Not

javascript Syntax (Toggle Plain Text) 
  1. window.onload = rotate();

the later actually calls rotate() before the page is rendered. But former assign the rotate() function to window.onload event.
no it is ok, the script is working now when I changed what u said about the (if statement)

but please, can you explain please why in the the use of (document.banner.src=...)!!!!

I really didn't got why he used it!!, I just copied it and it works, but I don't know why he used it!

I mean I know that I can write (document.write() )

but this is my first time seeing ( document.banner.src)!!!

what I want is to know, why he used (.banner)!!?

thanks for the further help
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Trying to change this JavaScript code, to work without External File..!! How?? plz

 
0
  #9
Dec 2nd, 2008
No window.onload = rotate(); is not correct way to attached a function to onload event. As I told you before window.onload = rotate(); will first call it (before the page is rendered as you have put this code before <img src='image.jpg' name='banner'> is rendered on document ) and then it will be assigned to onload event.

I used if-condition to bypass the first call to rotate as at that time <img> tag was not rendered in the document and hence document.banner was undefined leading to crash when try to apply property to undefined object (document.banner.src).

So few points you should note about above code:
1) function name followed by () will call it.
2) always check if the object is defined before applying any properties.

Thankyou
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 130
Reputation: Q8iEnG is an unknown quantity at this point 
Solved Threads: 2
Q8iEnG Q8iEnG is offline Offline
Junior Poster

Re: Trying to change this JavaScript code, to work without External File..!! How?? pl

 
0
  #10
Dec 2nd, 2008
•
•
•
•
Originally Posted by Luckychap View Post
No window.onload = rotate(); is not correct way to attached a function to onload event. As I told you before window.onload = rotate(); will first call it (before the page is rendered as you have put this code before <img src='image.jpg' name='banner'> is rendered on document ) and then it will be assigned to onload event.

I used if-condition to bypass the first call to rotate as at that time <img> tag was not rendered in the document and hence document.banner was undefined leading to crash when try to apply property to undefined object (document.banner.src).

So few points you should note about above code:
1) function name followed by () will call it.
2) always check if the object is defined before applying any properties.

Thankyou
thanks for being on touch and being so helpful, god bless

thanks again
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array beta box browser captchaformproblem cart checkbox child close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect runtime safari scale scriptlets scroll search security select shopping size software unicode w3c web window windowofwords wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC