CODEWITHSUNDEEP
javascriptphpjqueryhtmlmasonry
Wally Kolcz
Wally Kolcz

Reputation: 1664

Masonary and JQuery reloading

I am using Masonry from http://masonry.desandro.com on a project where I am trying to create a timeline effect for my users.

I wanted to auto refresh the page every so often (10 seconds for testing purposes) but ran into a problem. On the first load it calls the getStatus() function an the page loads perfectly. But after 10 seconds the data is reloaded and the masory is broken.

I think I tried every combo on when to call and recall the library but nothing seems to work. Any ideas how I can get the masonry to work with reloaded content each time. basically rebuild itself correctly when the new data (which is HTML) is delivered to the page? I know I am doing this all wrong but here is what i have in my script block.

<script>
container = document.querySelector('#timeline-list');
        msnry = new Masonry( container, {
            // options
            columnWidth: '.col-sm-6',
            itemSelector: '.col-sm-6'
        });
        function getStatus() {
            $.getJSON('/community/get_status', function(data) {
                $('div#timeline-list').html(data.content);
                    msnry = new Masonry( container, {
                        // options
                        columnWidth: '.col-sm-6',
                        itemSelector: '.col-sm-6'
                    });
            });


            setTimeout("getStatus()",10000);
        }

        jQuery(window).load(function(){
            getStatus();
            if(jQuery(window).width() <= 640 ){
            msnry.destroy();
        }

            // check on resize
            jQuery(window).resize(function(){
                if(jQuery(this).width() <= 640 )
                    msnry.destroy();
            });

        });
    </script>

The reload function returns all the col-sm-6 divs and data in HTML.

I've tried .layout and .reloadedItems and neither of them seem to work (or exist for what it's telling me. Any ideas? Thanks!

Upvotes: 0

Views: 80

Answers (1)

codegaze
codegaze

Reputation: 755

Can you be more specific with "broken"? Maybe you need to use ImagesLoaded Masonry

If my memory serves me right its a separate library nowadays Images Loaded Source

Upvotes: 1

Related Questions