• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

JavaScript rotating pictures and scrolling box

Hello,
My rotating images on the right (written in javascript) stopped working after I added the newsletter box (also written in javascript) on the left.  
 
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
</head>
<basefont face = "arial">
<body onLoad = "movePictures()">
<table width = "100%" bgcolor = "ecedb3" border = "1" cellpadding="2"
cellspacing="0">
     <tr>
          <td valign = "abstop">
               <table width = "170" border = "1" cellpadding="0"
cellspacing="0">
                    <tr><td bgcolor = "black"><font color = "white" size =
"-1">Newsletters</font></td></tr>
                    <tr><td>
                    <script language="javascript">
                    var scrollerwidth="170"
                    var scrollerheight="450"
                    var scrollerspeed="1";
                    var scrollercontent="<font size='-1'>Lots of scrolling
content here...</font>"


                   
                    var pauseit=1
                   
                    scrollerspeed=(document.all)? scrollerspeed :
Math.max(1, scrollerspeed-1) //slow speed down by 1 for NS
                    var copyspeed=scrollerspeed
                    var iedom=document.all||document.getElementById
                    var actualheight=''
                    var cross_scroller, ns_scroller
                    var pausespeed=(pauseit==0)? copyspeed: 0

                    function populate(){
                    if (iedom){
                    cross_scroller=document.getElementById?
document.getElementById("iescroller") : document.all.iescroller
                    cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
                    cross_scroller.innerHTML=scrollercontent
                    actualheight=cross_scroller.offsetHeight
                    }
                    else if (document.layers){
                    ns_scroller=document.ns_scroller.document.ns_scroller2
                    ns_scroller.top=parseInt(scrollerheight)+8
                    ns_scroller.document.write(scrollercontent)
                    ns_scroller.document.close()
                    actualheight=ns_scroller.document.height
                    }
                    lefttime=setInterval("scrollscroller()",20)
                    }
                    window.onload=populate

                    function scrollscroller(){

                    if (iedom){
                    if
(parseInt(cross_scroller.style.top)>(actualheight*(-1)+8))
 
cross_scroller.style.top=parseInt(cross_scroller.style.top)-copyspeed+"px"
                    else
                    cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
                    }
                    else if (document.layers){
                    if (ns_scroller.top>(actualheight*(-1)+8))
                    ns_scroller.top-=copyspeed
                    else
                    ns_scroller.top=parseInt(scrollerheight)+8
                    }
                    }

                    if (iedom||document.layers){
                    with (document){
                    if (iedom){
                    write('<div
style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';o
verflow:hidden" onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed">')
                    write('<div id="iescroller"
style="position:absolute;left:0px;top:0px;width:100%;">')
                    write('</div></div>')
                    }
                    else if (document.layers){
                    write('<ilayer width='+scrollerwidth+'
height='+scrollerheight+' name="ns_scroller">')
                    write('<layer name="ns_scroller2"
width='+scrollerwidth+' height='+scrollerheight+' left=0 top=0
onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed"></layer>')
                    write('</ilayer>')
                    }
                    }
                    }
                    </script>

                    </td></tr>          
               </table>
          </td>
         
          .
          .
          .
         
          <td valign = "abstop">
          <table width = "225" border = "1" cellpadding="0" cellspacing="0">
                    <tr><td>
                    <script language = "javascript">
                    var banner = new Array("images/network_web.gif",
"images/ugs_web.gif", "images/nlos-c_web.gif", "images/nlos-ls_web.gif" );
                    var imgIndex = -1;
                    function movePictures() {
                    imgIndex ++;
                    if (imgIndex > banner.length - 1) {
                    imgIndex = 0;
                    }
                    window.document.images[0].src = banner[imgIndex];
                    setTimeout("movePictures();", 2000);
                    }
                    </script>          
                    <img src = "images/network_web.gif"><br>
                    </td></tr>
          </table>
          </td>
     </tr>
</table>
</body>
</html>
0
yenmei
Asked:
yenmei
  • 2
  • 2
1 Solution
 
StormyWatersCommented:
remove this line:
window.onload=populate

and change this line:
<body onLoad = "movePictures()">

to this:
<body onLoad = "movePictures();populate()">
0
 
StormyWatersCommented:
The problem was the onload events conflicting.
0
 
dakydCommented:
You're overwriting the onload handler, so that movePictures() is never called.  Remove this line:
                    window.onload=populate

and then change the body tag to this:
<body onLoad="movePictures(); populate();">

That should guarantee you call both functions, and should get you back on track.  Hope that helps.

0
 
dakydCommented:
Sorry Stormy, I had a stale window.  Didn't mean to re-post.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now