Manipulating an element using jquery not working

Question

I have a regular div, like so:

<div id="registry_ViewPanel">
    <div id="registry_Header">Register</div>
    <div id="registry_Content">
       //Registry fields here
    </div>
</div>

with css:

#registry_ViewPanel {
    width:400px;
    height:400px;
    border:1px solid;
    background-color:#fff;
    display:none;
    position:fixed;
}

Here are some alerts I did using jquery:

alert($("#registry_ViewPanel").length);
alert($("#registry_ViewPanel").html());
alert($("#registry_ViewPanel").height());
alert($("#registry_ViewPanel").width());

Here are the results

1
//Displays everything inside of <div id="registry_ViewPanel"></div>
0
0

But when I look at <div id="registry_ViewPanel"></div> with firebug, there is nothing overriding the height or width...

Also, when I try to assign .draggable(); or do .fadeIn(); it doesn't work...

Any ideas of why this would happen? If you have any suspicions, even without enough information, please let me know and I will either provide more information or try out your idea.

Thanks,
Matt

Answer 1

The height() and width() functions gets the actual DOM object heights. Since a div with no content in it won't render at all, it yields 0. Use css() to get the CSS attributes, like karim79 mentions.

$("#thing").css("height");

Answer 2

A long shot... The only thing that comes to mind is that the entire document hasn't loaded/rendered yet, therefor the element doesn't have a width and height. Are you wrapping you jQuery code in a document ready()?

$(document).ready(function() {
   alert($("#registry_ViewPanel").length);
   alert($("#registry_ViewPanel").html());
   alert($("#registry_ViewPanel").height());
   alert($("#registry_ViewPanel").width());
});