SUPPORT THE SITE WITH A CLICK

Subscribe Rss:

SUPPORT THE SITE WITH A CLICK

Wednesday, September 30, 2009

Equal height columns with prototype


As i am beginner to learn jquery, i surfed in web and got newbie's Equal height columns with jquery.Its seems to be simple and cool.Then i started doing this technique using prototype.I have checked in firebox browsers, it seems to be working fine.

Thanks to the author Rob Glazebrook from Newbie
Server side script from Newbie(Jquery)
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script>
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
</script>

Server side script from me(Prototype)
<script language="javascript" type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script language='javascript'>
function equalHeight(group) {
tallest = 0;
group.each(function(c) {
thisHeight = c.offsetHeight;
if(thisHeight > tallest) {
tallest = thisHeight;
}

});
group.invoke("setStyle", {height: tallest + 'px'})
}
Event.observe(window, 'load', function()
{
equalHeight($$(".column"));
});
</script>

For Live action click, here

If you wish to get the code, click here


Suggested reading


Equal height columns - Jquery