September 23, 2018
Hot Topics:

Scroll in a Text Box

  • February 20, 1999
  • By Joe Burns
  • Send Email »
  • More Articles »


OK, so you know how the scroll works. Now let's get that scroll to show up in a text box. Below is the altered code. I have underlined new commands to the script.

...and here's the script:


var space = "                  "
var ScrollText = space + "Hey hey! Look at me scrollin..."

function SBScroll() 

temp = ScrollText.substring(0,1);
ScrollText += temp

ScrollText = ScrollText.substring(1,ScrollText.length);
document.TheForm.display.value = ScrollText.substring(0,ScrollText.length);




<FORM NAME="TheForm">
<INPUT TYPE="text" NAME="display">
<INPUT TYPE="button" VALUE="Click me For the Scroll" onClick="SBScroll()">

First off, if we're going to put this scroll into a text box, we're going to need a text box. So we'll start with the code at the bottom first:

<FORM NAME="TheForm">
<INPUT TYPE="text" NAME="display">
<INPUT TYPE="button" VALUE="Click me For the Scroll" onClick="SBScroll()">
Through your powers of deduction, you've probably noticed that these are HTML Form tags. Now that we're going into a text box format, a few things become important. First off, you have to make sure that you assign the form itself and the text box a name. I have named the form itself "TheForm" and the text box "display". I think those are pretty representative efforts, yes?

You'll not I also have the commands for the button in there. You probably won't fire up your scroll from a button, but if you ever want to--here it is. The button is created simply to house an onClick() Event Handler that triggers the function to run.

OK, we know the players. Let's go back up and into the script for the display. Here's the line that gets the scroll into the text box:

document.TheForm.display.value = ScrollText.substring(0,ScrollText.length); 

You'll note the line is actually on two lines here in the display. That's only because of space constraints. This actually should go all on one line.

The only thing that has changed is the text "window.status" is now the hierarchy statement "document.TheForm.display.value". That text is directing the output of the scroll to act as the value for the text box, "display", inside the form, "TheForm", on the HTML document.

Just those few changes sent the output of the scroll to a text box. Nothing to it.

Next Time: New Script! Drop Down Link Menu & Frames

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.


Thanks for your registration, follow us on our social networks to keep up-to-date