Skip to content

Instantly share code, notes, and snippets.

@thierrypigot
Last active April 20, 2021 04:50
Show Gist options
  • Save thierrypigot/4fcb306301f7956cbcf4 to your computer and use it in GitHub Desktop.
Save thierrypigot/4fcb306301f7956cbcf4 to your computer and use it in GitHub Desktop.
Infinite Scroll Genesis inside div with overflow:scroll
<?php
# infinite scroll Genesis
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
function is_blog ()
{
global $post;
$posttype = get_post_type($post );
return ( ((is_archive()) || (is_author()) || (is_category()) || (is_home()) || (is_single()) || (is_tag())) && ( $posttype == 'post') ) ? true : false ;
}
/*
* Add a CSS ID to main element
* @param array $attributes Existing attributes.
* @return array Amended attributes.
*/
function gn_attributes_content( $attributes )
{
if( is_blog() )
{
$attributes['id'] = 'i-scroll';
}
return $attributes;
}
add_filter( 'genesis_attr_content', 'gn_attributes_content' );
function gn_script_i_scroll()
{
if( is_blog() )
{
wp_register_script( 'i-scroll', get_stylesheet_directory_uri() .'/js/infinite-scroll.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'i-scroll' );
}
}
add_action('wp_enqueue_scripts','gn_script_i_scroll');
add_action('genesis_after_loop','gn_loader');
function gn_loader()
{
?>
<p class="chargement-billet loader" style="display: none"><img class="loader-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif"></p>
<?php
}
/**
* Infinite Scroll - Genesis
* Thierry Pigot
* 20150722
*/
jQuery(document).ready(function($)
{
var loader = $('.loader'),
busy = false,
i = 1;
$('.content-sidebar-wrap').scroll(function () {
var $this = $(this);
var height = this.scrollHeight - $this.height(); // Get the height of the div
var scroll = $this.scrollTop(); // Get the vertical scroll position
//var lastArticle = $('#i-scroll article:last').height();
var isScrolledToEnd = ( scroll >= height );
//var isScrolledToEnd = ( scroll >= ( height - ( lastArticle/3) ) );
if (isScrolledToEnd)
{
// incrémente le numéro de page
i++;
// on est occupé
busy = true;
// afficher le loader
loader.show();
$.get(document.location.href + 'page/' + i )
.done( function( data )
{
// masque le loader
loader.hide();
// ajouter les nouveau article
$('#i-scroll article:last').after( $('#i-scroll', data).html() );
// on met jour la valeur offset du dernier article
height = $('#i-scroll article:last').offset();
// met à jour busy
busy = false;
})
.fail( function()
{
// on masque le loader
loader.hide();
}
);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment