By Joe Burns
Teep...
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:
<SCRIPT LANGUAGE="JavaScript">
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);
setTimeout("SBScroll()",100);
}
</SCRIPT>
<FORM NAME="TheForm">
<INPUT TYPE="text" NAME="display">
<INPUT TYPE="button" VALUE="Click me For the Scroll" onClick="SBScroll()">
</FORM>
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()">
</FORM>
Through your powers of deduction, you've probably noticed that these are HTML Form flags. 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 Week: New Script! Drop Down Link Menu & Frames
Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at:
jburns@htmlgoodies.com.
|
Learn to write your own JavaScripts with the
HTML Goodies 30-Step Primer Series
| 
IE 7
Firefox 2.0
