Ask your WordPress questions! Pay money and get answers fast! (more info)

Script Callback on Infinite Scroll WordPress

Hello!
I have the Infinite Scroll script setup to auto-load more posts at the end of the page. That part is working perfectly. But I just noticed that when new posts are added, the post doesn't get some of my JS applied to it, because it runs on page load. I'm running fitvid.js on posts to make the video embeds responsive.

According to Infinite Scroll, you can run callbacks to load those scripts when more posts are loaded. I've tried a few different ways but can't get it to execute the fitvid.js when more posts are loaded.

This is my code for Infinite Scroll (located in functions.php): http://snippi.com/s/o1qqc8t

This is my code for fitvid.js (located in custom.js): http://snippi.com/s/rgddnut

This is the github page for Infinite Scroll: https://github.com/paulirish/infinite-scroll

Any help would be much appreciated!

Mike

Answers (1)

2012-10-31

Dbranes answers:

Hi, have you tried this:

//----------------------------------- // Add Infinite Scroll //-----------------------------------//
if ( get_option('okay_theme_customizer_infinite') == 'enabled' ) {
function custom_infinite_scroll_js() {

if( ! is_singular() ) { ?>
<script>
jQuery(document).ready(function($){

$(".fitvid").fitVids();

$(".posts").infinitescroll({
loading: {
img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading more posts...', 'okay' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'okay' ); ?>"
},
nextSelector : '.post-nav-right a',
navSelector : '.post-nav',
itemSelector : 'article',
contentSelector : '.posts'
}, function(newElements){
//callback
$(".fitvid").fitVids();
}
); // end infinite-scroll setup
});
</script>
<?php
}

}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );
}


Dbranes comments:

ps:

maybe this is also helpful:

http://wildetuts.tumblr.com/post/33636287161/infinite-scroll-and-fitvids-plugin


Mike McAlister comments:

Hi Dbranes,
That doesn't seem to do the trick unfortunately!

Mike


Dbranes comments:

ok, I updated the code above

do you get any javascript error?