Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

How To Add Infinite Scroll With WP-Views

This was a bit of a challenge but I figured it out!

Many people who tried to accomplish this were using a plugin for WordPress called Infinite Scroll. The problem though, is WP-Views isn’t compatible with the plugin, since the pagination is handled via JavaScript. So that won’t work if you try it.

So how do you get Views to Scroll?

You do a little research, dip and dive, then make some jQuery Code to make it happen =). The situation that I had to solve didn’t really require a scroll and load. ┬áThe client wanted to have a button, that, when clicked, would load more results IN ADDITION to what was there. Hence, infinite scroll qualities.

I haven’t tested a scrolling version yet because I didn’t need to but I’m sure replacing the click() function with scroll() would get you more towards the scrolling and load action.

In any case, here’s the snippet:

https://gist.github.com/surefirewebserv/268a20f15fbeb920669f#file-scroll-button-js

I was going to add the HTML but it’s just a table with a class .main_table and a button with class .load_more. Easy enough, right?

With Views, when loading your information, you would just set it up as a table and DISPLAY ALL. Don’t use pagination. Even if you have 100 results, the JavaScript will hide everything that you tell it to hide.

Break it down!

This little gem .main_table tr:gt(9) means greater than 9. Remember code starts at 0, so gt(9) shows 10 results, everything else will be hidden. You can change that to anything you want.

The rest of the code is pretty much all commented to let you know what it does.

Primary Use

You would generally use this if you’re listing information in a table format. It can be for a directory, a list of posts, anything! And it works awesomely!

In fact, you can try the demo here:

Try The Demo!
(styles not included)

Let me know if you have any questions!

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on How To Add Infinite Scroll With WP-Views

  1. Khan says:

    Sorry i am not a programmer, can you explain it further where do i include this snippet and how the load more button is displayed and does it work with 1.6 beta?

  2. Sultan says:

    you save my time. thank you soooo much.

    1. Jonathan says:

      Very Welcome!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top