Thursday, June 21, 2012

Display div alongside with links on mouse move and hide when mouse moves out

Literally I prefer to use ToolTip text or title attribute when I need to display simple information however many times we need a div element to do the trick to meet our business requirement. I had found following script in some site few months back but I do not remember which but with hope it might help others, I have pasted it here.

  <script type="text/javascript" language="JavaScript">

var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e)
       cX = e.pageX; cY = e.pageY;
}
function UpdateCursorPositionDocAll(e)
    cX = event.clientX; cY = event.clientY;
}
if(document.all) 
    document.onmousemove = UpdateCursorPositionDocAll; 
}
else 
    document.onmousemove = UpdateCursorPosition; 
}
function AssignPosition(d) {
if(self.pageYOffset) {
 rX = self.pageXOffset;
 rY = self.pageYOffset;
 }
else if(document.documentElement && document.documentElement.scrollTop) {
 rX = document.documentElement.scrollLeft;
 rY = document.documentElement.scrollTop;
 }
else if(document.body) {
 rX = document.body.scrollLeft;
 rY = document.body.scrollTop;
 }
if(document.all) {
 cX += rX; 
 cY += rY;
 }
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d,cnt) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
dd.innerHTML=cnt;
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
</script>

The div Element

Setting text of the div element in runtime

protected void Page_Load(object sender,EventArgs e)
   {
    string content="I am loaded in runtime ";
    lnk1.Attributes.Add("onmouseover", 
"javascript:return ShowContent('myDiv','" + content + "'); return true;");
   lnk1.Attributes.Add("onmouseout", "javascript:return 
HideContent('myDiv'); return true;");

   }

No comments: