jquery - footer jumps only on first filtering action quicksand portfolio -

jquery - footer jumps only on first filtering action quicksand portfolio -

i implemented quicksand portfolio in website (that unfortunately work on in xampp can't show example) , sitefooter big jump content area on first filtering action.

what i've tried:

various settings quicksand's "adjustheight" option avoiding css rules , jquery on same selector defining widths , heights possible w3c validation of whole markup of course

this happens:

load portfolio page click on filter full-width-footer @ bottom jumps right contentarea portfolio items rearrange , force footer position use filter smooth transitions, no footer jump

additional info: don't utilize px or em widths % because needed columns , needed page responsive.

why footer jump first time using filter only? ideas?

pieces of 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 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(); }

you can seek adjustheight: 'false'. working fine.

jquery css footer quicksand