Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Isotope Possible Chrome Bug?

I'm using jQuery Isotope to fill in the spaces on a multi-width multi-height grid (equal proportions).

The grid is sorted using ui-sortable with a button to toggle back to Isotope after sorting. There are some sort orders that leave empty blocks. How can I use Isotope to fill in the spaces?

I've experimented with multiple Isotope layout methods.

See http://jsfiddle.net/zdSYG/41/

$(document).ready(function() {

var $itemList = $('#sortable');

    $itemList.isotope({
    resizesContainer: false,
    masonry: {
        rowHeight: 250,
        columnWidth: 325
    }
});

$('#wp-admin-bar-edit').click(function() {
    $itemList.isotope('destroy');

    $itemList.sortable({

        //Do Ajax Stuff with UI-Sort Order
    });

});
});
//Toggle back to Isotope after jQuery UI-Sortable Ajax stuff
$(document).ready(function() {
$('#wp-admin-bar-sort').click(function() {
    $('#sortable').isotope({
        resizesContainer: false,
        masonry: {
            rowHeight: 250,
            columnWidth: 325

        }
    });
});
});

Udate:

The desired affect is achieved in Firefox 4, and IE 8 & 9 but the issue seems to be with Google Chrome (Latest version stable channel).

Chrome:

enter image description here

Firefox 4:

enter image description here

like image 460
Chris_O Avatar asked Jun 03 '11 22:06

Chris_O


1 Answers

i found it was when i was using an earlier version of jquery, 1.4.1 in my case. I moved to 1.7.1 and it's all working fine now.

like image 102
Daniel Avatar answered Nov 22 '22 13:11

Daniel