Infinite scroll is loading too many pages at once.

Anonymous

#265794

Hi there!

I’ve struggled couple of times with this problem already, but i found no solution.
So, on results page Ajax loading is set on. Pagination Type is set as Infinite scroll > http://prntscr.com/vgprly
The problem is that when i scroll down, at the beginning it’s loading fine, then it loads faster and faster and the screen is jumping up some rows, see here please > https://gyazo.com/770ee91aa09bd7826be7204482659268
Hope the short video above explains enough the problem at hand…
Notice the featured image with the pencil tick on page, i scroll down, but all search results are jumping way higher.

So what’s you thoughts?
How can i fix it?

Trevor

#265839

I would need to see the code for results.php, but it does not look right that you have no Infinite Scroll Container. It should enclose the posts (with class ‘item’), like this (I made the code to show you, it is not in your page):

https://www.screencast.com/t/LVczF9Tk8P

If that does not work, can you show me the results.php file contents? You can share the file using a file sharing site, or post/paste the code in your reply here. Please post any code inside code ticks (one before the code, one after)? On my UK Windows keyboard, the code tick key is next to the 1 key in the standard part of the keyboard. If you do this Google search and look at the images, they show various keyboards and where the key is located:

https://www.google.com/search?q=back+tick+code+key

Anonymous

#265955

Thanks for quick reply Trevor!

Ok, i tried to set the results in a container, but .results-header got multiplied a lot of times, so i had to go back where i started.
Help me please further with this problem.
here the link to the code > https://www.codepile.net/pile/DOr3jnYo
(photo link just in case 🙂 > http://prntscr.com/vh9mq9 )

As you see, i use the shortcode for the search form, next i use shortcode for displaying the results. Both on the same page.
What am i doing wrong?

Anonymous

#265957

If you need, i can provide credentials to access the site.

Anonymous

#266018

Sorry Trevor, i guess you actually need to check this code rather than first one i sent > https://www.codepile.net/pile/oY99pRYr

Trevor

#266107

Here is my version of that code, with new lines 30 and 58:

<?php
/**
 * Search & Filter Pro
 *
 * Sample Results Template
 *
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      https://searchandfilter.com
 * @copyright 2018 Search & Filter
 *
 * Note: these templates are not full page templates, rather
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think
 * of it as a template part
 *
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs
 * and using template tags -
 *
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() ) {
	?>
	<div class="results-head clear">
		<h1><?php _e('Nieuws & Blog artikelen','best4u');?></h1>
	</div>
	<div class='search-filter-results-list'>
	<?php while ( $query->have_posts() ) : $query->the_post();
//        $query->the_post();
		$id        = get_post()->ID;
		$image     = get_the_post_thumbnail_url( $id, 'medium_large' );
		$title     = get_the_title( $id );
		$permalink = get_the_permalink( $id );
		?>
		<div class="item span-4">
			<?php if ( $image ): ?>
				<div class="latest-news__thumb object-fit sz-16-9">
					<a href="<?php echo $permalink; ?>" ><img class="lazy-img lazy" data-src="<?php echo $image; ?>"
					     src="<?php echo get_template_directory_uri() ?>/placeholder.png"
							alt="<?php echo $title ?>"></a>
				</div>
			<?php endif; ?>
			<div class="latest-news__cnt">
				<h3><a href="<?php echo $permalink;  ?>"><?php echo $title; ?></a></h3>
				<div class="content">
					<?php echo my_content( 20, false, false ); ?>
				</div>
				<div class="link">
					<a href="<?php echo $permalink; ?>"
					   class="read-more"><?php _e( 'Lees meer', 'best4u' ); ?></a>
				</div>
			</div>
		</div>
	<?php endwhile; ?>
	</div>
	<?php
	if ( function_exists( 'wp_pagenavi' ) ) { ?>
		<div class="pagination">
			<?php wp_pagenavi( array( 'query' => $query ) ); ?>
		</div>
	<?php } ?>
	<?php
} else {?>
	<h3><?php _e('Geen resultaten gevonden','best4u')?></h3>
<?php } ?>

Anonymous

#266221

Thanks a lot Trevor!
This simple trick worked for me,
Cheers!

Trevor

#266226

Thanks for letting me know. I will close this thread for now.

[Author]

Posts