Can't calculate the width of a hidden div

Question

SOLVED BY VEGA BELOW. HERE IS THE WORKING FIDDLE. I'm keeping the whole post in for future visitors to see how this issue was resolved.

---

I'm trying to create a button that, when hovered, reveals some information on a drawer underneath.

I wanted to make it easy to implement into a page, so I turned it into a jQuery widget. I'd like to have it adjust according to the content on the button and/or on the drawer, but it's not doing that right now. The user should be able to put the single HTML div tag with the hidden data, and it'll just work.

Ideally the button/drawer widths would adjust to the max between the two so that the drawer is completely hidden when it is in the closed state. I just don't want my users to have to mess with setting a fixed width.

I need help!

Here's what it'll look like:

Relevant HTML (full HTML in Fiddle):

<div class="download" data-value="It's awesome!">Visit Website</div>

Relevant CSS (full CSS in Fiddle):

.button {
    position:absolute;
    padding:10px;
}

.drawer {
    box-sizing:border-box;
    z-index:-1;
    position:absolute;
    top:3px;
    left:3px;
    padding:6px 10px;
    text-align:center;
    -webkit-transition:0.3s left ease-in;

}

Relevant jQuery (full jQuery in Fiddle):

$(function() {
    $(".button").each(function() {
        $(this).append("<div class='drawer'>" +  $(this).data('value') + "<div class='handle'>||</div></div>");
        $(".drawer", this).css("width", $(".button").width());
    });

    $(".button").mouseenter(function() {
        $(".drawer", this).css("left", $(".button").outerWidth());
    }).mouseleave(function() {
        $(".drawer", this).css("left", "3px");
    });
});

Answer 1

You got to calculate the width based on this button. See below,

$(function() {
    $(".button").each(function() {
        $(this).append("<div class='drawer'>" +  $(this).data('value') + "<div class='handle'>||</div></div>");
        $(".drawer", this).width($(this).width()); //updated with this object
    });

    $(".button").mouseenter(function() {
        $(".drawer", this).css("left", $(this).outerWidth()); //updated with this object
    }).mouseleave(function() {
        $(".drawer", this).css("left", "3px");
    });
});

DEMO: http://jsfiddle.net/dELNa/11/

Answer 2

$(".download").mouseenter(function() {
    totalWidth = 0;
    totalWidth  += $(this).outerWidth(true);
    $(".drawer", this).css("left", totalWidth);
}).mouseleave(function() {
    $(".drawer", this).css("left", "3px");
});

And that will get the final size of the object plus the value of the delicious contents inside.