Test case for jQuery Ticket 7744

offset doesn't work on hidden elements

by jitter

HTML

<div id="ContactPanel" class="ContactPanel">            
    <div id="ContactTitle" class="ContactTitle" >
        <div class="close">Close</div>
        <span class="text">Contact</span>
    </div>
    <div id="ContactDiv" class="ContactDiv"></div>        
</div>
<div style="width:100%; height:350px;"></div>
<div style="width:100%; height:30px;">
    <div id="ContactBtn" style="border:solid 1px #82AFB4; float:right;">ShowContact</div>
</div>

CSS

.ContactPanel {
    position:absolute; 
    height:350px;
    width:250px;
    border:solid 1px #82AFB4;
    display:none;
    top:0px;
    left:0px;
}
.ContactTitle {
    width:250px;
    height:20px;
    background-color:#D2EDEF;
}
.ContactDiv {
    width:250px;
    height:330px;
    background-color:white;
    overflow-y:auto;
    overflow-x:auto;
    padding-left:0px;
}

.ContactTitle > .text {
    margin-left:5px;
}
.ContactTitle > .close {
    float:right;
}

JavaScript

$("div.close").bind("click", function() {
    $('#ContactPanel').hide();
});

$("#ContactBtn").bind("click", function(evt) {
    var offset = $(this).offset();

    $("#ContactPanel").css({
        top: offset.top - 350,
        left: offset.left - 250
    }).show();
});