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 -->
Technorati Tags: javascript, bubble, tooltip, callouts, title, mouseover, mouseout, delay
Like this:
Like Loading...
