Quick jQuery question

[soap]

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

[soap]

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

[soap]

Anyyyyyyyyyybody? Need more info? I can provide this.

!!!

[TheDoc]

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

[soap]

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

[TheDoc]

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).

[Historical Forums User]

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.

[Author]

Posts