943,948 Members | Top Members by Rank

Ad:
Dec 1st, 2008
0

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

Expand Post »
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
Reputation Points: 10
Solved Threads: 2
Junior Poster
Q8iEnG is offline Offline
164 posts
since Jun 2008
Dec 2nd, 2008
0

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

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
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Dec 2nd, 2008
0

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

Click to Expand / Collapse  Quote originally posted by Luckychap ...
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?
Reputation Points: 10
Solved Threads: 2
Junior Poster
Q8iEnG is offline Offline
164 posts
since Jun 2008
Dec 2nd, 2008
0

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

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 ];
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Dec 2nd, 2008
0

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

Click to Expand / Collapse  Quote originally posted by Luckychap ...
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.
Reputation Points: 10
Solved Threads: 2
Junior Poster
Q8iEnG is offline Offline
164 posts
since Jun 2008
Dec 2nd, 2008
0

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

I also said for the first time only it is undefined. But not exactly knows why it is not defined on the first time?
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Dec 2nd, 2008
0

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

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.
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Dec 2nd, 2008
0

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

Click to Expand / Collapse  Quote originally posted by Luckychap ...
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
Reputation Points: 10
Solved Threads: 2
Junior Poster
Q8iEnG is offline Offline
164 posts
since Jun 2008
Dec 2nd, 2008
0

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

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
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Dec 2nd, 2008
0

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

Click to Expand / Collapse  Quote originally posted by Luckychap ...
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
Reputation Points: 10
Solved Threads: 2
Junior Poster
Q8iEnG is offline Offline
164 posts
since Jun 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: gridview search when keypress
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: limit no of char per line





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC