BeWebmaster

Creating a Scrolling Text Box with Javascript

Ad

In this tutorial you will learn how to create a scrolling message within a text box. Here are the steps.

  1. Define a variable (pos) to store the current scroll position.
  2. Write a function that will:
    • get the id value of the scrolling text box.
    • subtract 1 from pos and check pos value using offsetHeight, which retrieves the height of the object relative to the layout.
    • set a new height value using JavaScript style object.
    • finally the function calls itself using a timeout.

JavaScript Function for the Scrolling Text Box

var pos = 100;

function Scroll(){

obj=document.getElementById('scrolltextlayer');
pos -=1;

if(pos < 0 - obj.offsetHeight+130) return;
obj.style.top=pos;
window.setTimeout( "Scroll();" ,  30);

}

HTML Code for the Scrolling Text Box

HTML code is very simple. All we have to do is include the Scroll function and define the appropriate layers for the text box. 

We will need two nested layers: 

  • one to create a small window to display the text in
  • second to contain the text to scroll. 

To create the scrolling effect the script will manipulate the scrolling text layer's style.top property. The overflow property of the window layer will prevent the content that's beyond window layer boundaries from showing.

To start the scrolling we will call the Scroll function from within the <body> tag using onLoad.

<html>
<head>
<title>A JavaScript Scrolling Text Box</title>
<script language="JavaScript" type="text/javascript">

var pos = 100;

function Scroll(){

obj=document.getElementById('scrolltextlayer');
pos -=1;

if(pos < 0 - obj.offsetHeight+130) return;
obj.style.top=pos;
window.setTimeout( "Scroll();" ,  30);

}
</script>
</head>
<body onLoad="Scroll();">

<div id="windowlayer" style="position:relative; width:200px; height:150px; overflow:hidden; border: 1px solid #ccc;">

<div id="scrolltextlayer" style="position:absolute; width:180px; height:130px; top:100px;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras hendrerit mauris eget nunc. Proin dapibus eros in quam. Nunc nulla nunc, nonummy auctor, scelerisque non, cursus et, leo. </p>
<p> Nullam egestas nulla feugiat orci. Integer lorem sapien, ullamcorper dapibus, cursus eu, sagittis vel, dolor. Mauris tincidunt, magna in congue bibendum, sem quam tincidunt tortor, in consectetuer turpis odio a libero. </p>
<p>Suspendisse viverra lectus et nunc. Nam elementum. Nam varius, magna a pretium feugiat, lacus nisi egestas enim, quis blandit nisi enim ut justo. In sit amet mi. </p>
<p>Sed cursus sagittis pede. Morbi nec dolor in arcu interdum consectetuer. Vivamus vel orci quis purus tristique vehicula. Curabitur eleifend nisi quis magna viverra laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>

<p><a href="javascript:pos=100; Scroll();">Scroll again</a></p>

</div>
</div>
</body>
</html>

View the sample.

As you can see creating a JavaScript Scrolling Text Box is very simple. Don't be affraid to leave your comment, suggestions or corrections.