How JustAnswer Works:

  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.

Ask Michael Hannigan Your Own Question

Michael Hannigan
Michael Hannigan, IT Expert
Category: Software
Satisfied Customers: 11157
Experience:  25+ Years Experience in Field. MCSE, ICCP. Software Integration and Deployment Expert
23511658
Type Your Software Question Here...
Michael Hannigan is online now
A new question is answered every 9 seconds

I have jQuery masonry applied to posts on a WordPress site.

Customer Question

I have jQuery masonry applied to posts on a WordPress site. I am also using load more.
When the load more button is pressed, I can not get masonry to be applied. I'm assuming I need to add masonry(.layout) somewhere, but I can't figure it out.
Here is the dummy site with the code exactly like the client site will be:
http://test.pamplemoussejournal.com
I have the following for my masonry file
var $container = jQuery('#masonry-grid');
$container.imagesLoaded( function(){
jQuery('#masonry-grid').show();
jQuery('#loading').hide();
$container.masonry({
itemSelector: '.item',
columnWidth: 325,
isFitWidth: true,
isAnimated: true
});
})
Submitted: 1 year ago.
Category: Software
Expert:  Michael Hannigan replied 1 year ago.

Hello. My name is***** can help you with your question.

So does it appear that if only one of those 2 is enabled you're able to get that one to run properly? There is sometimes a setting for word press or a word press plug-in that allows you to check it that says to allow for compatibility mode or to allow J query to run in compatibility mode so that more than one process can use it. But I'll be happy to take a look at what's going on.

Customer: replied 1 year ago.
Hi Michael. The masonry is firing on page load. I just need it to trigger again every time the load more is activated. I wrote the masonry.js file myself and the load more is a plugin. Thanks for the suggestion on the plugin settings, but I did look at the settings.If you think an admin login will help you solve this or FTP I will provide. I'm fairly certain it needs something in the masonry js along the lines of masonry.(layout) to be triggered every time a page load happens. I just haven't been able to figure it out myself. Are you familiar with masonry methods?
Expert:  Michael Hannigan replied 1 year ago.

Yes, so what I think you're looking for is masonry('reloadItems')

Because you're getting the initial page to load and just need it for the load more – so I think that will do it.

Customer: replied 1 year ago.
Could you be more specific on how to put that into the js file? It doesn't work.
Expert:  Michael Hannigan replied 1 year ago.

Actually, I can give you a link to the demo. This will provide you with the reload and reloaditems in context.

http://bitli.es/oiwCel

And here is the code that does this

$('#prepend').click(function(){
var $boxes = $( boxMaker.makeBoxes() );
$container.prepend( $boxes ).masonry( 'reload' );
});

boxmaker is just the script that creates random text for the demo.

Customer: replied 1 year ago.
HI Michael,I've actually been through all the masonry documentation myself. the prepend and append (append would actually be more appropriate in this case) are methods of masonry, not anything to do with ajax load more. This method will not work for me, as it's not possible to call dynamic WP content this way.