Menu
I've tried finding an understandable answer to this, but given up.
In order to have dymnamic content (like blog posts and images) in a horizontal website (like on thehorizontalway.com) you must set a fixed width for the BODY in pixles, right? Because you use floated elements inside it that otherwise would break and wrap down the page, depending on the browsers width.
EDIT! This specific value can be calculated with jQuery, thanks for that :) In this example, an additional value is added to the total size, which can be used for content before the floated elements. Now the body gets a dynamic width!
My initial thought was to have jQuery calculate this for us: ( 'EACH POSTS WIDTH' * 'NUMBER OF POSTS' ) + 250 (for the extra content)
HTML code
<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 -->
The result and answer from Alconja
$(document).ready(function() {
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});
Thanks so much!
678
jQuery children() MethodThe children() method returns all direct children of the selected element. The DOM tree: This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find() method.
To calculate the total width, you must add the padding, border and margin together. This is the default method.
jQuery width() Method The width() method sets or returns the width of the selected elements. When this method is used to return width, it returns the width of the FIRST matched element. When this method is used to set width, it sets the width of ALL matched elements.
Answer: Use the jQuery find() Method You can use the find() method to get the children of the $(this) selector using jQuery. The jQuery code in the following example will simply select the child <img> element and apply some CSS style on it on click of the parent <div> element.
Looks like you've got it pretty much right... a couple of notes though:
.outerWidth(true) includes the padding & margin (since you're passing true), so there's no need to try & add that in again..outerWidth(...) only returns the width of the first element, so if each element is a different size, multiplying this by the number of posts won't be an accurate value of total width.With that in mind something like this should give you what you're after (keeping your 250 initial padding, which I assume is for menus & things?):
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
Does that help, or is there some other specific problem you're having (wasn't quite clear from your question)?
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
