Grow your CSS skills. Land your dream job.

Quick jQuery question

  • # March 18, 2011 at 12:05 am

    I have this

    $(document).ready(function() {
    $('.article_img').load(function() {
    var aheight = $(this).parent().height();
    var imgMargin = (aheight - 225) + 'px';
    $(this).css('margin-bottom', imgMargin);
    });
    });

    Unfortunately I can’t show you the site as an example but I’ll explain the elements. Here is an image of the problem, though.

    Image

    .article_img is the one and only image inside the article and it is floated left.

    What this is (kind of) doing is once it’s loaded, it’s checking the height of the div, with the content in there, and setting the margin-bottom to be the height of the div minus 225 (the height of itself).

    It works fine on the first one, and on the second one it almost works but miscalculates by a bit.

    Could this be because it is running before all the elements inside of it have loaded?

    I even tried $(‘.article *’).load()

    The reason for this is just to make it so the text floating around it doesn’t wrap underneat it.

    I could probably just put the image inside a div and set that div’s height to the height of the .article div but I wanted to do it without extra html markup.

    Thanks

    # March 18, 2011 at 12:47 am

    Try switching your

    $(document).ready(...)

    to

    $(window).load(...)

    that way all of the images have loaded when the script is run.

    # March 18, 2011 at 1:07 am

    I’ve done that, it doesn’t work :(

    # March 18, 2011 at 1:37 pm

    Anyyyyyyyyyybody? Need more info? I can provide this.

    !!!

    # March 18, 2011 at 5:52 pm

    .article p { margin-left: /* width of image */ }

    # March 18, 2011 at 6:11 pm

    @TheDoc hmm? I don’t think you understand the prob

    # March 18, 2011 at 6:18 pm

    Instead of putting the margin on the image, you can insure that the text will never flow to the left if you put a margin-left on it that covers the image (assuming the width of the image will always be the same).

    # March 19, 2011 at 12:52 am

    I wrote a quick example of what TheDoc was talking about;

    http://jsfiddle.net/9kfGT/2/

    You definitely do not need JavaScript for this, and CSS is the better option.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".