Question

I have a site that displays multiple items extracted through PHP from a MySQL table.

Then I have a filter by color (checkboxes show the different colors and by clicking on them the following jquery hides/shows the selected colors):

jQuery(document).ready(function($) {

    $(":checkbox").bind("click", function (event) {
        if($(this).is(':checked')) {
            $(".itemBox:not(#" + $(this).val()  + ")").hide();
            $(".itemBox[id='" + $(this).val() + "']").show();
        }
        else {
        $(".itemBox").show();
        }
});
});

My problem is the following. Items are displayed as follows, 2 by 2, so when the jquery Hides/Shows, it just leaves the items in their place, they don’t get reorganized. So I see blank spaces where items were shown before and are now hidden…

Do you have any suggestion to fix this or force the PHP to refresh? I am trying to avoid refreshing the whole page…

while ($info = mysql_fetch_array($items))
{
if ($row_count % 2 == 0) 
{
echo "<tr>";
}
echo "<td><div name='item' id='".$info[color_base1]."' class='itemBox'><div class='showItem'><a href='items_descr.php?itemId=".$info[id_item]."'><img class='itemImage' alt='' src='images/$info[imageMid].jpg'></img></div><br />";
echo "<div class='indexItemText'><font class='similarItemsText'><a href='items_descr.php?itemId=".$info[id_item]."'>".$info[name]."</a><font class='price'> - $".$info[price]."</div></td></div>";
$row_count++;

Answer 1

If you just put all of these elements into a container div and a single item div with float left in the CSS for each item, you can write some CSS that will give it the same look, but when you take elements out with the hide method, the gaps will be removed.