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
Content goes here.
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:
Post a Comment