Moving Text in TextBox using JavaScript in Bootstrap

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.
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.

Output

Result 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