Bubble Msg with delay – Javascript

Annoyed with the bubble messages on mouse hover on a link. Why not add delay to the bubble msg.

Prerequisite: your html body needs to have an empty <div> with a id defined

for example:

   1:  <body>
   2:  <div id="bubbles"></div>
   3:  </body>

Here is the include for fxbubble.js in html page -> <head> tag.

for example:

   1:  <head>
   2:  <script language="JavaScript" type="text/javascript" src="js/fxbubble.js"></script>
   3:  </head>
Now to the fxbubble.js code
   1:  var over_Layed = null;
   2:  var timpop=0;
   3:  var timer = 500; //default
   4:  function bubble(divid,msg, newtimer){
   5:  timer = newtimer;
   6:  if(msg=="" || msg== undefined){
   7:  document.getElementById(divid).removeChild(over_Layed);// delete the child div if msg is empty
   8:  }else{
   9:  over_Layed = document.createElement("div");// create a new div element
  10:  over_Layed.style.position = "absolute";// to position of the page irrespective of all elements on page
  11:  over_Layed.style.height =20+"px"; // height of the div element
  12:  over_Layed.style.left =xMouse+50+"px";// a little offset
  13:  over_Layed.style.top =yMouse-30+"px";// a little offset
  14:  over_Layed.style.display = "none"; //hide the div element created. display with respect to timer
  15:  over_Layed.innerHTML = msg //your html content
  16:  document.getElementById(divid).appendChild(over_Layed);// create a child div to the empty div on your page
  17:  timpop= setTimeout("showmsg('"+divid+"','"+msg+"')",timer);//calls showmsg function with respect to timer
  18:  }
  19:  }
  20:  function showmsg(divid,msg){
  21:  if(msg=="" || msg== undefined){
  22:  document.getElementById(divid).removeChild(over_Layed);// onmouse out delete chid div
  23:  }else{
  24:  over_Layed.style.display = "block";//display the div as the timer is ready
  25:  }
What is this xMouse and yMouse?
I have used another snippet from a fellow developer site to track the x and y position of the mouse.
Here is the link and the full credits go to him.
Here is the part of code which I have used
   1:  xMouse=0;yMouse=0;      // globals to hold coordinates
   2:  document.onmousemove=getMouse; // start event listener
   3:  function getMouse(e){
   4:  e=e||window.event;
   5:  if (e.pageX||e.pageY){
   6:  xMouse=e.pageX;yMouse=e.pageY;
   7:  } else {
   8:  de=document.documentElement;b=document.body;
   9:  xMouse=e.clientX+(de.scrollLeft||b.scrollLeft)-(de.clientLeft||0);
  10:  yMouse=e.clientY+(de.scrollTop||b.scrollTop) - (de.clientTop||0);
  11:  }
  12:  }
Now to the explanation on the actual usage
   1:  <!-- bubble msg usage -->
   2:  <a href="#" onmouseover="bubble('bubbles','msg');" onmouseout="bubble('bubbles','');" >show bubble</a>
   3:  <!-- where bubbles is the empty div id available in the html body, msg - you own html content -->
blinkbits BlinkList blogmarks co.mments connotea del.icio.us De.lirio.us digg Fark feedmelinks Furl LinkaGoGo Ma.gnolia
NewsVine Netvouz RawSugar Reddit scuttle Shadows Simpy Smarking Spurl TailRank Wists YahooMyWeb

Technorati Tags: , , , , , , ,

5 thoughts on “Bubble Msg with delay – Javascript

  1. Hi !

    Just wanted to thank you about this Tutorial, I’ve found it really useful and not so bad. My question is, How can I do to test it ? can you please give the link to download it ? or you can send me that in my mail Address ?
    I’ll be very happy for that 🙂

    Thanks in advance, and just keep on that way.
    Really amazing !

    Looking forward to hearing from you !

    Sincerely yours.

  2. Hi all:
    The js file is currently available at http://www.flashinvcube.com/ and the usage instruction is also mentioned there.
    you can download them and use it at will. If you like it please bookmark in delicious.

    The advantage of Bubble msg is the freedom to create user defined bubble msg, some times big, some times small. 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s