Calculer la largeur totale des enfants avec jQuery

J'ai essayé de trouver une réponse compréhensible à cela, mais j'ai abandonné.Calculer la largeur totale des enfants avec jQuery

Afin d'avoir dymnamic contenu (comme les messages blog et images) dans un site horizontal (comme sur thehorizontalway.com), vous devez définir une largeur fixe pour le corps en pixles, non? Parce que vous utilisez des éléments flottants à l'intérieur de celui-ci qui autrement casseraient et envelopperaient la page, selon la largeur des navigateurs.

EDIT! Cette valeur spécifique peut être calculé avec jQuery, merci pour cela :) Dans cet exemple, une valeur supplémentaire est ajoutée à la taille totale, qui peut être utilisée pour le contenu avant les éléments flottants. Maintenant, le corps obtient une largeur dynamique!

Ma première pensée était d'avoir jQuery calculer cela pour nous: (chaque POTEAUX WIDTH '* 'NOMBRE DE POSTES') + 250 (pour le contenu supplémentaire)

code 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 -->

Le résultat et la réponse de Alconja

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

Merci beaucoup!

Source

2009-06-18 elundmark

On dirait que vous l'avez à peu près juste ... quelques notes si:

.outerWidth(true) inclut la marge de rembourrage & (puisque vous passez true), donc il n'y a pas besoin d'essayer & ajouter cela à nouveau.
.outerWidth(...) ne renvoie que la largeur du premier élément, donc si chaque élément a une taille différente, multiplier cela par le nombre de messages ne sera pas une valeur précise de la largeur totale.

Avec cela à l'esprit quelque chose comme cela devrait vous donner ce que vous êtes après (garder votre 250 remplissage initial, que je suppose est pour les menus & choses?):

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

Est-ce que l'aide, ou y at-il un autre problème spécifique que vous rencontrez (n'était pas tout à fait clair de votre question)?

Source

2009-06-18 23:50:30 Alconja

Impressionnant, c'était exactement ce que je voulais dire. Je modifierai la question plus tard pour que je comprenne mieux de quoi je parlais. Comme vous l'avez dit, le code que j'avais pris le premier .post et calculé le reste en les multipliant avec .size() - cela rend tellement plus facile de faire une page de défilement horizontal, rendant la largeur du corps dynamique par page :) a besoin de quelques super-corps de noscript ajouté et c'est fait. – elundmark

+1 Merci, cela m'a fait gagner du temps. – 472084

D: QUOI !! CECI EXISTE!?!?! J'ai recréé outerWidth() pendant des mois !!! –

Vous pouvez calculer la largeur avec ce one-liner, bien qu'un peu plus long que je l'aurais aimé.

var width = $('.post').map(function(undefined, elem) { 
    return $(elem).outerWidth(true); 
}).toArray().reduce(function(prev, curr) { 
    return prev + curr; 
}, 0);

Source

2016-06-17 00:02:58 smac89

Calculer la largeur totale des enfants avec jQuery

Répondre

Questions connexes