Question

I have a wordpress site that has a custom sidebar so that we run promotional ads in. The same layout is executed on 10 different pages. to the left of the sidebar is a ‘main content’ area.

The sidebar area pulls from a separate sidebar.php file which has an unordered list of elements (apx. 25) which consist of an image and text each. Onload a shuffle.js function runs in order to show different promos each time.

Here is the script I currently have.

<script type='text/javascript'>//<![CDATA[ 
$(function(){
var li = $('ul li');
var len =li.length;
while($('#shuffleunorderedlist li:visible').length > 28) {
li.eq(parseInt(len * Math.random(), 10)).hide();
}
);//]]>  
</script>

<!--JS shuffle scripts I added at launch-->
<script language="javascript" type="text/javascript"       src="http://orlandovisitornetwork.com/wp-content/themes/Paradise/js/jquery.shuffle.js">       </script>
<script type="text/javascript">jQuery(function($){window.onload = function(){
$('#shufflemultidivcontainer, #shuffleunorderedlist, #shufflemultidivcontainerhotels').shuffle();
};
});
</script>
<!--END shuffle JS Scripts-->​

The problem is the client wants each of the pages columns to be even, pull from the same pool of promo’s and randomly display them. Unfortunately all of the li’s vary in height.

Currently, I have to go in to the code of each page when I add or remove a promo and hide the li’s that would cause the ‘main content’ and ‘sidebar’ to not be of an even height. Of course this doesn’t get them even but very close to it.

To automate this some I am trying to figure out a way to shuffle the promo list, look at the height of ‘main content’ and show as many of the promos from the shuffle so that the ‘sidebar’ is equal to or slightly less than ‘main content’. I have an idea of how to do it but main content not always being the same height and the li’s being different heights is throwing me off.

I looked for WP plugins and something in jQuery that may help me but didn’t find anything.

I hope I made this clear. Appreciate any suggestions and answers. Thanks

You can see the jsfiddle of what I have so far here…. http://jsfiddle.net/2cPMm/

Answer 1

Here’s the code that actually got this working for me. (Of course I got here with the help of everyone on stack.

jQuery(function($)
{
    // Shuffle 
$('ul').shuffle();

// Watch Columns 
var mainHeight = $('#main').outerHeight();
var sidebarHeight = $('#sidebar').outerHeight();

// Compare and hide li 
if (mainHeight < sidebarHeight) { // You are hiding things from the sidebar correct?      Strictly speaking, this check isn't necessary, but it prevents us from looping when we don't   need to. 
 $('div#sidebar li').each(function() {  // I removed reverse as it gave me a reference  error. If it is defined for you, feel free to use it. 
    if (sidebarHeight > mainHeight) {  
        $(this).hide();  // hide only the current element
        sidebarHeight = $("#sidebar").outerHeight(); // update sidebarHeight 
    }
});
}
  });