Impossibile calcolare la larghezza di un div nascosto

Question

RISOLTO DA VEGA INFERIORE. HERE IS THE WORKING FIDDLE. Sto mantenendo l'intero post per i futuri visitatori per vedere come questo problema è stato risolto.

---

Sto provando a creare un pulsante che, al passaggio del mouse, rivela alcune informazioni su un cassetto sottostante.

Volevo semplificare l'implementazione in una pagina, quindi l'ho trasformato in un widget jQuery. Mi piacerebbe che fosse regolato in base al contenuto del pulsante e/o sul cassetto, ma non lo sta facendo adesso. L'utente dovrebbe essere in grado di inserire il singolo tag div HTML con i dati nascosti e funzionerà.

Idealmente le larghezze dei pulsanti/cassetti si regolano al massimo tra i due in modo che il cassetto sia completamente nascosto quando si trova in stato chiuso. Semplicemente non voglio che i miei utenti debbano pasticciare impostando una larghezza fissa.

Ho bisogno di aiuto!

Qui è quello che sarà simile:

Rilevante HTML (HTML completo in Fiddle):

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

Rilevante CSS (CSS insufficiente 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; 

} 

Rilevante 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

Hai avuto modo di calcolare la larghezza in base a this tasto. Vedi sotto,

$(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"); 
}); 

E che sarà ottenere la dimensione finale dell'oggetto più il valore dei deliziosi contenuti all'interno.