Browse: Home / Snippets /

Modify pager content change event with JavaScript

Contents


Snippet #

/**
 * Example event trigger handler when the page AJAX finishes and the 
 * new content is move in place. 
 * 
 * Within the args object is an element 'parent_div' to reference the 
 * outer parent div of the paged element. The args object may contain 
 * other elements in the future.
 * 
 * The folowing code is an example if scolling to the top of the parent
 * div IF it ia above the top of the current viewport.
 */
 add_action( 'wp_print_footer_scripts', function() {
	?>
	<script>
	(function($) {
		jQuery(window).on('learndash_pager_content_changed', function (e, args) {
			if ( typeof args['parent_div'] !== 'undefined') {

				var win = jQuery(window);
				var winScrollPosition = win.scrollTop();
				var objOffsetTop = jQuery(args['parent_div']).offset().top;

				if (winScrollPosition > objOffsetTop) {
					win.animate({ scrollTop: objOffsetTop }, "fast");
				}
			}	
		});
	})( jQuery );
	</script>
	<?php
}, 999);