locked
Get location of elements RRS feed

  • Question

  • User29605001 posted

    Hello,

    Is there any way I can get a position of a html label's coordinates in the code behind?

    For example, I click an asp:button and it prints me the coordinates of 'label1' which is an html label(not asp:label).

    Thanks.

    Thursday, May 31, 2012 4:50 AM

Answers

  • User-1461088198 posted

    Hi master2080,

    Actually the JQuery position doesn't return the relative to the element position but relative to the page position.

    Any way to get a relative position like for example the closest parent element? Does it matter if the element is dynamically generated?

    Actually, the .position() method allows us to retrieve the current position of an element relative to the offset parent. But you may need to set position as relative in the style.

    I altered the sample code which Ruchira provided. Please try to test it.

    aspx file

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
        <script type="text/javascript">
            function test() {
                var p = $("#testID");
                var position = p.position();
                document.getElementById('<%=HiddenField1.ClientID %>').value = position.top;
                document.getElementById('<%=HiddenField2.ClientID %>').value = position.left;
            } 
        </script> 
    </head> 
    <body>
        <div style="padding:24px; ">
            <div id="testID"> 
                Hello
            </div>
        </div>
        <form id="Form1" runat="server"> 
        <asp:HiddenField ID="HiddenField1" runat="server" /> 
        <asp:HiddenField ID="HiddenField2" runat="server" /> 
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> 
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="test()" OnClick="Button1_Click" /> 
        </form> 
    </body> 
    </html> 

    You will get 24 and 24 on labels.

    After inserting an input outside of the div tag

    <input id="Text1" type="text" />
    <div style="padding:24px; ">
        <div id="testID"> 
            Hello
        </div>
    </div>

    You will still get 24 and 24 on labels.

    code behind

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = HiddenField1.Value;
        Label2.Text = HiddenField2.Value;
    }

    Regards,

    Sage Gu - MSFT

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 7, 2012 2:30 AM

All replies

  • User-1516073966 posted

    Hi,

    You can use the JQuery position method to get the location of the label controls. Refer the link

    http://api.jquery.com/position/

    Thursday, May 31, 2012 5:00 AM
  • User29605001 posted

    I need either a code behind option or a way to get coordinates relative to an element.

    Thanks.

    Thursday, May 31, 2012 5:06 AM
  • User71929859 posted

    I need either a code behind option or a way to get coordinates relative to an element.

    Thanks.

    How do you suppose to access a non server element from code behind? Either you have to make t as runat="server" or you have to use jQuery/Javascripts.

    Thursday, May 31, 2012 5:28 AM
  • User29605001 posted

    I don't mind using javascript/jquery if I can get relative coordinates to an element.

    Thursday, May 31, 2012 5:31 AM
  • User71929859 posted

    Hello,

    Then you can use the position method as chandrasekar has alraedy suggested. Use asp:HiddenFields to pass the values to the server side. I'll alter the same example that link have provided.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
    
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            div
            {
                padding: 15px;
            }
            p
            {
                margin-left: 10px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            function test() {
                var p = $("#testID");
                var position = p.position();
                document.getElementById('<%=HiddenField1.ClientID %>').value = position.top;
                document.getElementById('<%=HiddenField2.ClientID %>').value = position.left;
            }
        </script>
    </head>
    <body>
        <div>
            <p id="testID">
                Hello</p>
        </div>
        <p>
        </p>
        <form runat="server">
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <asp:HiddenField ID="HiddenField2" runat="server" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="test()" OnClick="Button1_Click" />
        </form>
    </body>
    </html>
    

    Please refer the sample code I've created for you. I tested it and it works for me.

    Thursday, May 31, 2012 5:53 AM
  • User29605001 posted

    What is the position relevant to? The window or a certain element?

    Thanks.

    Thursday, May 31, 2012 6:06 AM
  • User71929859 posted

    The window or a certain element?

    Hi,

    The postition is relative to the closest ancestor element. In this case, it's the div.

    Thursday, May 31, 2012 6:11 AM
  • User29605001 posted

    Great.

    Thursday, May 31, 2012 6:33 AM
  • User29605001 posted

    Actually the JQuery position doesn't return the relative to the element position but relative to the page position.

    Any way to get a relative position like for example the closest parent element? Does it matter if the element is dynamically generated?

    Thanks.

    Thursday, May 31, 2012 10:28 AM
  • User-1461088198 posted

    Hi master2080,

    Actually the JQuery position doesn't return the relative to the element position but relative to the page position.

    Any way to get a relative position like for example the closest parent element? Does it matter if the element is dynamically generated?

    Actually, the .position() method allows us to retrieve the current position of an element relative to the offset parent. But you may need to set position as relative in the style.

    I altered the sample code which Ruchira provided. Please try to test it.

    aspx file

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
        <script type="text/javascript">
            function test() {
                var p = $("#testID");
                var position = p.position();
                document.getElementById('<%=HiddenField1.ClientID %>').value = position.top;
                document.getElementById('<%=HiddenField2.ClientID %>').value = position.left;
            } 
        </script> 
    </head> 
    <body>
        <div style="padding:24px; ">
            <div id="testID"> 
                Hello
            </div>
        </div>
        <form id="Form1" runat="server"> 
        <asp:HiddenField ID="HiddenField1" runat="server" /> 
        <asp:HiddenField ID="HiddenField2" runat="server" /> 
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> 
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="test()" OnClick="Button1_Click" /> 
        </form> 
    </body> 
    </html> 

    You will get 24 and 24 on labels.

    After inserting an input outside of the div tag

    <input id="Text1" type="text" />
    <div style="padding:24px; ">
        <div id="testID"> 
            Hello
        </div>
    </div>

    You will still get 24 and 24 on labels.

    code behind

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = HiddenField1.Value;
        Label2.Text = HiddenField2.Value;
    }

    Regards,

    Sage Gu - MSFT

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 7, 2012 2:30 AM