[Support request] Single post lazy loading with slug and title update

[George]

I am trying to achieve the type of post lazy loading found on the attached URL. The script dynamically loads more posts from the same category as you scroll down and also updates the slug and post title at the top (where the menu bar is). Seems like a custom script. Are you aware of a plugin or script that can do that?

[David]

Hi there,

couldn’t find any more then the two plugins that Tom mentioned here:

https://generatepress.com/forums/topic/next-post-button-as-soon-as-the-post-ends/#post-1237593

Found this article as well which explains the process:

https://premium.wpmudev.org/blog/boost-time-on-site-by-auto-loading-new-posts-like-qz-com-and-medium/

[George]

Hi David, really helpful. Is there a way in GP to change the post navigation to only include posts from the same category with the original viewed post?

[Tom]

Hey George,

You can do this:

add_filter( 'generate_post_navigation_args', function( $args ) {
    $args['in_same_term'] = true;

    return $args;
} );

[George]

Hey Tom, works great.

I am using this plugin to autoload the next post from the same category and it works great in combination with your code. The plugin also updates the slug dynamically when scrolled to the next post. I am trying to replicate the functionality of the site I have attached. I want to be able to load the post title inside the menu area replacing the current menu dynamically when scrolled to the next post and also load the menu back when scrolled at the top. Similarly, I would like a different logo image to replace the current one when start scrolling to the next post and the image to be replaced back to the original once page is scrolled to the top. Just like the example site. The autoload plugin provides two fields where you can add events for “Post loaded” and “Entering a Post” actions. In addition, the autoload plugin provides some JavaScript triggers that can be used to make something happen at certain times.

Knowing this, what is the best way to apply JavaScript in GP to make this happen?

[Tom]

That’s some pretty advanced stuff.

Do you already have the post title loading in your menu area?

For example, if you did this:

<div class="menu-area-post-title"><?php the_title(); ?></div>

It looks like you could maybe do this:

$('body').on( 'alnp-post-changed', function( e, this_title, this_url, this_post_id, post_count, stop_reading, initial_post ) {
    $( '.menu-area-post-title' ).html( this_title );
});

[George]

Ok, I didn’t want to bombard you with questions so I took some time to sort out as much as I could. Seems like I am almost there. Your initial pointer really helped! I would appreciate some final touches.

1) I have an inside_navigation hook that loads some markup:

<div class="single-post-sticky">
	<div class="sticky-logo"> <img src="/wp-content/uploads/logo.png" alt="Logo"></div>
	<div class="menu-area-post-title"><?php the_title(); ?></div>
</div>

The <?php the_title(); ?> doesn’t seem to be necessary since it’s being replaced by the next script.

2) I also have a wp_footer hook that adds and removes classes so that I can show/hide certain elements:

<script>		
(function($) {
	$('.single-post-sticky').addClass("hide");
	$('body').on( 'alnp-post-changed', function( e, this_title, this_url, this_post_id, post_count, stop_reading, initial_post ) {
		$( '.menu-area-post-title' ).html( this_title);
		$('.single-post-sticky').removeClass("hide");
		$('.main-nav').addClass("hide");
		$('.navigation-branding').addClass("hide");
	})
	
})( jQuery );
</script>

The .hide class hides elements via display: none; Initially, I hide the markup that I added with the first hook. When a post is changed while scrolling, I remove the .hide class so I can show it again and then hide the .main-nav and .navigation-branding class. Finally, I insert the post title as you showed me earlier.

Ir works great. The only issue now is to return to the original state of things while viewing the original post (scrolled to the top). I am aware that there is a jQuery scroll to top function available but there is also a boolean parameter inside the existing function called initial_post. It gets the value of either true or false (I checked it with console.log). I tried creating a conditional statement to include the show hide stuff but I was getting some weird errors. Can you maybe help with this?

Basically, my aim is to show the .single-post-sticky class again and also remove the show/hide calculations:

$( '.menu-area-post-title' ).html( this_title);
$('.single-post-sticky').removeClass("hide");
$('.main-nav').addClass("hide");
$('.navigation-branding').addClass("hide");

It just needs a final push!

[Tom]

Hey George,

What code were you using for the initial post? It should be as simple as this:

if ( initial_post ) {
    // undo things and bring it back to normal.
} else {
    // everything else.
}

[Author]

Posts