InformIT: Sams Teach Yourself JavaScript in 24 Hours > Workshop: Creating a Scrolling Text Box

Workshop: Creating a Scrolling Text Box

In Hour 5, "Using Strings and Arrays," you created a simple scrolling message. In Hour 20, "Using Advanced DOM Features," you created a scrolling message using DHTML.

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, and can include links or other HTML features.

Creating the JavaScript Function

This example uses a simple JavaScript function. The following JavaScript code defines the Scroll function:

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);
}

The first line defines a variable, pos, to store the current scroll position. Next, this 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.

Creating the HTML Document

To complete the scrolling message, you can create an HTML document that defines the appropriate layers and includes the Scroll function. Listing 23.4 shows the complete HTML document.

Example 23.4. The HTML Document for the Scrolling Text Box

<html>
<head>
<title>A DHTML Scrolling Window</title>
<script language="JavaScript" type="text/javascript">
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);
}
</script>
</head>
<body onLoad="Scroll()">
<h1>Scrolling Window Example</h1>
<p>This example shows a scrolling window created in DHTML. The window
is actually a layer that shows a portion of a larger layer.</p>
<div id="thewindow" style="position:relative;width:180;height:150;
  overflow:hidden; border-width:2px; border-style:solid; border-color:red">
<div id="thetext" style="position:absolute;width:170;left:5;top:100">
<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>
<p><b>[<a href="javascript:pos=100;Scroll()">Start Over</a>]</b></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.

Since 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 text window's style.top property to move it relative to the window, creating a scrolling effect.

The actual text to scroll is placed within the inner <div> element. You can use any HTML here, although it should be able to wrap to the small window.

Figure 23.3 shows this example in action, after the scrolling text has reached the end.

Figure 23.3 The scrolling text box in action.

Summary | Next Section

Previous Section

Exercises

Workshop: Creating a Scrolling Text Box

Creating the JavaScript Function

Creating the HTML Document

Example 23.4. The HTML Document for the Scrolling Text Box