Hi All,
I have a hyperlink and I want to mouse over it to show some information in a div. The problem is that the div moves as you mouseover on the hyperlinks in the different rows in IE 7 and Safari but it does not work in Firefox.
Please see the markup and code-behind code below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestModalPopupWithContent.aspx.cs" Inherits="TestModalPopupWithContent" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
function showNotes(noteString, e, rowId, lnkNotes)
{
var finalString = "<strong>NOTES: </strong><span onmouseout=\"HideNotes()\" onmouseover=\"this.style.cursor='pointer';\" style=\"color: blue;padding-left: 100px\"></span><br /><br />"
finalString += noteString
document.getElementById("divNote").innerHTML = finalString;
document.getElementById("divNote").style.visibility = "visible";
document.getElementById("divNote").style.top = findPosY(lnkNotes) + "px";
document.getElementById("divNote").style.left = findPosX(lnkNotes) + "px";
}
function HideNotes(){
document.getElementById("divNote").innerHTML = "";
document.getElementById("divNote").style.visibility = "hidden";
}
</script>
<form id="form1" runat="server">
<asp:GridView ID="grdCorrespondenceAttachment" runat="server" AutoGenerateColumns="False" CssClass="grid"
HeaderStyle-CssClass="gridtitle" AlternatingRowStyle-CssClass="grid_odd" RowStyle-CssClass="grid_even"
CellPadding="1" width="100%" onrowdatabound="grdCorrespondenceAttachment_RowDataBound" EnableViewState="false">
<Columns>
<asp:TemplateField headertext="Select">
<ItemTemplate >
<asp:HyperLink ID="lnkNotes" runat="server" Text="Notes" ForeColor="Blue" onmouseout="HideNotes()"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divNote" style="background-color: #cccccc; width: 200px; position: absolute; border: solid 1px black; visibility:hidden;">
</div>
</form>
</body>
</html>
lnkNotes.Attributes.Add("onmouseover", string.Format("showNotes(\"{0}\",\"{1}\",\"{2}\", event)", objDescription.ToString(), e.Row.RowIndex, lnkNotes.ClientID));
Thanks
I have a hyperlink and I want to mouse over it to show some information in a div. The problem is that the div moves as you mouseover on the hyperlinks in the different rows in IE 7 and Safari but it does not work in Firefox.
Please see the markup and code-behind code below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestModalPopupWithContent.aspx.cs" Inherits="TestModalPopupWithContent" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
function showNotes(noteString, e, rowId, lnkNotes)
{
var finalString = "<strong>NOTES: </strong><span onmouseout=\"HideNotes()\" onmouseover=\"this.style.cursor='pointer';\" style=\"color: blue;padding-left: 100px\"></span><br /><br />"
finalString += noteString
document.getElementById("divNote").innerHTML = finalString;
document.getElementById("divNote").style.visibility = "visible";
document.getElementById("divNote").style.top = findPosY(lnkNotes) + "px";
document.getElementById("divNote").style.left = findPosX(lnkNotes) + "px";
}
function HideNotes(){
document.getElementById("divNote").innerHTML = "";
document.getElementById("divNote").style.visibility = "hidden";
}
</script>
<form id="form1" runat="server">
<asp:GridView ID="grdCorrespondenceAttachment" runat="server" AutoGenerateColumns="False" CssClass="grid"
HeaderStyle-CssClass="gridtitle" AlternatingRowStyle-CssClass="grid_odd" RowStyle-CssClass="grid_even"
CellPadding="1" width="100%" onrowdatabound="grdCorrespondenceAttachment_RowDataBound" EnableViewState="false">
<Columns>
<asp:TemplateField headertext="Select">
<ItemTemplate >
<asp:HyperLink ID="lnkNotes" runat="server" Text="Notes" ForeColor="Blue" onmouseout="HideNotes()"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divNote" style="background-color: #cccccc; width: 200px; position: absolute; border: solid 1px black; visibility:hidden;">
</div>
</form>
</body>
</html>
lnkNotes.Attributes.Add("onmouseover", string.Format("showNotes(\"{0}\",\"{1}\",\"{2}\", event)", objDescription.ToString(), e.Row.RowIndex, lnkNotes.ClientID));
Thanks