Auto Scrolling Text in Textarea

Submitted by azalea zenith on Saturday, October 8, 2016 - 16:11.

In this tutorial, we are going to create Auto Scrolling Text in Textarea. This simple tutorial was created using JavaScript and HTML with Bootstrap Templates, using this, we are going to show you on how to create it. Kindly check the live demo.

First, we are going to create simple TextArea in the web page where the text will automatically scroll as you can see in the image below. Result

And, this is the source code in the image above, kindly copy and paste to the BODY tag of your web page.

<div style="width:50%;">
   <form name="msgform" action="">
      <textarea class="form-control" id="msg_area" name="msg_area" cols="69" rows="12" ></textarea>
   </form>
</div>

In the script below, this script we're gonna used to have a text inside of the TextArea.

function auto_scrolling_text() {}
var ScreenLine = new auto_scrolling_text();
ScreenLine[1] = "If you want for more source code? just visit";
ScreenLine[2] = "www.sourcecodester.com";
ScreenLine[3] = "Learn by Examples";
ScreenLine[4] = "Examples are better than thousands of words.";
ScreenLine[5] = "Examples are often easier to understand than text explanations.";
ScreenLine[6] = "www.sourcecodester.com";
ScreenLine[7] = "Do you have source code, articles, tutorials, web links, and books to share?";
ScreenLine[8] = "You can write your own content here.";
ScreenLine[9] = "You can even have your own blog.";
ScreenLine[10] = "www.sourcecodester.com";
ScreenLine[11] = "www.sourcecodester.com";
ScreenLine[12] = "Enjoy Coding . . . . .";
ScreenLine[13] = "Thank You . . . . .";

Note: You can edit your text inside in the " ". To add another screen line, kindly used this script for the new line of text.

ScreenLine[14] = "Do you have source code, articles, tutorials, web links, and books to share?";

This simple script below helps us to control the moving text in the TextArea. The first line used for what text message that you want to display first. Second, set the number of the last text to be displayed on the web page. Third, this is the speed of the text moving in the TextArea to scroll up and it counts by milliseconds, the higher number is the slower. Fourth, use to delaying the time at the end of the line. Lastly, used to mark in what line number start the text display, usually it indicates the number of rows in TextArea.

var msgNum = 1;
var msgCnt = 13;
var typeSpeed = 50;
var lineDelay = 2000
var pagLen = 7;

After compiling those source code above, this would be the output. For the full source code, kindly click the "Download Code" button below.

Output

Add new comment

525 views