CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
Krešimir Galić
Krešimir Galić

Reputation: 311

Isotope sorting issue on IE

i am having issue with isotope sorting on IE. Everything works perfectly except sorting, they are all in one horizontal line, see the attachment below for that.

http://prntscr.com/7oadmb

So here is my code where is initialize isotope, few filtering stuff, animation for items, and also adding opacity and class to item. 

(function($) {
    window.onload = function() {

        // Animation items
        $('.work .item').each(function(i) {
            var item = $(this);
            setTimeout(function() {
                item.addClass('is-showing');

                setTimeout(function() {
                    item.removeClass('hidden is-showing');
                }, 700);

            }, 150 * (i + 1));
        });

    };

    $.fn.hideReveal = function(options) {
        options = $.extend({
            timeout: 1000,
            filter: '*',
            hiddenStyle: {
                opacity: 0.2
            },
            visibleStyle: {
                opacity: 1
            },
        }, options);

        var that = this;

        that.each(function() {
            var $items = $(this).children();
            var $visible = $items.filter(options.filter);
            var $hidden = $items.not(options.filter);
            // reveal visible
            $visible.animate(options.visibleStyle, options.timeout);
            $visible.addClass("visible-item");
            // hide hidden
            $hidden.animate(options.hiddenStyle, options.timeout);
            $hidden.removeClass("visible-item");

            if (options.filter == '*') {
                jQuery('.visible-item').removeClass('visible-item');
            }
        });


        setTimeout(function() {

            that.isotope({
                getSortData: {
                    visible: function(elem) {
                        return !$(elem).hasClass("visible-item");
                    }
                },
                sortBy: 'visible'
            })

            that.isotope("updateSortData");
            that.isotope({
                sortBy: 'visible'
            });

        }, options.timeout);


    };

    $(function() {

        var $container = $('#isotope-list');
        $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            sortAscending: true
        });
      });

        // bind filter button click
        $('#filters').on('click', 'a', function() {
            var filterValue = $(this).attr('data-filter');

            $container.hideReveal({
                filter: filterValue,
                timeout: 500
            });
        });

        // change is-checked class on buttons
        $('#filters').each(function(i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on('click', 'a', function() {
                $buttonGroup.find('.selected').removeClass('selected');
                $(this).addClass('selected');
            });
        });

    });

Upvotes: 4

Views: 104

Answers (1)

Matej Đaković
Matej Đaković

Reputation: 880

You need http://imagesloaded.desandro.com/ from same author,

Good luck! :)

Upvotes: 5

Related Questions