footer jumps only on first filtering action quicksand portfolio

Question

I implemented a quicksand portfolio in a website (that I unfortunately work on in xampp so I can't show you an example) and my sitefooter does a big jump into the content area ONLY on the first filtering action.

What I've tried:

• various settings for quicksand's "adjustHeight" option
• avoiding css rules and jquery on the same selector
• defining widths and heights as good as possible
• W3C validation of my whole markup of course

This is what happens:

• load Portfolio page
• click on a filter
• full-width-footer at bottom jumps right up into the contentarea
• portfolio items rearrange and push footer back into its position
• use another filter
• smooth transitions, no footer jump

Additional info: I don't use px or em for widths but % because I needed columns and I needed the page to be responsive.

Why would the footer jump the first time using a filter only? Any ideas?

Pieces of my HTML markup:

<div id="main-content">
    <ul id="quicksand-portfolio" class="filterable-grid">  

        <li data-id="id-1234" data-type="category-1">
            <span class="portfolio-thumbnail">
                <a href="#"><img src="image.jpg"></a>   
             </span>                                

             <div class="thumbnail-overlay">
                 <div class="infotext">
                     <p>blablabla</p>
                 </div>
              </div>
        </li>

    </ul>
 </div>

CSS Rules:

ul.filterable-grid li {
    float: left;
    width: 30.68%;
    height: 180px;
    overflow: hidden;
    margin-right: 3.97%;
    margin-bottom: 3.97%;
    position: relative;
}

ul.filterable-grid li:nth-child(3n) {
    margin-right: 0;
}

ul.filterable-grid li:nth-child(3n+1) {
    clear: left;
}

ul.filterable-grid li p {
    display:block;
}

.portfolio-thumbnail {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.portfolio-thumbnail img {
    max-width: 100%;
    height: auto;
}

And the quicksand part:

// Quicksand Portfolio
function portfolio_quicksand() {
    var $filter;
    var $container;
    var $containerClone;
    var $filterLink;
    var $filteredItems

    $filter = $('.filter li.active a').attr('class');
    $filterLink = $('.filter li a');
    $container = $('ul#quicksand-portfolio');
    $containerClone = $container.clone();

            // Show Thumbnail Overlay on mouseover, hide on mouseout
    $('#main-content').on('mouseover', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('fast');
    });

    $('#main-content').on('mouseout', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('fast');    
    });

            // Filter Links
    $filterLink.click(function(e) 
    {
        $('.filter li').removeClass('active');
        $filter = $(this).attr('class').split(' ');
        $(this).parent().addClass('active');

        if ($filter == 'all') {
            $filteredItems = $containerClone.find('li'); 
        }
        else {
            $filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); 
        }

                    // Quicksand Transitions
        $container.quicksand($filteredItems, 
        {
            duration: 750,
            easing: 'easeInOutQuad',
            adjustHeight: 'auto',
        });
    });
}

if(jQuery().quicksand) {
    portfolio_quicksand();  
}

Answer 1

you can try adjustHeight: 'false'. it is working fine.