• May 1, 2011
  • Posted by: thestateofart
  • Category: Design
No Comments

I had a problem with a website of mine (Funniest Websites) in which there are two columns with varying height. On most pages the right column is shorter than the left by a wide margin, which was a problem because the right column is where the revenue was being generated and if someone scrolled down the page, there was no revenue stream, just blank column. So I wanted to move the column with ads down the page as the user scrolled. But the div was located inside a table/td and not absolutely placed. In fact there are a lot of variables (page height, column height, and left column height) to consider. I also didn’t want the scrolling div to go above a certain height or below a certain height on the page to cover the header and footer. What I came up with was a nice jQuery code to keep the ads on the page with a nice transition effect. Let me know what you think of the code and the function on the page: http://www.ranqit.com/Ranqings/Default.aspx?currentRanqing=facebook%20status%20messages :

#list is the left column, #scrollingDiv is the right column

<head>

<script src=”/js/jquery-1.5.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var scrollTop = $(window).scrollTop();
$(window).scroll(function () {
var winHeight = $(window).height()+300; //300 is the cosmological constant
var height = $(“#scrollingDiv”).height() – winHeight;
if ($(window).scrollTop() < ($(“#list”).height()) – winHeight {
if (($(window).scrollTop() >= height)) {
$(“#scrollingDiv”).animate({ “marginTop”: ($(window).scrollTop() – height) + “px” }, “fast”);
}
else $(“#scrollingDiv”).css(“margin-top”, “0px”);
}
});
</script>

</head>