Rooturaj's Blog

The words of a Techie who loved Nature.

Blinking Page Title with Javascript | Flashing HTML page title

Posted by rooturaj On April - 13 - 2011

Now this is a very old practice that was probably popular some 5 years ago. Blinking / flashing your page title. But the thing is that I had to use it yesterday for a chat page. Every time a new message arrives we wanted to catch the users attention. So thats where it helps.

Where can you see the Title text blinking?

  • If you have the page open your Title will blink. Either switch between two messages or One Blank and One Message switching.
  • if you have that page open in a tab the you will see some text blinking on the tab name.
  • If the window is minimised with the page in question as the active tab then you can see the text in the taskbar tab blinking.
  • If you are using windows 7 then you need to point to your browser icon on task bar to see the blinking happening.

Here is the code.


defaultmsg=document.title

// functions to blink the title of the page with a message

function blinkmsg(message, count) {

    blinkingmsg(count, message, true);

}

function blinkingmsg(count, message, blink){

    if(blink){

        document.title=message;

    } else {

        document.title=defaultmsg;

        count-- // decrement the number of times left to blink

    }

    if (count > 0) {

        blinkTimer = setTimeout("blinkingmsg("+count+", '"+message+"', "+!blink+")", 800);

    }

}

function test()

{

setInterval('blinkmsg("drink.", 3)', 2000);

}

Now the above code will do three title flashes in 2000, miliseconds or 2 seconds. So you can do the calculation as per your needs. Do not bug the user too much. Thats not a good idea. Plus setTimeOut will use quite a bit a CPU time I suppose because of constant need to check and execute.

Use the Code well and let me know if anything is not upto your expectation.

Messenger Links | Yahoo Skype Gtalk Chat and Call links on website

Posted by rooturaj On October - 13 - 2010

Have you ever wondered about those special links that let you activate your Instant Messenger when you click a link on some website and let you talk to their customer support or Sales guy? Ever wanted to include the same on your own blog or website? Here is my one stop guide to all special messenger links.

Popular Messengers - Using them on your Website.

Popular Messengers - Using them on your Website.

You don’t always need to use those free chat integrations on your website that eat up your bandwidth and are not much user friendly as well. Moreover they bug your visitors with adds if you are using free versions. Almost everyone will has and knows how to use a messenger software so it could be a bit more comfortable for the users.

I am adding code snippets for the three most popular messengers on the planet – Yahoo, Gtalk, Skype
Remember these links only work if you have the respective messenger installed on your system.

Yahoo Messenger Links for your Website

<a href="ymsgr:sendIM?userid">Open an Instant Message Window</a>
<a href="ymsgr:sendIM?userid&m=add your message here">Opens yahoo IM window with a default message</a>
<a href="ymsgr:addfriend?userid">Adds the user to your buddy list</a>
<a href="ymsgr:chat?CHATROOMNAME">Starts a chat room.</a>

Gtalk Messenger (Chat and Call Links for your website / Blog)

gtalk:ACTION?jid=to-email-id&from_jid=from-email-id

Now Google Talk has one simplified global version. You can use ‘chat’ or ‘call’ (without the quotes) in place of action start a chat window or make a voice call which ever you like. The to-email-id field will carry the emailid of  the user who receives the chat or call and the from-email-id is for the sender. The latter is an optional field. You need that in case you have multiple google account to choose form.

Skype Messenger Chat and Call links

skype:USERNAME?ACTION

The Action parameter could be either ‘chat’ or ‘call’ as per your requirement. You could configure it smartly on your websites with a little bit of programming. There should be an admin page where the support guy or you can control your status and depending on the inputs the chat and call links will change sitewide.

Text content outside Div IE | Duplicate Characters Bug IE6

Posted by rooturaj On July - 14 - 2010

Hey Programmer,

Since you are on this page I know you are a web developer.  Cheers mate. I hope you have not spent one whole night awake and skipped dinner like me when you had a deadline and Microsoft Internet Explorer acted up. Especially the God Damned IE6 which should, IMHO, be banned and all users using that browser be taxed $1000 a year as Anti-Development tax. I am not exaggerating. We waste our time and electricity on fixing code for IE6 and that should be charged on users who don’t upgrade to Firefox or Opera or Chrome.

Anyway I wanted to share with you a peculiar error on IE6. You see parts of your content duplicated for no apparent reason. If it not aligned properly or breaking orientation its understandable…but showing some characters that make the end of the content is just outrageous.  Now see this example -

a simple instance of the bug - snapshot

a simple instance of the bug - snapshot

Notice the pink area in the footer. I have set the height of container divs and the two yellow/blue halves as same. The last three characters of my content in right half is being duplicated.  I know its like majic but who the hell likes this shitty magic?

How to recreate the bug?

<!--main div statrs here-->
</code>
<div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;">
<!--sub div statrs here-->
<div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;">
<!--left div statrs here-->
<div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #ffff99; float: left;">This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div.</div>
<!--left div endshere-->
<!--right div statrs here-->
<div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #00ffff; float: left;">
Right div text material here. Right div text material here. Right div text material here. Right div text material here.Right div text material here.Right div text material here.Right div text material here.</div>
<!--right div ends here-->
</div>
<!--sub div ends here-->
</div>
<!--main div ends here-->

How to fix this IE duplicate characters issue?

The fix is rather simple .. You got to limit the use of comments. Yeah…for some ‘God Knows Why’ reason using comments can lead to bugs in your HTML coding. From what I have read about this ..it seems IE6 has a margin buffer on right..that is if you have a box with 100px width you cannot have two boxes inside it with 50px width each.

1. You need to provide atleast 3px free space on right so that Microsoft guys might stick their thing there. (sorry for being rude)
2. Else you need to remove the comments. The comments seem to trigger the bug in most cases.

Either one of the fixes or their combination should work for you. If it does not you can curse me in the comments for wasting your time and continue your search on internet.

We have faced this problem many of the times. When we want to display some message on top of all layers on a page or use some feature like jQuery light boxes. Normally the flash file continues to shine through the page. No matter what you do with layering the dom elements using z-index.

See the layering flash content problem definition here.

Before this, people used to dodge this issue with some fixes like hiding the flash area completely and then showing a static image of the html file in its place. Then it gave a semblance of layering flash beneath html content. But since flash 9 we can layer flash elements under html with ease.

See the solved situation where we have content over flash.

What you need to do to achieve this?

Nothing much. You set z-index value to your divs. Say we have a flash div (#flasho), a div for creating a the transparent layer (#transo), and the div for displaying content as a light box (#boxo)

Here is the css for them all. There is also the javascript code for the effect call on button click. (see solved example link above.

<style type="text/css">
#flasho{z-index:0;}
#boxo{top:200px;left:400px;border:1px double #600;width:532px;height:210px;margin:0px;z-index:100;position:absolute;display:none;background:#FFFFFF;}
#transo{background:#000000;height:400px;;width:100%;-moz-opacity:.80;top:0px;left:0px; filter:alpha(opacity=80); opacity:.80;display:none;position:absolute;z-index:99;}
</style>
<script type="text/javascript">
function addthiseffect()
{
document.getElementById('transo').style.display="block";
document.getElementById('boxo').style.display="block";
}
</script>

Now for the flash part we need to do this little addition. Add wmode=”transparent” to the <embed> tag and <param value=”transparent” /> to the <object> tag. See my Flash code below that I have used in my example.

<div style="float:left;width:343px;height:160px;margin-top:7px;z-index:0;">

<OBJECT

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

WIDTH="343" HEIGHT="160"><PARAM VALUE="flash/course-in-aviation.swf"><PARAM VALUE=high><PARAM VALUE=#00000><param value="transparent" /><EMBED src="flash/course-in-aviation.swf" quality=high bgcolor=#FFFFFF WIDTH="343" HEIGHT="160" wmode="transparent"

NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

</div>

VIDEO

TAG CLOUD

Sponsors