[thelist] JS: Scrolling Banner Problem

Mon Jul 9 15:55:56 CDT 2001

I'm trying to create a scrolling banner using Javascript. You've seen them 
many times: comes in from the right, moves out to the left, then restarts. 
I'm about 75% of the way, but I've got two issues I can't seem to resolve.

1) I thought that by putting this in a fixed div  that is a wee bit smaller 
than the scrolling div that it would do the trick, but it barfs, therefor I 
lose the 'marquee' appearance. How can I go about resolving this?

2) Netscape will not permit long text without wrapping the line. What can I 
do about this?

Source below; Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script language="JavaScript" type="text/javascript">
<!--

// Are we using Netscape or IE?
    var ns4 = (document.layers)? true:false;
    var ie4 = (document.all)? true:false;

// Move from where to where? At which speed (in ms)? By which decrement (in 
px)?
    var leftEdge = 250;
    var rightEdge = 500;
    var slideSpeed = 10;
    var slideDec = 2

// Initialize the variables
    function init() {

// Are we using Netscape or IE?
       if (ns4) div = document.movDiv;
       if (ie4) div = movDiv.style;

// Get the current position of the box
       div.xpos = parseInt(div.left);
       div.ypos = parseInt(div.top);

// Set the vars to new, then make the move
       restart();
       slide();
    }

// Cause the div contents to move to the left
    function slide() {

    // if we are not at the left-most edge, move by decrements of 2px
       if (div.xpos > leftEdge ) {
          div.xpos -= slideDec ;
          div.left = div.xpos;

       // Debugging: Where is the left corner of the box?
          //window.status = "Pos: " + div.xpos

       // How quickly should this box move?
          setTimeout("slide()",slideSpeed);

       // When the left corner reaches it's left-most, restart
          if (div.xpos == leftEdge) {
             restart();
          }
       }
    }

// Restart the move to the left
    function restart() {
       div.xpos = rightEdge;
       div.left = div.xpos;
    }

// -->
</script>
</head>

<body onload="init();">

<!-- The style properties describe the div's starting state -->
<div id="movDiv" style="position:absolute; overflow:hidden; left:500px; 
top:50; z-index:1; width:1000px;"><h1>This is my text, it's so long isn't 
correctly displayed...</h1></div>

</body>
</html>