Align Div Bottoms using jQuery

Categories: jQuery

jQuery is so awesome! Trust me, I have been developing InfoCaptor using Java and if there was something similar like jQuery for Java, it would have been truly great.

Can you imagine the amount of code that would have gone in writing a simple thing like aligning bottoms of multiple frames on the same page.

Using jQuery it is just few lines as below

//find the max bottom
var maxY = 0;
$(“.ui-selected”)
.each(
function()
{
maxY = Math.max(maxY, $(this).position().top + $(this).height());
}
);

//loop through each selected and now find the new top based on the maxY and apply it to each
$(“.ui-selected”)
.each(
function()
{
var h=$(this).height();
var newTop = maxY-h;
if (newTop>=0) $(this).css({top:newTop});
}
);

 

I am using two loops, first is to get the bottom Y position and then the second loop to apply the bottom y to each Div. There is a way in jQuery using command chaining but I just kept them two separate for easy reading.

« « How to use css Z-index for Bring-to-front, bring-forward, bring-back, bring-backward                        Open Source at Google : Interview with Executive Director of the Linux Foundation » »

Comments are closed.