WordPress.org

Ready to get started?Download WordPress

Forums

Read More Right Here
[resolved] Trigger Masonry as a callback (5 posts)

  1. ehansen723
    Member
    Posted 1 year 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/

  2. Wooliet
    Member
    Plugin Author

    Posted 1 year 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?".

  3. ehansen723
    Member
    Posted 1 year 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>
  4. Wooliet
    Member
    Plugin Author

    Posted 1 year ago #

    Try this:

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

  5. ehansen723
    Member
    Posted 1 year 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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic