Question

I have items to display in my wordpress sidebar. Let’s say div1, div2, div3.

My client would like to repeat the sequence of items in the sidebar to fill the height of the sidebar to match the height of the main content area. So, if each div is 200px height and the content in the main div on given page is 1000px, then there should be div1, div2, div3, div1, div2.

I know how to code php and write the loop, but how to know how many loops to run?

Although I think it’s a bit silly, my client is adamant about this.

Answer 1

I wound up doing this with jQuery. It’s not a floating sidebar, it actually adds img tags as needed to whatever is there already, until no more fit.

<script type="text/javascript">
$(function() {
    var contentHeight = $('#content').height();
    var adList = [
        '<img class="ad" src="----url to first ad -----" />', 
        '<img class="ad" src="----url to second ad -----" />', 
        '<img class="ad" src="----url to third ad -----" />', 
        '<img class="ad" src="----url to fourth ad -----" />', 
        '<img class="ad" src="----url to fifth ad -----" />'
        ];
    var adHeight = 285;
    var numRequiredAds = adList.length;
    var heightDiff = contentHeight - (numRequiredAds * adHeight);
    var numAds = Math.floor(heightDiff/adHeight);
    if (heightDiff > adHeight){
        for (var i = 0; i < numAds ; i++) {
            $('#primary').append(adList[i % adList.length]);
        };
    }

});