jQuery: effettiva larghezza div

Question

ho due <div>, uno annidati dentro l'altro definito in questo modo:

<div class="wrapper"> 
    <div class="content"> 
     [..] Content [..] 
    </div> 
</div> 

Il CSS:

#div.wrapper 
{    
    width: 660px; 
    overflow: hidden; 
    float: left; 
} 
#div.content 
{ 
    white-space: nowrap; 
} 

L'effetto è quello che voglio, il contenuto stabilisce orizzontalmente all'interno ma è nascosto quando supera, (quindi lo scorrimento con jQuery).

Dal momento che non conosco il contenuto della .content (né è prevedibile), ho bisogno di conoscere la vera larghezza di esso (definito dal contenuto), ma entrambi .width() e .innerWidth() mi danno lo stesso risultato che è 660 quando chiamato prima (come il contenitore div) e 660 + x quando chiamo dopo aver scorrere impostando un negativo margine sinistro (x è lo spostamento sinistra impostato con il margine).

Come ottenere il vero, il contenuto di larghezza dipendente dell'elemento? Grazie

Answer 1

div per impostazione predefinita prendere tutta la larghezza nella loro genitori, così la larghezza sarà sempre la larghezza del genitore.

Se non si vuole che, si usa

#div.content 
{ 
    white-space: nowrap; 
    display: inline-block; 
} 

o forse

#div.content 
{ 
    white-space: nowrap; 
    float: left; 
} 

da trasformare l'elemento #div.content in un inline o elemento, rispettivamente, che richiede solo come molto spazio in quanto ha bisogno (cioè non necessariamente tutto lo spazio che fornisce il genitore). Quindi dovrebbe funzionare!

Answer 2

Hai provato element.offsetWidth?

Answer 3

Non ero sicuro del motivo per cui hai utilizzato #div.* poiché ciò significherebbe che hai un elemento con ID div. Se si intende specificare un div con una determinata classe, utilizzare div.class-name. Poiché un div si trova da bambino all'interno di un altro div, prende la larghezza del suo genitore. L'impostazione del float a sinistra consente di espandersi oltre questo limite.

div.wrapper { 
    width: 660px; 
    overflow: hidden; 
    float: left; 
} 
div.content { 
    white-space: nowrap; 
    float: left; 
} 

Scorrimento esempio: http://jsfiddle.net/9E8G7/6/

Ecco un esempio veloce jQuery che ho scritto, può essere migliorata sono sicuro. Scorre finché raggiunge la fine del contenuto.

$(document).ready(function(){ 
    var content = $('.content'); 
    var margin = 0; 
    var scrollFunc = function() { 
     margin--; 
     content.css('margin-left', margin); 
     var diff = content.width() - $('.wrapper').width(); 
     if (margin > -diff) { 
      var scroll = setTimeout(scrollFunc, 10); 
     } 
    }; 
    scrollFunc(); 
}); 

Answer 4

Hai provato: jQuery.outerWidth(), voglio dire $(yourelement).outerWidth()?