Scroller In TextBox Using HTML JavaScript

Submitted by alpha_luna on Wednesday, July 22, 2015 - 11:20.

Good Day!!!

Today, we are going to learn Scroller In TextBox. This project that scrolls itself in a text box. You can use this project in your certain site to catch the attention of your users. This will serve as an alert message or an announcement for your users to easily notice the message.

Example:

Directions:

First: Kindly copy this code to the HEAD section of your page.

<style type="text/css"> 
 
.style_text {
cursor: no-drop;
padding: 7px 8px 7px 8px;
border: 3px solid #7A81DE;
}
 
</style>

* Note: You can add more CSS for this project. Second: Simply add this code to your BODY section of your page.

<form name="marquee_text"> 
<input name="text" class="style_text"
value=" Welcome to Sourcecodester.....Do you have 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>

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

* Note: Put the script at the end of the form tag, you can change the speed of the text by adding/subtracting (150). So what can you say about this work? Share your thoughts in the comment section below and also, don’t forget to like this page. Practice coding. Thank you.

Add new comment

17 views