Trigger Masonry as a callback

  • Resolved ehansen723

    (@ehansen723)


    11 years, 4 months ago

    I need to re-trigger Masonry when the post finishes expanding after clicking “read more,” and then again when the post collapses after clicking “read less”

    According to Masonry’s support, I need to trigger Masonry as a callback using:
    $container.masonry('reLayout')
    but I’m not sure how to work that callback into the RMRH plugin code.

    It might be helpful to add a callback field in Admin (like Infinite Scroll has) in the next version, but in the meantime, is there any guidance you can offer?

    http://wordpress.org/extend/plugins/read-more-right-here/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author wooliet

    (@wooliet)

    11 years, 3 months ago

    You can try running masonry on your content when the plugin ‘expanded’ and ‘collapsed’ events are triggered. Check out the third item in the plugin FAQ, “Is there anyway to determine when new content has been displayed for a post?“.

    Thread Starter ehansen723

    (@ehansen723)

    11 years, 3 months ago

    Thanks for pointing out the custom event names; I must’ve missed that FAQ. But I guess I’m still too new to the syntax of callbacks… I’ve tried lots of variations of the code below with no luck. (I’m including the whole chunk of script I’m using for reference.) Do you have any more insight or is this something I should contact the author of the other plugin about?

    <script type="text/javascript">
  	$(function(){
		var $container = $('#posts');
		$container.masonry({
			itemSelector : '.post',
			gutterWidth: 18
		});
		$('.post').bind('RMRHContentExpanded RMRHContentCollapsed',function() {
			$container.masonry('reLayout')
		});
	});
	</script>
    Plugin Author wooliet

    (@wooliet)

    11 years, 3 months ago

    Try this:

    $container.data('masonry')['_reLayout']()

    Thread Starter ehansen723

    (@ehansen723)

    11 years, 3 months ago

    I wound up having to tweak it to:

    ‘jQuery(‘#posts’).bind(‘RMRHContentExpanded RMRHContentCollapsed’,function() {
    $container.data(‘masonry’)[‘_reLayout’]()
    }); ‘

    but that worked like a charm! Thanks so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trigger Masonry as a callback’ is closed to new replies.

Tags