Question

I’m using the jQuery quicksand plugin on my site but at the moment the footer below it, jumps up and doesn’t smoothly ease upwards along with the quicksand images when changing the filter option.

How can I go about fixing this?

Code:

<div class="filterContainer">

            <span class="filter">Designer Filter:</span>

            <ul id="filterOptions">
                <li class="active"><a href="#" class="all">All</a></li>
                <li><a href="#" class="bisque">Bisque</a></li>
                <li><a href="#" class="radart">RadArt</a></li>
                <li><a href="#" class="vogue">Vogue</a></li>
                <li><a href="#" class="zehnder">Zehnder</a></li>
            </ul>

        </div>

        <!-- Radiator Showcase Image -->
        <ul class="imageHolder">
            <li class="item" data-id="id-1" data-type="radart">
                <img src="<?php echo base_url(); ?>images/radart/city-lights.jpg" alt="Radart Tripple City Lights Radiator" />
            </li>
            <li class="item" data-id="id-2" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/seta.jpg" alt="Bisque Seta Radiator"/>
            </li>
            <li class="item" data-id="id-3" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/zehnder-bay-2.png" alt="Zehnder Bay Radiator" />
            </li>
            <li class="item" data-id="id-4" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/fassane-mirror.jpg" alt="Zehnder Fassane Mirror Radiator"/>
            </li>
            <li class="item" data-id="id-5" data-type="vogue">
                <img src="<?php echo base_url(); ?>images/vogue/1.jpg" alt="Vogue Radiator"/>
            </li>
            <li class="item" data-id="id-6" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/b2.jpg" alt="Bisque b2 Radiator" />
            </li>
            <li class="item" data-id="id-7" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/chime.jpg" alt="Bisque Chime Radiator" />
            </li>
            <li class="item" data-id="id-8" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/orbit.jpg" alt="Bisque Orbit Radiator" />
            </li>
            <li class="item" data-id="id-9" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/fassane.jpg" alt="Zehnder Fassane Radiator"/>
            </li>
            <li class="item" data-id="id-10" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/svelte.jpg" alt="Bisque Svelte Radiator"/>
            </li>
        </ul>   

    </div>

    <div class="clear"></div>

    <!-- Footer -->
    <div class="footer">

        <div class="brands">
            <img src="<?php echo base_url(); ?>images/logos/full.png" />
        </div>
     </div>

jQuery

$(document).ready(function() {
    // get the action filter option item on page load
    var $filterType = $('#filterOptions li.active a').attr('class');

    // get and assign the ourHolder element to the
    // $holder varible for use later
    var $holder = $('ul.imageHolder');

    // clone all items within the pre-assigned $holder element
    var $data = $holder.clone();

    // attempt to call Quicksand when a filter option
    // item is clicked
    $('#filterOptions li a').click(function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');
        if ($filterType == 'all') 
        {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
        }
        else 
        {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var $filteredData = $data.find('li[data-type=' + $filterType + ']');
        }

        // call quicksand and assign transition parameters
        $holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });

        $

        $('.ul.imageHolder').slideDown('slow', function() {

        });

        return false;
    });
});

Answer 1

The parameter “adjustHeight” defaults to “auto”. If you specify “adjustHeight” as ‘dynamic’, things should be smoother.

Instead of this:

 
$holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });

It would be like this:

$holder.quicksand($filteredData, {
            adjustHeight: 'dynamic', // This is the line you are looking for.
            duration: 800,
            easing: 'easeInOutQuad'
        });

best.