Isotope rendering before window load

I’ve been having issues trying to get Isotope to render properly.

I’ve tried a few different ways to get it to work, including using the imagesLoad function, to no avail.

Read More

You can view the page here: http://wpsanjose.com/#latest-posts

If you select “ALL”, you’ll see the proper margins appear which is what I’m after when it first pops up.

This is the code I’m using:

(function($) {

$(window).load(function() {

    //Set the isotope area
    var $container = $('#isotope-wrap');

    //Set our items to be filtered and how to display
    $container.isotope({
        itemSelector: 'article',
        masonry: {
            columnWidth: 1
        }

    });

    var $filterSets = $('.options'),
            $filterLinks = $filterSets.find( 'a' );

    $filterLinks.click(function() {
        var $this = $(this);
        // don't do anything if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }

        var $filterSet = $this.parents('.options');
        $filterSet.find('.selected' ).removeClass('selected');
        $this.toggleClass('selected');

    })

    // filter items when filter link is clicked
    jQuery('#filters a').click(function(){
        var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector
        });

        return false;
    })

});


$(".entry").hover(
    function() {
        $(".article-outer", this).stop().animate({top: '-1000px'},{queue: false, duration: 700});
    },

    function() {
        $(".article-outer", this).stop().animate({top: '0px'},{queue: false, duration: 700});
    });

})(jQuery);

any help would be greatly appreciated!

Related posts

Leave a Reply