Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some items float out of div when selecting the "All' | Bug #118

Open
Archie22is opened this issue Jan 30, 2014 · 1 comment
Open

Some items float out of div when selecting the "All' | Bug #118

Archie22is opened this issue Jan 30, 2014 · 1 comment

Comments

@Archie22is
Copy link

I have discovered a bug. Some items float out of the container div only when selecting the "All" option.

Here is how the items look (list elements):
error
this one is working - out of the all filter:
wording

I have checked the CSS and tried using or enforcing the left:
left: 0px !important;
and that only broke other list in the

    Here is the HTML code of the broken list items:

  • I do not understand where it gets the auto generated: left: 666.6px

@Archie22is
Copy link
Author

Here is the jQuery I am using to call the Quicksand.js:

function portfolio_quicksand() {
// Setting Up Our Variables
var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems

    $filter = jQuery('.filter li.active a').attr('class');  // Set Our Filter
    $filterLink = jQuery('.filter li a');   // Set Our Filter Link
    $container = jQuery('ul.filterable-grid');  // Set Our Container
    $containerClone = $container.clone();   // Clone Our Container

    // Apply our Quicksand to work on a click function
    // for each for the filter li link elements
    $filterLink.click(function(e) {
        e.preventDefault();     //prevent stuff
        jQuery('.filter li').removeClass('active');     // Remove the active class
        $filter = jQuery(this).attr('class').split(' '); // Split each of the filter elements and override our filter
        jQuery(this).parent().addClass('active');   // Apply the 'active' class to the clicked link

        // If 'all' is selected, display all elements
        // else output all items referenced to the data-type
        if ($filter == 'all') {
            $filteredItems = $containerClone.find('li'); 
        }
        else {
            $filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); 
        }

        // Finally call the Quicksand function
        $container.quicksand($filteredItems, 
        {
            // The Duration for animation
            duration: 750,
            // the easing effect when animation
            easing: 'easeInOutCirc',
            //easing: 'jswing',
            // height adjustment becomes dynamic
            adjustHeight: 'dynamic' 
        });

        //Initalize our PrettyPhoto Script When Filtered
        $container.quicksand($filteredItems, 
            function () { lightbox(); }
        );          
    });
}

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant