Appending content depending on content height

Question

So I know I am going about this the wrong way, but I am stuck so I figured you guys could help me out. So the idea is that I have two containers. One is only for content that is less that a certain height, and one is for content that is greater than a certain height. So here is the basic sketch of a code that wont work to give you a basic idea:

$('#content').each(function(){
if($(this).height()>120){
    $('#container2').append('the content');
};
else{
    $('#container').append('the content');
};
});

Here is a jsfiddle that shows what the outcome of this should look like: http://jsfiddle.net/3TxR9/1/

edit 1: the id content is wrapping a large amount of content that is all difference, which is why I want to have different containers for different heights. So 'the content' would be a specific content inside the id content this way each piece of content is evaluated so it goes to the correct container. And the jsfiddle I linked IS NOT the correct coding, it is just to show what should happen when the correct jquery is applied

`$('#content').each(function(){` doesn't make sense unless you have more than one element with id `content` which is strictly forbidden. — Denys Séguret, Mar 22 '13 at 19:07
why do u have semi colons separating your if / else statement? that'll break anything. and one look at your jsFiddle shows multiple instances of `id="content"` ... you want `class="content"`, as `id` is a unique attribute — PlantTheIdea, Mar 22 '13 at 19:07
What's supposed to be `the content` that you add for each element `#content` ? — Denys Séguret, Mar 22 '13 at 19:10
oh, that was an accident in me typing with the semicolons, but as far as the #content issue...I have content that is wrapped in the id content, the js fiddle is just to show an example for that. I wasn't too sure with the each event anyways...what would you suggest instead then? — Ryan Saxe, Mar 22 '13 at 19:12
the each is right, the fact that you're reusing ID's is the issue. ID's are supposed to be a unique non-repeating element, classes are for elements that repeat and share the same styling. What you're doing should work fine, just swap width (why are you looking at width if it's the height that matters) for height and get rid of the semi colons. then wrap that whole bit inside a document.ready function so it does it's thing at page load. — Rick Calder, Mar 22 '13 at 19:17

score 0 · Answer 1 · answered Mar 22 '13 at 19:14

0

I think you are just making things a bit harder on yourself than you need to, as .height() in jQuery will give you the computed height of any element you want.

Then as you are working through your items you can use .height() on the element to be sorted, and if greater than a certain height append it to one box, and if not then append it to the other.

answered Mar 22 '13 at 19:14

BrianH

2,140
14
20

I typed width, but I meant to type height. So why would it not be working for me if I have generally what I have above if that's the only thing that would need to be changed since it was just a typo? – Ryan Saxe Mar 22 '13 at 19:18
Well, try it with just one thing to start with - kill the each() function and just run the if on one single box. Also, try printing/logging the result of the height() function, as if the item in question is not loaded or not visible it may not report the height you think it should. If it reports 0 height and you think it shouldn't, it will do that if not loaded, and the solution to that is here: http://stackoverflow.com/questions/3761061/get-height-of-image-inside-a-hidden-div – BrianH Mar 22 '13 at 19:21
Hey so everything works fine with that, but the issue that you said might happen came up and the solution provided did not end up working – Ryan Saxe Mar 23 '13 at 01:45
Perhaps try the window.load() method to make sure all images are loaded before checking on things: http://stackoverflow.com/questions/4857896/jquery-callback-after-all-images-in-dom-are-loaded If that doesn't work you may want to update your question and preferably have an additional jsfiddle with the code that is going awry. – BrianH Mar 23 '13 at 02:59
Window.load didn't work either...if it helps I am using the masonry plug in though – Ryan Saxe Mar 23 '13 at 03:46

score 0 · Answer 2 · answered Mar 22 '13 at 19:27

$(document).ready(function(){
    $(".content").each(function(){
        if($(this).height() > 100)
        {
            $(this).appendTo("#container");
            $(this).show();
        } else {
            $(this).appendTo("#container2");
            $(this).show();
        }
    });
});

Demo: http://jsfiddle.net/calder12/3TxR9/4/

Appending content depending on content height

2 Answers2