displaying status/message

Question

i able to show a status message and works without any issue but there is one usability issue.

once it shows the message the div disappears but it still holds the space, how can i remove that space or move up the my label/textbox up?

   <div id="status"></div>   

    <asp:Label runat="server" ID='Label1' >Name:</asp:Label>
    <asp:TextBox ID="txtName" runat='server'></asp:TextBox>
    ......
    ......

script:

$("#status").fadeTo(500, 1, function() { $(this).html("You are now registered!").fadeTo(7000, 0); })

Answer 1

$("#status").hide()

Would set the display attribute to 'none' and should collapse the div like you want.

Answer 2

You can use the .hide() function or change the DIV width and height to 0 using .css()

Answer 3

Add another callback after the fadeout to hide the div.

$("#status").fadeTo(500, 1, function() { $(this).html("You are now registered!").fadeTo(7000, 0, function() { $(this).hide() } ); })

(New code is the last callback, function() { $(this).hide() } at the end