Relocating html elements with jquery
- by Steven
Could someone help me with this code? I'm trying to rearrange figures in a certain div into two columns (a and b) in such a way the two columns are about the same height. I've got insane trying to find the problem in my code and not finding it. It doesn't work for a reason...
<body onload="rearrangeImages();">
<div class="images">
<figure>
<figcaption>This is the figcaption of this figure. An image is missing for this test.</figcaption>
</figure>
<figure>
<figcaption>This is the figcaption of this figure.</figcaption>
</figure>
<figure>
<figcaption>Another one.</figcaption>
</figure>
</div>
<script>
function rearrangeImages() {
$('.images').each(function() {
$(this).prepend('<div class="column_b"></div>');
$(this).prepend('<div class="column_a"></div>');
$(this).append('<div class="test_div"></div>');
$('figure', this).each(function() {
var height_a = $(this).parent().$(".column_a").height();
var height_b = $(this).parent().$(".column_b").height();
if (height_a > height_b) {
$(this).parent().$(".column_b").append(this);
} else {
$(this).parent().$(".column_a").append(this);
}
$(this).remove();
});
});
}
</script>
</body>
Next I would like to be able to make the last figure not going in any of the columns in case it would make column_b higher than column_a. (pseudocode)
if (this is last figure) {
//place last figure in test_div to measure its height;
if (height_a > height_b + height_of_last_image) {
$(this).parent().$(".column_b").append(this);
} else {
$(this).parent().append(this);
}
} else {
//do the normal stuff see higher
}
