Activating masonry after jQuery .load()

How do i activate JS and other jquery functions, like masonry after the page is loaded.

i use:

jQuery("#filterbox").load("mypage.html"}); works fine, but eg. mansory is not activated.
jQuery('#content #boxes').masonry({ columnWidth: 122, animate: true });

but the second is not "activated".

is it correct that css, and js is not activated开发者_如何学运维 during .load, and if, how do i activate it afterward.

Thanks for any help..

/regards

Try this:

jQuery("#filterbox").load("mypage.html", function(){
   $('#content #boxes').masonry({ columnWidth: 122, animate: true });
});

By the way, you have an extra } after mypage.html.

Since jQuery.load is asynchronous, jQuery('#content #boxes').masonry will run DIRECTLY after the call to jQuery.load. You need a way to tell jQuery that you want to execute that function after the content actually has been loaded.

jQuery.load takes a callback function as the second argument. This callback will execute after your content has loaded. Try this:

jQuery("#filterbox").load("mypage.html", function() {
    jQuery('#content #boxes').masonry({ columnWidth: 122, animate: true });
});

Go ahead and read the documentation for .load().

Try this

jQuery("#filterbox").load("mypage.html",function() {
      jQuery('#content #boxes').masonry({ columnWidth: 122, animate: true });
    });

Add a ImagesLoaded script https://github.com/desandro/imagesloaded/blob/master/imagesloaded.js

Try:

jQuery("#filterbox").load("mypage.html",function() {
    jQuery('#content').imagesLoaded(function() {
        jQuery(this).masonry({ itemSelector: '.box' });
    });
});

It works for me, hope this helps you too

my example (choose gallery in navigation): http://test.crystalstudio.me/nms/