jQuery: real anchura div

Question

tengo dos <div>, uno anidado en el otro se define como esto:

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

El css:

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

El efecto es lo que quiero, el contenido establece horizontalmente dentro del interior, pero está oculto cuando excede, (luego lo desplazo con jQuery).

Ya que no conocen el contenido de .content (ni es previsible), lo que necesito saber la verdadera ancho de la misma (que se define por el contenido), pero ambos .width() y .innerWidth() me dan el mismo resultado que es 660 cuando se le llama primero (como el recipiente div) y 660 + x cuando la llamo después de haber desplazado mediante el establecimiento de un margen-izquierda negativa (x es el desplazamiento a la izquierda de conjunto con el margen).

Cómo obtener el ancho depende de verdad, el contenido del elemento? Gracias

Answer 1

Divs por defecto toman ancho en su padre, por lo que la anchura será siempre el ancho de la matriz.

Si usted no quiere que, utilizaría

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

o posiblemente

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

como para activar el elemento #div.content en una línea o un elemento, respectivamente, que sólo ocupa como flotar tanto espacio como necesita (es decir, no necesariamente todo el espacio que proporciona el padre). ¡Así que debería funcionar!

Answer 2

¿Usted ha intentado element.offsetWidth?

Answer 3

No estaba seguro de por qué usaste #div.* ya que eso significaría que tienes un elemento con id div. Si quiere especificar un div con cierta clase, use div.class-name. Como un div reside como un niño dentro de otro div, toma el ancho de sus padres. Configurar el flotador a la izquierda le permite expandirse fuera de este límite.

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

ejemplo Desplazamiento: http://jsfiddle.net/9E8G7/6/

Aquí está un ejemplo rápido jQuery que escribí, se puede mejorar, estoy seguro. Se desplaza hasta que llega al final del contenido.

$(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

¿Usted intentó: jQuery.outerWidth(), quiero decir $(yourelement).outerWidth()?