• We just launched and are currently in beta. Join us as we build and grow the community.

Scroller In TextBox Using HTML JavaScript

starpiller

Deployment Wizard
S Rep
0
0
0
Rep
0
S Vouches
0
0
0
Vouches
0
Posts
112
Likes
117
Bits
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 200 XP
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. .style_text

    {
  3. cursor

    :

    no-drop;
  4. padding

    :

    7px

    8px

    7px

    8px

    ;
  5. border

    :

    3px

    solid

    #7A81DE

    ;
  6. }

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

    msg =

    document.marquee_text

    .text

    .value

    ;
  12. document.marquee_text

    .text

    .value

    =
  13. msg.substring

    (

    ScrollChars)

    +
  14. msg.substring

    (

    0

    ,

    ScrollChars)

    ;
  15. }
  16. scrolltext(

    )
  17. </

    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.


Download
You must upgrade your account or reply in the thread to view the hidden content.
 

452,496

337,370

337,378

Top