Calcular el ancho total de los niños con jQuery

He intentado encontrar una respuesta comprensible a esto, pero renunció.Calcular el ancho total de los niños con jQuery

el fin de tener dymnamic contenidos (como blogs y las imágenes en una página web) horizontal (como en thehorizontalway.com) debe establecer un ancho fijo para el cuerpo en pixles, ¿verdad? Porque usa elementos flotantes dentro de él que de otra manera se romperían y envolverían la página, dependiendo del ancho de los navegadores.

EDIT! Este valor específico puede ser calculado con jQuery, gracias por eso :) En este ejemplo, se agrega un valor adicional al tamaño total, que puede usarse para el contenido antes de los elementos flotantes. ¡Ahora el cuerpo obtiene un ancho dinámico!

Mi idea inicial era tener jQuery calcular esto para nosotros: ('CADA PUESTOS DE ANCHO' * 'número de puestos') + 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); 
});

Gracias tanto!

Fuente

2009-06-18 elundmark

Parece que lo tienes más o menos bien ... un par de notas sin embargo:

.outerWidth(true) incluye el margen de relleno & (ya que estás pasando true), así que no hay necesidad de tratar & agregar eso de nuevo.
.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.

Con esto en mente algo como esto debe darle lo que está buscando (250 mantener su acolchado inicial, que supongo que es para los menús & cosas?):

var width = 0; 
$('.post').each(function() { 
    width += $(this).outerWidth(true); 
}); 
$('body').css('width', width + 250);

ayuda eso, o ¿hay algún otro problema específico que tenga (no fue muy claro a partir de su pregunta)?

Fuente

2009-06-18 23:50:30 Alconja

Impresionante, eso fue lo que quise decir. Editaré la pregunta más tarde para que quede más claro de lo que estaba hablando. Como dijiste, el código que solo había tomado el primer .post y calculado el resto al multiplicarlos por .size() - esto hace que sea mucho más fácil hacer una página de desplazamiento horizontal, haciendo que el ancho del cuerpo sea dinámico por página :) Solo necesita un añadido de ancho de cuerpo de noscript y ya está hecho. – elundmark

+1 Gracias, me salvó el tiempo. – 472084

D: ¿QUÉ? ESTO EXISTE!?!?! ¡He estado recreando outerWidth() durante meses! –

Puede calcular el ancho con esta línea única, 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);

Fuente

2016-06-17 00:02:58 smac89

Calcular el ancho total de los niños con jQuery

Respuesta

Cuestiones relacionadas