How to get the Top value of a div in jQuery

Question

This is a silly problem but a problem none the less. I'm simply looking to get the "Top" value of a panel after it has appeared on the screen. So when I go to a page as the panel renders in its position I want to get its top value. Here is the code I'm using:

//signinput is the panel whose top value I want    
$("#signinput").bind('afterShow', function() 
    {
        TopVal = $("#signinput").position().top;
        alert(TopVal);
        TopVal = TopVal+"px";
    }); 

But some how this doesn't even alert anything. So for some reason this function I'm binding isn't event running for some reason. Any suggestions?

Here is my HTML code:

<div id="signinput">
              <div class="panel">
                <center>
                    <h3>Sign Into Blah Blah</h3>

                        <form name="SignIn" action="#" method="post">
                            <input type="text" name="signinemail" id="signinemail" placeholder="Enter Email">
                            <input type="password" name="signinpassword" id="signinpassword" placeholder="Enter Password">
                            <input type="submit" id ="signinsubmit" name="signinsubmit" value="Sign In" data-theme="a">
                        </form>
                </center>
              </div>
            </div>

Answer 1

This function returns the top value if you are not passing a value:

var TopVal = $("signinput").scrollTop();

Edit: By the way you said "after appearing on screen", can it be that you are missing to use jquery.live to search for the element in an updated document? Otherwise your JQuery selector $("singinput") would be NULL:

Use:

$("#signinput").live("afterShow", function() 

////Some additional info:

And when you pass a numeric parameter to the function "scrollTop" instead you can modify it and force the browser to scroll this container.

See:

http://api.jquery.com/scrolltop/

Answer 2

well, if afterShow is you coustom event then you need to trigger it in document.ready function

try this

  $(function (){
    $("#signinput").bind('afterShow', function() 
    {
       TopVal = $("#signinput").position().top;
       alert(TopVal);
       TopVal = TopVal+"px";
    });
     $('#signinput').trigger('afterShow'); 
 });

i am not sure , why are you using that custom event of yours. calling top inside document.ready should work (assuming you just have an alert inside the afterShow event).

  $(function (){

     TopVal = $("#signinput").position().top;
       alert(TopVal);
       TopVal = TopVal+"px"; 
 });

Answer 3

There is no afterShow event, and a div has no load event as it's rendered immediately, so the only thing you might need is a DOM ready handler :

$(function() {
    TopVal = $("#signinput").position().top;
    alert(TopVal);
    TopVal = TopVal+"px";
}); 

Answer 4

I don't know which event will "afterShow" touch off, but after trying, I found I couldn't trap into this trigger when the element with this trigger showed.

I think adeneo's answer may be the solution of your question.