Canvas Support

Infinite scroll

11 replies · opened May 13, 2020

WWozzaGangsterMay 13, 2020

I have copied the code but It doesnt seems to work, I see there is an error. Can you please help?

I copy and paste the below code in the footer right?

<script>
jQuery(window).on( 'load', function(){
var $container = $('#posts');
$container.infiniteScroll({
path: '.load-next-posts',
history: false,
status: '.page-load-status'
});
$container.on( 'load.infiniteScroll', function( event, response, path ) {
var $items = $( response ).find('.entry');
// append items after images loaded
$items.imagesLoaded( function() {
$container.append( $items );
$container.isotope( 'insert', $items );
setTimeout( function(){
$container.isotope('layout');
SEMICOLON.initialize.resizeVideos();
SEMICOLON.widget.loadFlexSlider();
SEMICOLON.widget.masonryThumbs();
}, 1000 );
});
});
});
</script>

Are there any other files I need to include?

The error I get is:

Uncaught ReferenceError: jQuery is not defined
at (index):1504

Please advise.

SSemicolon WebSTAFFMay 13, 2020

Hello,

Apologies about the Inconveniences caused!

It is hard to check the exact issue without a Live URL. So it would be great if you can please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Additionally, make sure that this JS Code is included after the js/jquery.js File is added to the Page.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFMay 13, 2020

Hello,

The previous issue seems to be resolved, however, there are more errors and Validation issues with your code. Please make sure that your code is completely Valid: https://validator.w3.org/nu/?doc=https%3A%2F%2Fgeekheads.co.uk%2Fblog%2F .

Additionally, you will need to add the .load-next-posts Class to your Posts Navigation Link so that the Infinity Scroll Plugin is able to load posts from this Link.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWozzaGangsterMay 13, 2020

Hello,

Thank you for your reply.

Is it possible to test this locally in a html template? Since we are still not seeing the posts load.

SSemicolon WebSTAFFMay 13, 2020

Hello,

Some Features like iFrames, AJAX and other functionalities related to CORs are blocked by the Browsers by default when using the Local File System. This will be automatically resolved if you view the Files using a Localhost based Server (XAMPP/MAMP) or Online Servers.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWozzaGangsterMay 14, 2020

Hi,

Thank you for your help, are your customers buying this canvas html template specifically to be used with Wordpress? Just wondering where I could get support? The trick is converting your HTML to Wordpress.

Above where you said:

Additionally, you will need to add the .load-next-posts Class to your Posts Navigation Link so that the Infinity Scroll Plugin is able to load posts from this Link.

Can you tell me where that is?

SSemicolon WebSTAFFMay 14, 2020

Hello,

We are not really sure about this as most of the users on the Support Forums are using Canvas as HTML on their Websites. Many Users have converted Canvas to WordPress for their Clients but they have never reported any issues. However, unfortunately, you might not find much support specifically targeted towards converting Canvas to WordPress. But if you are well-versed with WordPress, you should be able to do convert it fine as it is fairly easy to implement and there is nothing extra or complicated in Canvas that would make it harder. However, it is important to follow the Theme Development Guide: https://codex.wordpress.org/Theme_Development properly taking into consideration all the Coding Standards required.

The .load-next-posts Class should be added to the <a> Tag which contains the URL of the Next Page of the Posts (Older Posts).

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWozzaGangsterJun 5, 2020

Hello,

Thank you for your reply.

Can you provide basic support for Lightbox?

Basically we just want to get the post image when we click the image, see below:

<!-- Entry Image
<div class="entry-image">

<a href="https://ow4eva.com/wp-content/uploads/2020/06/week-12-home.jpg">

<?php the_post_thumbnail(); ?>

</a>
</div>
<!-- .entry-image end -->

The ' need to be dynamically called.

How do we do that?

SSemicolon WebSTAFFJun 5, 2020

Hello,

For a Lightbox Image you can simply use the following code:


[
&#x9;
![attachment](images/portfolio/4/1.jpg)

](images/portfolio/4/1.jpg)

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWozzaGangsterJun 10, 2020

Thank you for the update

We are still battling to get the infinite scroll to work.

https://geekheads.co.uk/blog/

Please help us, i'm sure its just a basic issue like add the class load-next-posts. We dont know where to put that?

SSemicolon WebSTAFFJun 10, 2020

Hello,

Apologies about the Inconveniences but since this is a WordPress related request, we unfortunately, cannot provide you with assistance regarding the Codes but we can give you some pointers:

  1. You will need to add the .load-next-posts Class to the Link generated by the next_posts_link() Function.

  2. We could not find the Infinity Scroll JS Codes on your Page. So you will need to add that as well.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard