Moving Text in TextBox using JavaScript in Bootstrap

Submitted by alpha_luna on Wednesday, September 28, 2016 - 10:13.

In this tutorial, we are going to learn how to create Moving Text in TextBox using JavaScript in Bootstrap. This simple project, text in a textbox that automatically scrolling in itself and it is created using JavaScript query and for the GUI using Bootstrap Template. You can use this simple project to catch the attention of the users while they visiting your site. It's used as your alert message or a kind of special announcement for the users to catch them easily that you have a message for them. For the Live Demo, kindly click the button below.

Bootstrap File If you have already Bootstrap File in your computer, kindly unzip this compressed file folder to have it and to see what's the structure of the Bootstrap File. It looks like this:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Create Markup Then, we are going to create a simple markup for the text scrolling in the TextBox. Copy and paste this source code to the BODY tag of your web page.

<form name="text_Marquee"> 
   <input name="text" class="form-control"
      value=" Welcome to Sourcecodester..... Do you have a source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog.... Submit now!!! "  disabled /> 
</form>

Construct Simple Script This simple script helps us to move the text in the TextBox. You can set the scrolling speed whatever you want, you can change it in the speed_Scrolling variable in the simple script. Take a look the source code below and study it.

<script>
    /*
    Text box marquee, 
    You can used/modified if credit 
    line is retained
    */
    speed_Scrolling = 150
    characters_Scroll = 1
 
    function scrolling_Text() {
        window.setTimeout('scrolling_Text()', speed_Scrolling);
 
        var msg = document.text_Marquee.text.value;
        document.text_Marquee.text.value =
            msg.substring(characters_Scroll) +
            msg.substring(0, characters_Scroll);
    }
    scrolling_Text()
</script>

Output

If you are comfortable with the source code, then kindly download the source code below via click the "Download Code" button. Then, unzip the file to see all the source code. Thank you, enjoy coding.

Add new comment

264 views