Div over GridPanel at select
<p>I’m not really good in JavaScript and now I’m really stuck. I have an updatepanel on a form. In this updatepanel I have a grid view. When I click over the select button, I want that Panel1 be shown over the table and his corner up-left to be positioned where I clicked.</p>

<p>I've written a function in JavaScript which saves the mouse coordinates into 2 hidden fields:</p>

<pre><code>function  getMouseXY(event)
{
    var hiddenFieldX=$get('&lt;%=mouseX.ClientID%&gt;');
    var hiddenFieldY=$get('&lt;%=mouseY.ClientID%&gt;');

    if (navigator.appName=="Microsoft Internet Explorer")
    {
        hiddenFieldX.value = event.clientX + document.body.scrollLeft
        hiddenFieldY.value = event.clientY + document.body.scrollTop
    }
    else
    {
        hiddenFieldX.value=event.pageY
        hiddenFieldY.value=event.pageX
    }
}
</code></pre>

<p>After, I have to complete into the server side the TextBox1 which is in my Panel1. How can I position the Panel1 where I want? I have the function which sets the coordinates of the panel:</p>

<pre><code>function showDetails()
{
    var hiddenFieldX=$get('&lt;%=mouseX.ClientID%&gt;');
    var hiddenFieldY=$get('&lt;%=mouseY.ClientID%&gt;');

    var elem=$get("details") ;
    elem.style.left = hiddenFieldX.value+"px"
    elem.style.top = hiddenFieldY.value+"px"
}
</code></pre>

<p>but U don't know when I should call it.</p>

<pre><code>    &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
       &lt;ContentTemplate&gt;
         &lt;asp:HiddenField ID="showDetails" Value="false" runat="server" /&gt;
         &lt;asp:HiddenField ID="mouseX" Value="0" runat="server" /&gt;
         &lt;asp:HiddenField ID="mouseY" Value="0" runat="server" /&gt;


         &lt;asp:Panel ID="Panel1" runat="server" style="border-color:Blue; border-style:double; border-width:thick; width : 200px; height:200px; position:absolute ; top:100px ; left: 100px; z-index:0" Visible="false"&gt;
             &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
         &lt;/asp:Panel&gt;
         &lt;asp:SqlDataSource ID="EnvoxDataSource" runat="server" &lt;/asp:SqlDataSource&gt;
         &lt;asp:GridView ID="gvRecherche" runat="server" AllowPaging="True" PageSize="30" Caption="Résultats" AllowSorting="True" CssClass="tableSeparator"
AutoGenerateColumns="False" DataSourceID="EnvoxDataSource"  
OnSelectedIndexChanged="gvRecherche_SelectedIndexChanged"  
onclick="getMouseXY(event)" &gt;
             &lt;PagerStyle BorderStyle="None"/&gt;
             &lt;HeaderStyle CssClass="tableSeparator" HorizontalAlign="Left"  /&gt;
             &lt;AlternatingRowStyle CssClass="colorBlanc" /&gt;
             &lt;RowStyle CssClass="colorGris" /&gt;
             &lt;SelectedRowStyle BackColor="#FFCC66" Font-Bold="true" ForeColor="#659bed" /&gt;
             &lt;Columns&gt;
                 &lt;asp:CommandField InsertVisible="False" SelectImageUrl="~/App_Themes/Standard/images/selectbtn20X20.PNG" SelectText="Select" ShowCancelButton="False" ShowSelectButton="True" ButtonType="Image"   /&gt;
                &lt;asp:BoundField DataField="ContactID" HeaderText="ContactID" ReadOnly="True" SortExpression="ContactID"/&gt;
                &lt;asp:BoundField DataField="TimeInIVR" HeaderText="TimeInIVR" ReadOnly="True" SortExpression="TimeInIVR" /&gt;
                &lt;asp:BoundField DataField="TQ" HeaderText="TQ" ReadOnly="True" SortExpression="TQ"/&gt;
           &lt;/Columns&gt;
           &lt;EmptyDataTemplate&gt;
               &lt;div class="message"&gt;Aucun résultat pour ces critères&lt;/div&gt;
           &lt;/EmptyDataTemplate&gt;
           &lt;PagerSettings Mode="NumericFirstLast" Position="TopAndBottom"         LastPageText="&amp;gt;&amp;gt;" FirstPageText="&amp;lt;&amp;lt;" /&gt;
     &lt;/asp:GridView&gt; 
     &lt;br /&gt;
     &lt;asp:Button ID="btnImprime" runat="server" Text="Version Imprimable" Visible="False" CssClass="bouton" PostBackUrl="&lt;%# GetEnvoxPrintUrl() %&gt;"  target="_blanc" /&gt;            
     &amp;nbsp;&amp;nbsp;&amp;nbsp;
     &lt;script language="javascript" type="text/javascript"&gt;showDetails()&lt;/script&gt; 
 &lt;/ContentTemplate&gt;
&lt;/asp:UpdatePanel&gt;
</code></pre>

<p>Thanks </p>
