Solved

JavaScript rotating pictures and scrolling box

Posted on 2004-11-01
269 Views
Last Modified: 2013-12-03
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
Question by:yenmei
    4 Comments
     
    LVL 13

    Accepted Solution

    by:
    remove this line:
    window.onload=populate

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

    to this:
    <body onLoad = "movePictures();populate()">
    0
     
    LVL 13

    Expert Comment

    by:StormyWaters
    The problem was the onload events conflicting.
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    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
     
    LVL 19

    Expert Comment

    by:dakyd
    Sorry Stormy, I had a stale window.  Didn't mean to re-post.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Product Review - Android Remix

    Come along for the ride with our Senior Product Manager, Brian Matis, as he reviews the Android Remix.

    Suggested Solutions

    Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
    This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
    The viewer will learn how to count occurrences of each item in an array.
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now