How to Create Scrolling Text With Javascript

Written by tony myles Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create Scrolling Text With Javascript
JavaScript adds dynamic properties to the content of Web pages. (Internet image by arabesque from Fotolia.com)

JavaScript is a website development language used to create a variety of text, graphic, video and hyperlink effects on Web pages. Many JavaScript actions can also be accomplished through HTML coding, yet JavaScript is a more recognisable computing language among the different browsers people utilise to create websites. JavaScript still needs a HTML source to embed into, including when an individual wants to make text scroll from up and down or side to side.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Open a program that can edit the code of your Web page, such as Windows Notepad.

  2. 2

    Locate and click into the specific area of your Web page after the <BODY> tag where you want the script to run.

  3. 3

    Type the following data into your HTML code to begin the script, experimenting with the numbers below to vary the speed and position of your script:

    <script language="JavaScript">

    var pos=100;

    function Scroll() {

    if (!document.getElementById) return;

    obj=document.getElementById("thetext");

    pos -=1;

    if (pos < 0-obj.offsetHeight+130) return;

    obj.style.top=pos;

    window.setTimeout("Scroll();",30);

    }

    </script>

    </head>

  4. 4

    Continue the script by defining your content, replacing the generic text with the intended message:

    <body on Load="Scroll();">

    <div id="thewindow" style="position:relative;width:180;height:150;

    overflow:hidden; border-width:2px; border-style:solid; border-colour:red">

    <div id="thetext" style="position:absolute;width:170;left:5;top:100" >

    <p>This is the first paragraph of the scrolling message. The message

    is created with ordinary HTML. Entries within the scrolling area can use any HTML tags. </p>

    <p><b>[<a href="JavaScript:pos=100;Scroll();">Start Over</a>]</b></p>

    </div>

    </div>

    </body>

  5. 5

    Save and publish the Web page online.

Tips and warnings

  • Text scrolling is available in many different formats, such as those listed at The JavaScript Source.
  • Test your finished page with a variety of Web browsers to ensure the script works properly.
  • Some JavaScript requires a script be placed in the header of the HTML document.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.