Code2care : TechZone Apps & Tutorials

Add Animated Scrolling to Html Page Title Script



To make a Html page title scroll just as a <marquee> tag, we need to use javascript.

To make the HTML page title scroll horizontally we do the following,

    1. Get the title tag tag value (its better we add spaces at the start and end of the page title)

    2. Now we need to get the substrings to re arrange the text, we create a function with the below logic,

      a. Cut the 1st character of the title and append it at the end of the string.
      b. Now, Set this text as title.
      c. To add marquee animation effort, call the function recursively even 450 milli seconds using setTimeout() function.

      3. Now call this function at <body> onload.

    titleMarquee.html

    <!DOCTYPE html>
    <html>
    
    <head>
    
    <title> Animated Web page title </title>
    
    <script type="text/javascript">
    
    
    var titleText = document.title;
    
    function titleMarquee() {
    
     titleText = titleText.substring(1, titleText.length) + titleText.substring(0, 1);
     document.title = titleText;
     setTimeout("titleMarquee()", 450);
     }
    
    
    </script>
    
    </head>
    
    <body onload="titleMarquee()">
    
    <h1>Animated/Scrolling Web page Title</h1>
    
    <p>Have a look at the Page title. Its scrolling ....</p>
    
    
    </body>
    </html> 
    


Top




Posts related to html.


1. How to place two div elements next to each other

2. Align html element at the center of page vertically and horizontally

3. Remove Html head and body tags from ckeditor source

4. How to set opacity only for div background and not the text - CSS

5. How to get table td, tr or th inner content value with id or name attribute

6. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

7. Link in html without a underline

8. Adding Sub Headings to Bootstrap Header tags

9. How to make a div tag clickable

10. Top 15 Programming Languages to learn 2014-2015

11. Chessboard with pieces using pure HTML and CSS

12. Default speed of Marquee tag : SCROLLAMOUNT

13. How to make div or text in html unselectable using CSS

14. Add Animated Scrolling to Html Page Title Script

15. Fibonacci series from 1 to 500 table

    more...

Posts related to javascript.


1. Top 15 Programming Languages to learn 2014-2015

2. How to detect Browser and Operating System Name and Version using javaScript

3. How to make jsfiddle bootstrap ready

4. Detect if Cookies are enabled using javascript

5. How to get UTC (GMT) using javascript

6. Add Animated Scrolling to Html Page Title Script

7. Loading previous page using html button using javascript

8. Get Device Screen Width and Height using javaScript

9. Digital clock example using javaScript with Source code

    more...






Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-17