Creating a Scrolling Window / Sams Teach Yourself JavaScript in 24 Hours

One of the most common, and the most unfortunate, early uses of JavaScript was for scrolling messages, which crept across the browser's status line giving you information one letter at a time rather than making use of the whole page.

In this section, you'll create a different kind of scrolling message. This one scrolls a large block of text vertically within a window, similar to the credits at the end of a movie. This type of scrolling message is easier to read, is standards compliant, and can include links or other HTML features.

By the Way

This example uses the same techniques as the animated slideshow in Hour 19, "Using Graphics and Animation." The only difference is that the animated text is only visible within a box, making it appear to scroll.

The HTML Document

The HTML document for this example includes a link to the script, a link to a CSS style sheet, the text displayed on the page, and the text that will be scrolled within the box. Listing 23.1 shows the HTML for this example.

Listing 23.1. The HTML Document for the Scrolling Window

<html>
<head>
<title>A DOM Scrolling Window</title>
<script language="JavaScript" type="text/javascript"
   src="scroll.js">
</script>
<link rel="stylesheet" type="text/css" href="scroll.css">
</head>
<body>
<h1>Scrolling Window Example</h1>
<p>This example shows a scrolling window created using JavaScript and
the W3C DOM. The red-bordered window below is actually a layer that
shows a clipped portion of a larger layer.</p>
<div id="thewindow">
<div id="thetext">
<p>This is the first paragraph of the scrolling message. The message
is created with ordinary HTML.</p>
<p>Entries within the scrolling area can use any HTML tags. They can
contain <a href="http://www.jsworkshop.com/">Links</a>.</p>
<p>There's no limit on the number of paragraphs that you can include
here. They don't even need to be formatted as paragraphs.</p>
<ul>
   <li>For example, you could format items using a bulleted list.</li>
</ul>
<p>The scrolling ends when the last part of the scrolling text
is on the screen. You've reached the end.</p>
</div>
</div>
</body>
</html>

The <div> tags in this document create two nested layers: One, thewindow, will form the small window for text to display in. The other, thetext, contains the text to scroll. You can use any HTML here, although it should be able to wrap to the small window.

The CSS File

The CSS file for this example, shown in Listing 23.2, sets margins and borders for the two <div> elements. The box's position property is set to relative, so it will be laid out normally within the document, and the position property for the scrolling text is set to absolute so it can be repositioned by the script.

Listing 23.2. The CSS Style Sheet for the Scrolling Window

#thewindow {
   position:relative;
   width:180;
   height:150;
   overflow:hidden;
   border: 2px solid red;
}
#thetext {
   position: absolute;
   width: 170;
   left: 5;
   top: 100;
}

Because the text doesn't all fit in the small window, you'll only see part of it at a time. The overflow property on the window layer prevents the rest of the content from showing. Your script will manipulate the scrolling text's style.top property to move it relative to the window, creating a scrolling effect.

By the Way

The text layer is actually 10 pixels narrower than the window layer. This, along with the left property, creates a small margin of white space on either side of the window, preventing any of the text from being obstructed.

The JavaScript File

The JavaScript code for this example uses a function, Scroll(), that is called repeatedly by a timeout. Listing 23.3 shows the JavaScript file for this example.

Listing 23.3. The JavaScript File for the Scrolling Window

// global variable for position of the scrolling window
var pos=100;
function Scroll() {
  if (!document.getElementById) return;
  obj=document.getElementById("thetext");
  pos -=1;
  if (pos < 0-obj.offsetHeight+130) return;
  obj.style.top=pos;
  window.setTimeout("Scroll();",30);
}
// Start scrolling when the page loads
window.onload = Scroll;

The first line defines a global variable, pos, to store the current scroll position. The Scroll() function subtracts 1 from pos and checks its value. If the scrolling has reached the end, the function exits; otherwise, it sets the object position and calls the Scroll() function again using a timeout.

Did you Know?

Notice the if statement at the beginning of the function. This is a simple example of feature sensing, described in Hour 15, "Unobtrusive Scripting"if the browser doesn't support the getElementById() method, the function exits rather than cause errors.

To try this example, make sure you have all three files in the same folder: the HTML document, the CSS file (scroll.css), and the JavaScript file (scroll.js) and load the HTML document into a browser. Figure 23.1 shows this example in action, after the scrolling text has reached the end.

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]

Sams Teach Yourself JavaScript in 24 Hours