[Javascript] JS Marquee Scroller Question Looped!

Troy III Ajnej trojani2000 at hotmail.com
Sun Aug 6 13:11:55 CDT 2006


> http://xn--ovg.com/marquee/index3.php> > What did I do wrong?> > tedd
The obvious:
An attempt to manipulate the DOM before it comes to existence
is being made because you've misplaced the script.
 
The first line of script will cause the error trying to assign:
 
var roller = document.getElementById('roller')
 
Because the DIV with ID "roller" is not created yet.
Please, place the script at least one line after the "roller" closing tag
and everything will come back to normal - it will loop forever.
Or simply copy - paste this code: [with the same order!] 
(Given are new dimensions to suite your pictures size too)
 
<style>#holder{ position:absolute; left:45px; top:116px; width:344px; height:84px; overflow:hidden; }
#roller {  white-space:nowrap; margin-left:0;}
</style>
   <div id="holder">     <div id="roller">    <img src="images/1.jpg" alt="" >    <img src="images/2.jpg" alt="" >    <img src="images/3.jpg" alt="" >    <img src="images/4.jpg" alt="" >    <img src="images/5.jpg" alt="" >    <img src="images/6.jpg" alt="" >    <img src="images/7.jpg" alt="" >    <img src="images/8.jpg" alt="" >    <img src="images/9.jpg" alt="" >    <img src="images/1.jpg" alt="" >    <img src="images/2.jpg" alt="" >    <img src="images/3.jpg" alt="" >   </div>   </div>
 
<SCRIPT>var roller = document.getElementById('roller')var i=0;
function rollnow(){ if(i < 1040){  i++;  roller.style.marginLeft=-i;  }else{i=-4} }
   window.setInterval(rollnow, 20);</SCRIPT>
 
The correct calculation is: 9 (images) * 112 (actual imgs width) +  ( 9 - 1 * 4 ) = 1040 px
Tip: To get this value automaticaly "comment" the repeated images 1,2,3, in the code and 
 alert(roller.offsetWidth) inside the script in IE or NN (except that NN will give exact value only
in the second alert because the first time it will report the "holder" width instead of the "roller")
and don't forget to uncomment the images after you've written the required strip width; this time
being 1040.
 
P.S.:
!!! I've miscalculated the blank space between images for half of it's real width
in the last post; the correct value is 4px !!!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                         Troy III                           progressive art enterprise~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_________________________________________________________________
Try Live.com - your fast, personalized homepage with all the things you care about in one place.
http://www.live.com/getstarted
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060806/f2c4fcf7/attachment.htm>


More information about the Javascript mailing list