The flashing hint effect of title title of a Web page _javascript skill

Source: Internet
Author: User

The page title to prompt the user to have new messages this feature is very common, such as the current microblogging, there are some mailboxes, this feature is very common. How do you implement a function?

The idea is: through Ajax access to the background, if there is a new message, the title of the page will be replaced with the message, and switch back and forth with the space. For example: "You have new messages" and "" switch. Hint content is dynamic, so the number of spaces to replace the text is also calculated. Here we use a full angle space. However, if the message has a ' number ' and other half-width characters, the problem occurs. The width of an empty aligning half angle of 1 is much wider. In this way, flashing up and looking at is not very comfortable; The workaround is to replace full-width characters with full-width spaces, and half-corner spaces to replace half-width characters.
But document.title= '; Regardless of the number of half-width spaces, the browser displays only one. In words, it is output as it is, only with Var t=document.getelementsbytagname (' title ') [0]. Gets the title Dom object, which is modified by t.innerhtml= '.

But it will be so smooth, of course not. Our lovely ie always comes out of trouble at this time. The innerHTML of title in IE is read-only (not just title, others such as: COL, Colgroup, FRAMESET, HTML, STYLE, TABLE, Tbody, TFOOT, THEAD, The innerHTML property of TR is read-only. An "Unknown run-time error" appears if the assignment is forced. At present, I have not found a very good way, can only add Try{}catch (e) {} to it for special treatment
Share the following source code:

Copy Code code as follows:

<script type= "Text/javascript" language= "JavaScript" >
var Flashtitleplayer = {
Start:function (msg) {
This.title = Document.title;
if (!this.action) {
try {
This.element = document.getElementsByTagName (' title ') [0];
This.element.innerHTML = This.title;
this.action = function (TTL) {
This.element.innerHTML = TTL;
};
catch (e) {
this.action = function (TTL) {
Document.title = TTL;
}
Delete this.element;
}
This.toggletitle = function () {
This.action (' "' + this.messages[this.index = This.index = 0? 1:0] + ' Welcome to the Concise modern Magic ');
};
}
This.messages = [MSG];
var n = msg.length;
var s = ';
if (this.element) {
var num = Msg.match (/\w/g);
if (num!= null) {
var n2 = Num.length;
N-= n2;
while (N2 > 0) {
s + + "";
n2--;
}
}
}
while (n > 0) {
s + = ';
n--;
};
This.messages.push (s);
This.index = 0;
This.timer = setinterval (function () {
Flashtitleplayer.toggletitle ();
}, 1000);
},
Stop:function () {
if (This.timer) {
Clearinterval (This.timer);
This.action (This.title);
Delete This.timer;
Delete this.messages;
}
}
};
function Flashtitle (msg) {
Flashtitleplayer.start (msg);
}
function Stopflash () {
Flashtitleplayer.stop ();
}
</script>

Firefox, Chrome is no problem, ie when the message has one or no half-width characters are not a problem.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.