Call jQuery when something happens

Question

So, I use jQuery Masonry, and I want to call some jQuery every time it loads messages:

function manipulate(id) { $(id).each(function(){ if($(this).height()>200){ $('#container2').append(this); } else{ $('#container').append(this); }; }); }; 

Therefore, I want to call this function every time when the next element is loaded in the Freemasonry container. Thus, he correctly manipulates the object. How to do it?

Update: Freemasonry Description

Freemasonry is a Javascript plugin that looks like CSS floats making it blend perfectly + endless scrolling. It completely hides everything that would not be on page 1, if there were no endless scrolling, and then loads them when necessary. This means that my function will not affect any of the hidden elements and should be called when Freemasonry loads the next set of elements so that they appear in the right places. This may mean that, not knowing Freemasonry, you cannot solve my problem, but you can still. And finally, Freemasonry “attaches” objects to the container of Freemasonry, and then “shows” them. Therefore, I assume that I need to do this by adding them to the correct containers after they have been added to the Masonry container, but not yet appear.

Masonry Code:

 $(window).load(function(){ var $wall = $('#container'); $wall.imagesLoaded(function(){ $wall.masonry({ itemSelector: '#entry, #entry_photo', isAnimated : false }); }); $wall.infinitescroll({ navSelector : '#page-nav', nextSelector : '#page-nav a', itemSelector : '.entry, .entry_photo', bufferPx : 2000, debug : false, errorCallback: function() { $('#infscr-loading').fadeOut('normal'); }}, function(newElements) { var $newElems = $(newElements); $newElems.hide(); $newElems.imagesLoaded(function(){ $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} ); }); }); $('.entry').show(500); }); 

I tried to put the function in Freemasonry blocks, and even as a function of $newElems , to see if it would work when loading more images, but this is not the case and actually breaks it a bit.

How can I get it to start all new elements loaded by Freemasonry through my jQuery so that they are added to the correct container?

Answer 1

Thus, using what was said in the answers, I messed up and discovered how this was done ... therefore, the 'appended' part in imagesLoaded just needs to be replaced with a function! It was a simple answer ... I just had to replace it:

 $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} ); 

with this:

 $wall.masonry(manipulate($newElems) ,{isAnimated: false}, function(){$newElems.fadeIn('slow');} ); 

The problem is solved!

Answer 2

You only declared one instance of Freemasonry for container , container2 does not have an instance of Freemasonry, so it cannot scroll endlessly. In addition, ($(this).height()>200) will always be false if the image has not yet been uploaded, by default it will be undefined -> 0 > 200 , which will always be false. Either you need to wait for the image to load before placing it, or in some way get the dimensions of the image when loading the content. You can hide it by default and put it in a container , then onto the downloaded images, check the height and transfer it to the appropriate container and show it.

Answer 3

Another idea is to associate the action with jQuery .on() ( http://api.jquery.com/on/ ). on () also associates with future elements, suggesting that they are properly attached to the DOM (for example, through .append ()). For example, you can bind .click () events to elements that have not yet been created.

Finally, you can do a neat trick and do. append() raise the event. Then attach the handler for this event to the large container where everything is added, so the function is automatically called. Here is a good example of what to do on append () , and jsfiddle http://jsfiddle.net/rzRVu/

PS. in the sidebar, I see that the function takes as input ID, but then you call .each (). The id in the html code must be unique.

Update I missed that you tried to do it properly through brickwork, what exactly? I see that you are calling .imagesLoaded () in a jQuery variable, is this a plugin?