infinite scroll manual trigger
infinite-scroll, jquery, triggers, wordpress
Solution
Pfoe, found it... Long live good documentation (NOT with this plugin!)
This:
jQuery('#next a').click(function(){
jQuery('#next a').infinitescroll('retrieve.infscr');
return false;
});
Should be:
jQuery('#next a').click(function(){
jQuery('ul#infinite').infinitescroll('retrieve');
return false;
});
the biggest problem was the .infscr which shouldn't be there.. Hope it helps someone else..
Documentation-like solution:
jQuery("#clickable_element").click(function(){
jQuery('#main_content_container').infinitescroll('retrieve');
return false;
});
Note: You may have to add the manual trigger behavior if you are working with masonry or isotope in order to make it work. Just include `manual-trigger.js` after infinitescroll and pass the behavior by passing `behavior: 'twitter'` when calling the plugin.
Problem
Just doesn't seem to work... :-( Have seen more complaints about it but I can't find the answer. The Problem: Infinite scroll works but not the manual trigger. When I click the link, nothing happens. Firebug gives Infinite Scroll My code: ``` <?php echo ('<ul id="infinite">'); ?> <?php $wp_query = new WP_Query(); $wp_query->query('paged='.$paged.'&cat=5&showposts=3&meta_key=video_video&orderby=meta_value&order=ASC' . $post->ID); while ($wp_query->have_posts()) : $wp_query->the_post(); ?> <?php if ( get_post_meta($post->ID, 'video_video', true) ) : ?> <li class="video"><?php $home = array("h" => 290, "w" => 380, "zc" => 1, "q" =>100); //echo get('video_video'); echo ('With: '); echo get('participant_first_name'); echo (' '); echo get('participant_last_name'); echo ('</li>');?> <?php endif;?> <?php endwhile;?> <?php if (get_post_meta($post->ID, 'video_video', true) ) { ?> <?php if ($wp_query->max_num_pages > 1) : ?> <nav id="nav-below" > <div id="next" > <?php next_posts_link( __( 'Scroll down for more', 'intowntheme' ) ); ?></div> </nav> <?php endif; //end nav ?> <?php } else { ?> <p>There are no interviews at the moment </p> <?php } ?> </ul> ``` And my script: ``` jQuery('ul#infinite').infinitescroll({ navSelector : "#next", // selector for the paged navigation (it will be hidden) nextSelector : "#next a", // selector for the NEXT link (to page 2) itemSelector : "ul#infinite li", // selector for all items you'll retrieve errorCallback: function() { // fade out the error message after 2 seconds $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal'); }, loading : { msgText: "<em>Loading the next year of Grantees...</em>", finishedMsg: "<em>You've reached the end of the Interviews.</em>" }, }); //kill scroll binding jQuery(window).unbind('.infscr'); //setTimeout("jQuery('#next').slideDown();", 1000); //hook up the manual click guy. jQuery('#next a').click(function(){ jQuery('#next a').infinitescroll('retrieve.infscr'); return false; }); ``` also tried ``` jQuery(document).trigger('retrieve.infscr'); ``` instead of ``` jQuery('#next a').infinitescroll('retrieve.infscr'); ``` but no luck. Firebug then says `trigger(retrieve.infscr) called incorrectly`