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.
Loading ...
Open Notepad. Paste this HTML code into an empty document:
Marquee Test This creates a Marquee that contains no text.
Add the following JavaScript function after the "
" tag:</p></li> <li class="step"><p>function set Marquee() {</p></li> <li class="step"><p>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.</p></li> <li class="step"><p>Add this JavaScript code after the previous code:</p></li> <li class="step"><p>This calls the set Marquee function after the Web page loads.</p></li> <li class="step"><p>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."</p></li> <li class="step"><p>Open the file in your browser to verify that spaces exist between the words in the marquee's text.</p></li> <div class="tips"> <h4 class="text-shadow underline">Tip</h4> <p>Note that the "<marquee>" 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.</p> </div> </ol></div> <div id="google-article-block-12872004" class="no-print main-ad"> <amp-ad data-block-on-consent layout="fixed-height" height="555" type="adsense" data-ad-client="ca-pub-2494113940073314" data-ad-slot="2945830674"> <div placeholder>Loading ...</div> </amp-ad> </div> </div> <div class="references"> <h4>References</h4> <ul> <li> <a href="http://www.usg.edu/galileo/skills/ollc_glossary.phtml" rel="nofollow"> <span>University System of Georgia: Online Library Learning Center Glossary</span> </a> </li> <li> <a href="http://www.ffiec.gov/ffiecinfobase/booklets/e_banking/ebanking_04_appx_b_glossary.html" rel="nofollow"> <span>Federal Financial Institutions Examination Council: E-Banking</span> </a> </li> <li> <a href="http://www.w3schools.com/html/html_entities.asp" rel="nofollow"> <span>W3Schools: HTML Entities</span> </a> </li> <li> <a href="http://www.w3.org/TR/html5/obsolete.html" rel="nofollow"> <span>World Wide Web Consortium: 11 Obsolete Features --- HTML5</span> </a> </li> <li> <a href="http://books.google.com/books?id=2weL0iAfrEMC&pg=PT230&lpg=PT230&dq=javascript+replace+global+gi++-blog+-blogs+-%22how+can+I%22+-%22how+do+I%22+-%22how+do+you%22+-%22what+is%22+-%22can+anyone%22+-youtube&source=bl&ots=_81AsD--9I&sig=TGPEqsRViSA3kpH7gARY2cQhM74&hl=en&ei=1s2STK-iDoPGlQeUr_CqCg&sa=X&oi=book_result&ct=result&resnum=31&ved=0CL8BEOgBMB4#v=onepage&q=javascript%20replace%20global%20gi%20%20-blog%20-blogs%20-%22how%20can%20I%22%20-%22how%20do%20I%22%20-%22how%20do%20you%22%20-%22what%20is%22%20-%22can%20anyone%22%20-youtube&f=false" rel="nofollow"> <span>"JavaScript: The Definitive Guide"; David Flanagan; 2006</span> </a> </li> </ul> </div> <div class="resources"> <h4>Resources</h4> <ul> <li> <a href="http://www.tutorialspoint.com/html/html_marquee_tag.htm" rel="nofollow"> <span>Tutorials Point: HTML Marquee Tag</span> </a> </li> </ul> </div> <div class="author"> <h4>About the Author</h4> <div class="author-content"> <div class="author-info-wrapper"> <div class="author-img" style="background-image: url(https://img-aws.ehowcdn.com/60x60p/s3.amazonaws.com/cme_public_images/www_demandstudios_com/sitelife.studiod.com/ver1.0/Content/images/store/11/7/1b556006-7995-430e-9773-3863f442c046.Small.png)"></div> <div class="author-name">Kevin Lee</div> </div> <div class="author-about-wrapper"> <p>After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs. </p> </div> </div> </div> <!-- UK_LINK_2 --> <div id="LINK_AD_2" class="link-ad"> <amp-ad data-block-on-consent height="190" width="300" type="adsense" data-ad-client="ca-pub-2494113940073314" data-ad-slot="6963384860"> <div placeholder>Loading ...</div> </amp-ad> </div> <!-- UK_LINK_3 (duplicate of LINK_AD_1) --> <div id="LINK_AD_3" class="link-ad"> <amp-ad data-block-on-consent height="190" width="300" type="adsense" data-ad-client="ca-pub-2494113940073314" data-ad-slot="4611611435"> <div placeholder>Loading ...</div> </amp-ad> </div> <div id="rcjsload_ef1821" class="display-ad no-print"> <amp-ad data-block-on-consent width="300" height="470" layout="responsive" type="revcontent" data-wrapper="rcjsload_ef1821" data-endpoint="trends.revcontent.com" data-id="69463"> <div placeholder>Loading ...</div> </amp-ad> </div> <div class="more-articles no-print"><div id='300x250_300x600_ATF_MOBILE' class="display-ad no-print"> <amp-ad data-block-on-consent width="300" height="250" type="doubleclick" data-slot="/6117/dmd.ehow.uk.mw/slot1-1"> <div placeholder>Loading ...</div> </amp-ad> </div> <a class="more-article-panel" href="//www.ehow.co.uk/how_8225105_add-line-breaks-twitter.html"> <div class="more-article-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/44/63/fotolia_1146161_XS.jpg)"></div> <div class="more-article-title-container"> <span class="more-article-title"> add line breaks in twitter</span> </div> </a> <a class="more-article-panel" href="//www.ehow.co.uk/how_8511614_put-through-word-typing-facebook.html"> <div class="more-article-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/251/59/78463455.jpg)"></div> <div class="more-article-title-container"> <span class="more-article-title"> Put a Line Through a Word When Typing on Facebook</span> </div> </a> <a class="more-article-panel" href="//www.ehow.co.uk/how_8444651_make-superscript-citation-word.html"> <div class="more-article-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/94/245/dv1453025.jpg)"></div> <div class="more-article-title-container"> <span class="more-article-title"> Make Superscript in Citation With Word</span> </div> </a> <a class="more-article-panel" href="//www.ehow.co.uk/how_6800824_make-text-glow-html.html"> <div class="more-article-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/227/124/fotolia_2692394_XS.jpg)"></div> <div class="more-article-title-container"> <span class="more-article-title"> Make the Text Glow in HTML</span> </div> </a> <a class="more-article-panel" href="//www.ehow.co.uk/how_6909076_remove-text-box-word-2007.html"> <div class="more-article-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/81/93/78531475.jpg)"></div> <div class="more-article-title-container"> <span class="more-article-title"> Remove the Border Around a Text Box in Word 2007</span> </div> </a> <a class="more-article-panel" href="//www.ehow.co.uk/how_8366112_remove-word-watermark-openoffice.html"> <div class="more-article-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/150/109/fotolia_1554255_XS.jpg)"></div> <div class="more-article-title-container"> <span class="more-article-title"> Remove a Word Watermark in OpenOffice</span> </div> </a> </div> <div class="more-articles-mobile"> <h4>More Articles</h4> <amp-carousel height="200" layout="fixed-height" controls type="slides"> <div> <a href="//www.ehow.co.uk/how_8211917_remove-previous-footers-word-2007.html" class="carousel-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/77/187/87695558.jpg"> <div class="carousel-item-title"> How to Remove "Same As Previous" in Footers in Word 2007 </div> </a> </div> <div> <a href="//www.ehow.co.uk/how_5184243_make-columns-wordpad.html" class="carousel-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/14/46/fotolia_2104599_XS.jpg"> <div class="carousel-item-title"> How to make columns in wordpad </div> </a> </div> <div> <a href="//www.ehow.co.uk/how_7375163_make-picture-change-time.html" class="carousel-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/81/95/90094783.jpg"> <div class="carousel-item-title"> How to make a web page picture change with time </div> </a> </div> <div> <a href="//www.ehow.co.uk/how_8288607_liquify-tool-gimp.html" class="carousel-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/cdn-write.demandstudios.com/upload//image/1c/dc/8427f0bb-646d-4a20-b556-5f590947dc1c/8427f0bb-646d-4a20-b556-5f590947dc1c.jpg"> <div class="carousel-item-title"> How to get a liquify tool in gimp </div> </a> </div> </amp-carousel> </div> <div id='300x250_BTF_MOBILE' class="display-ad no-print"> <amp-ad data-block-on-consent width="300" height="250" type="doubleclick" data-slot="/6117/dmd.ehow.uk.mw/slot1-2"> <div placeholder>Loading ...</div> </amp-ad> </div> </div> <div class="article-sidebar no-print"><!-- UK_LINK_1 --> <div id="LINK_AD_1" class="link-ad"> <amp-ad data-block-on-consent height="190" width="300" type="adsense" data-ad-client="ca-pub-2494113940073314" data-ad-slot="4611611435"> <div placeholder>Loading ...</div> </amp-ad> </div> <div id='300x250_300x600_ATF_DESKTOP' class="display-ad no-print"> <amp-ad data-block-on-consent width="300" height="250" type="doubleclick" data-slot="/6117/dmd.ehowuk/rightrail1-1"> <div placeholder>Loading ...</div> </amp-ad> </div> <div class="related-content"> <div class="top-list-panel-title">Top 5</div><a href="//www.ehow.co.uk/how_8493709_remove-search-tumblr.html"> <div class="top-list-panel"> <div class="list-label">1</div> <div class="top-list-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/150/98/fotolia_2329245_XS.jpg)"></div> <div class="top-list-title-wrapper"> <div class="top-list-title"> <span> remove search on tumblr</span> </div> </div> </div> </a><a href="//www.ehow.co.uk/how_7337801_upload-files-server-using-asp.html"> <div class="top-list-panel"> <div class="list-label">2</div> <div class="top-list-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/181/203/fotolia_702439_XS.jpg)"></div> <div class="top-list-title-wrapper"> <div class="top-list-title"> <span> Upload Files to a Server Using ASP</span> </div> </div> </div> </a><a href="//www.ehow.co.uk/how_8211917_remove-previous-footers-word-2007.html"> <div class="top-list-panel"> <div class="list-label">3</div> <div class="top-list-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/77/187/87695558.jpg)"></div> <div class="top-list-title-wrapper"> <div class="top-list-title"> <span> Remove "Same As Previous" in Footers in Word 2007</span> </div> </div> </div> </a><a href="//www.ehow.co.uk/how_5184243_make-columns-wordpad.html"> <div class="top-list-panel"> <div class="list-label">4</div> <div class="top-list-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/14/46/fotolia_2104599_XS.jpg)"></div> <div class="top-list-title-wrapper"> <div class="top-list-title"> <span> make columns in wordpad</span> </div> </div> </div> </a><a href="//www.ehow.co.uk/how_7375163_make-picture-change-time.html"> <div class="top-list-panel"> <div class="list-label">5</div> <div class="top-list-image" style="background-image: url(https://img-aws.ehowcdn.com/288x155p/photos.demandstudios.com/getty/article/81/95/90094783.jpg)"></div> <div class="top-list-title-wrapper"> <div class="top-list-title"> <span> make a web page picture change with time</span> </div> </div> </div> </a> </div> <div id='300x250_BTF_DESKTOP' class="display-ad no-print"> <amp-ad data-block-on-consent width="300" height="250" type="doubleclick" data-slot="/6117/dmd.ehowuk/rightrail1-2"> <div placeholder>Loading ...</div> </amp-ad> </div></div> </div> <amp-next-page> <script type="application/json"> { "pages": [ { "title": "How to remove search on tumblr", "image": "http://photos.demandstudios.com/150/98/fotolia_2329245_XS.jpg", "ampUrl": "https://www.ehow.co.uk/how_8493709_remove-search-tumblr.html" } , { "title": "How to Upload Files to a Server Using ASP", "image": "http://photos.demandstudios.com/181/203/fotolia_702439_XS.jpg", "ampUrl": "https://www.ehow.co.uk/how_7337801_upload-files-server-using-asp.html" } ], "hideSelectors" : [ "footer", "header" ] } </script> </amp-next-page> </div> </main> <footer class="no-print"> <a class="brand-logo" aria-label="logo" href="//ehow.co.uk/" data-event="footer nav" rel="home"> <amp-img src="//www.ehow.co.uk/images/ehow-uk-logo.svg" width="99" height="45" layout="responsive" alt="eHow.uk" /> </a> <div class="legal"> <span> <a href="//www.ehow.co.uk/terms-of-use" aria-label="terms of use" data-event="footer nav">Terms of Use</a> • <a href="//www.ehow.co.uk/privacy" aria-label="privacy policy" data-event="footer nav">Privacy Policy</a> • <a href="//www.ehow.co.uk/copyright-policy" aria-label="copyright policy" data-event="footer nav">Copyright Policy</a> • <a href="//www.ehow.co.uk/about-us" aria-label="about us" data-event="footer nav">About Us</a> </span> Copyright Leaf Group Ltd. / Leaf Group Lifestyle </div> <a class="leaf-logo" aria-label="logo" href="//leafgroup.com"> <amp-img src="//www.ehow.co.uk/images/leafgroup-logo-white.png" width="106" height="60" layout="responsive" alt="Leaf Group" /> </a> </footer></body> </html>