Sunday, July 31, 2011

Html-Javascript Tips: Blinking Page Title

     

Creating animation in the title bar will give beauty to a website. In this post, we will make the effects of blinking title. There are two kinds of effects we will practice here, one is all title blinking, and the second is only a part of title blinking. You can see the results by clicking the button on the right:

Blinking Title 1

Here are the scripts. Put these scripts inside <head> and </head>:

<script language="JavaScript">
var jsblink1_message = "ShoutWhisper: Hello !";
var jsblink1_start = 1;
function jsblink_title_1(){
    if (jsblink1_start == 1) {
        if (jsblink1_message == '') jsblink1_message = document.title;
        document.title = jsblink1_message;
        //length of time to appear (in milliseconds)
        setTimeout('jsblink_title_1()', 1000); 
        jsblink1_start = 0;
    }else{
        document.title = '.';
        //length of time to disappear (in milliseconds)
        setTimeout('jsblink_title_1()', 500); 
        jsblink1_start = 1;
    }    
}
</script>

You may change the red text as needed. If variable 'jsblink1_message' (first red text) is empty, then the existing page title will be used.
To make this script works, change the event 'load' in the tag 'body' like this:

<body onload="jsblink_title_1();">


Blinking Title 2

Unlike the first script above, in this second one only some part of title will blink. Here are the scripts. Put these scripts inside <head> and </head>:

<script language="JavaScript">
var jsblink2_msg_constant = "ShoutWhisper: ";
var jsblink2_msg_blink = "Hello !";
var jsblink2_start = 1;
function jsblink_title_2(){
    if (jsblink2_start == 1) {
        document.title = jsblink2_msg_constant + jsblink2_msg_blink;
        //length of time to appear (in milliseconds)
        setTimeout('jsblink_title_2()', 1000); 
        jsblink2_start = 0;
    }else{
        document.title = jsblink2_msg_constant;
        //length of time to disappear (in milliseconds)
        setTimeout('jsblink_title_2()', 500); 
        jsblink2_start = 1;
    }    
}
</script>

Just change the red text in scripts above as your wish. And then to make that works, change the event 'load' in the tag 'body' like this:

<body onload="jsblink_title_2();">

It's done. Codes above are just basic javascript programs of blinking text effect in the title bar, you can still develop them to be more unique and more cool. Hopefully this article useful to you. Have fun !   (:-)
  

Related Posts:

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)