multiple - Calcular el ancho total de los niños con jQuery
jquery css multiple (2)
He intentado encontrar una respuesta comprensible a esto, pero me he rendido.
Para tener contenido dinámico (como publicaciones de blog e imágenes) en un sitio web horizontal (como en thehorizontalway.com ), debe establecer un ancho fijo para el CUERPO en píxeles, ¿verdad? Debido a que utiliza elementos flotantes en su interior, de lo contrario se rompería y envolvería la página, dependiendo del ancho del navegador.
¡EDITAR! Este valor específico se puede calcular con jQuery , gracias por eso :) En este ejemplo, se agrega un valor adicional al tamaño total, que se puede usar para el contenido antes de los elementos flotantes. Ahora el cuerpo obtiene un ancho dinámico!
Mi idea inicial era que jQuery nos calculara esto: (''CADA ANCHO DE LAS POSTES'' * ''NÚMERO DE POSTALES'') + 250 (para el contenido adicional)
Código HTML
<body style="width: ;"> <!-- Here we want a DYNAMIC value -->
<div id="container">
<div id="menu"></div> <!-- Example of extra content before the floats -->
<div class="post">Lorem</div>
<div class="post">Lorem</div>
<div class="post">Lorem</div> <!-- Floated elements that we want the sizes of -->
<div class="post">Lorem</div>
</div>
...
<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be ( 300+300+300+500 ) + 250 [#menu] = 1650px -->
El resultado y la respuesta de Alconja.
$(document).ready(function() {
var width = 0;
$(''.post'').each(function() {
width += $(this).outerWidth( true );
});
$(''body'').css(''width'', width + 250);
});
¡Muchas gracias!
Parece que lo tienes bastante bien ... aunque un par de notas:
-
.outerWidth(true)incluye el relleno y el margen (ya que está pasandotrue), por lo que no es necesario intentarlo y agregarlo nuevamente. -
.outerWidth(...)solo devuelve el ancho del primer elemento, por lo que si cada elemento tiene un tamaño diferente, multiplicarlo por el número de publicaciones no será un valor preciso del ancho total.
Teniendo esto en cuenta, algo como esto debería darte lo que estás buscando (manteniendo tus 250 rellenos iniciales, que supongo que son para menús y cosas):
var width = 0;
$(''.post'').each(function() {
width += $(this).outerWidth( true );
});
$(''body'').css(''width'', width + 250);
¿Eso ayuda, o hay algún otro problema específico que está teniendo (no estaba muy claro en su pregunta)?
Puede calcular el ancho con esta sola línea, aunque un poco más de lo que me hubiera gustado.
var width = $(''.post'').map(function(undefined, elem) {
return $(elem).outerWidth(true);
}).toArray().reduce(function(prev, curr) {
return prev + curr;
}, 0);