WPIntell

Source evidence

Trigger Masonry as a callback

Read More Right Here · support · 2012-12-09T18:00:00+00:00

mixedsentiment
mediumseverity
0.66relevance
4replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

2 / 21 rows with source links

9.5% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

19 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
ehansen723 resolved
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/ 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? “. 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> Try this: $container.data('masonry')['_reLayout']() 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!

Comments

4 shown
Wooliet 2012-12-31T05:25:00+00:00

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? “.

ehansen723 2013-01-13T18:38:00+00:00

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>

Wooliet 2013-01-14T03:07:00+00:00

Try this: $container.data('masonry')['_reLayout']()

ehansen723 2013-01-16T02:29:00+00:00

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!