How to Add Spaces in HTML Marquee Text

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Add Spaces in HTML Marquee Text
Scrolling text still captures the attention of Web surfers. (Internet image by Leticia Wilson from Fotolia.com)

HTML consists of statements that define a Web page's elements, controls and appearance. You can place text anywhere inside the body of an HTML document. Unfortunately, browsers remove extra spacing between words in a text string. This increases the time it takes to format some elements such as the HTML marquee. A marquee displays scrolling text that moves across a Web page. To add spaces to text in a marquee, use JavaScript to replace regular spaces with special characters that the browser will not remove.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Open Notepad. Paste this HTML code into an empty document:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Marquee Test</title>

    </head>

    <body>

    <marquee id="Marquee1"></marquee>

    </body>

    </html>

    This creates a Marquee that contains no text.

  2. 2

    Add the following JavaScript function after the "<title>" tag:

    function set Marquee() {

        var original Text = "Marquee       String       Text";
    
        var marqueeID = "Marquee1";
    
    
    
        var blank Character = "&amp;" + "nbsp;"
    
    
    
        var new Text = originalText.replace(/ /gi, blank Character);
    
    
    
        var marquee Object = document.getElementById(marqueeID);
    
        marqueeObject.innerHTML = new Text;
    
    }
    

    This function sets the marquee text. The variable "originalText" holds the text string that you want to appear in the marquee. In this example, that text is "Marquee String Text." Add as many spaces as you like between the words or characters. "MarqueeID" holds the ID of the marquee. The "replace" method replaces the blanks in the text string with the special HTML character stored in "blankCharacter." The last statement adds the modified text to the marquee object.

  3. 3

    Add this JavaScript code after the previous code:

    window.onload = function () {
    
        set Marquee();
    
    };
    

    This calls the set Marquee function after the Web page loads.

  4. 4

    Save the Notepad file with an .html extension. For example, if you want to name the file "Marquee Test," save it as "Marquee Test.html."

  5. 5

    Open the file in your browser to verify that spaces exist between the words in the marquee's text.

Tips and warnings

  • Note that the "" tag in the body of the HTML has an id of "Marquee1." Name the ID anything you like. It must, however, match the value that you set for MarqueeID in the JavaScript function.

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.