Dynamically find the position of a button is asp.net?

Question

i have written one javascript function to retrieve the position of a button and assigned it to asp:updateprogress but i want to apply the button's position to div element in the code or a label control within the updateprogress not to update progress.

<asp:UpdateProgress ID="UpdateProgress2"
                    runat="server"
                    AssociatedUpdatePanelID="SendMailUpdatePanel"
                    DisplayAfter="0">
    <ProgressTemplate>
        <div id="blur" style="top: 0px; left: 0px; width: 99%; height: 5000px; position: absolute;background-color: white; z-index: 999; filter: alpha(opacity=50); opacity: 0.5;-moz-opacity: 0.85; padding-top: 25%; padding-left: 30%;" />
        <div id="progress" style="text-align: center; width: 444px; border: 1px solid black;padding: 10px; background-color: #eee; z-index: 998; filter: alpha(opacity=500);-moz-opacity: 1.00;">
            <b>Mail is being Sent! Please Wait...</b>
            <br />
            <asp:Image ID="LoadImage"
                       runat="server"
                       ImageUrl="~/Images/spinner.gif" />
            <br />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

My javascript function is:

function getPosition(btnSendResume, progress)
{
  var btnSendRe = document.getElementById(btnSendResume);
  var divp = document.getElementById(progress);
  divp.style.display="block";
  divp.style.left=btnSendRe.offsetLeft;
  divp.style.top=btnSendRe.offsetTop + btnSendRe.offsetHeight - 40;
}

I have written following under button click:

btnSendResume.Attributes.Add("onclick", "getPosition('" + btnSendResume.ClientID + "','" + UpdateProgress2.FindControl(progress).ClientID + "');");

But it is giving error that progress doesn't exist under the current context.

Answer 1

Your <div id="progress" is a normal HTML element, not a server-side control.
You should just write document.getElementById("progress") .

Answer 2

You can do this by Jquery.

A simple offset() will return left and top position of a control.

function getPosition(btnSendResume, progress)
   {
     var btnSendReOffset = $('#btnSendResume').offset();
     var btnSendRe = $('#btnSendResume');
     var divp = document.getElementById(progress);
     divp.style.display="block";
     divp.style.left=btnSendReOffset.left;
     divp.style.top=btnSendReOffset.top+ btnSendRe.height() - 40;
  }

You can add a click event to your button on window load and trigger your function.