Scroller In TextBox Using HTML JavaScript

Submitted by: 
Language: 
Visitors have accessed this post 328 times.

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.

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

* Note: You can add more CSS for this project.

Second: Simply add this code to your BODY section of your page.

  1. <form name="marquee_text">
  2. <input name="text" class="style_text"
  3. value=" Welcome to Sourcecodester.....Do you have source code, articles,
  4. tutorials, web links, and books to share? You can write your own content
  5. here. You can even have your own blog.... Submit now!!! " disabled />
  6. </form>
  1. <script>
  2. /*
  3. Text box marquee,
  4. You can used/modified if credit
  5. line is retained
  6. */
  7. ScrollSpeed = 150
  8. ScrollChars = 1
  9. function scrolltext() {
  10. window.setTimeout('scrolltext()',ScrollSpeed);
  11.  
  12. var msg = document.marquee_text.text.value;
  13. document.marquee_text.text.value =
  14. msg.substring(ScrollChars) +
  15. msg.substring(0,ScrollChars);
  16. }
  17. scrolltext()
  18. </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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.