Infinte Scroll Selectors for Mystique theme?

Home » Forums » Free Themes » Mystique » Infinte Scroll Selectors for Mystique theme?
ESP Chaber
Posted 3 months ago

I’ve installed Infinite Scroll plugin in this pretty theme but I don’t know the right selectors to make it work.

Can somebody tell me the selectors?

Thank you.

HUN tomiy
Posted 2 months ago

I would also realy appreciate if somebody could help us. I am trying to get the right selectors. But it is realy realy hard, for a begginer. God bless the one who can help us :) !

We must give the following selectors.

Content CSS Selector
The DIV that wraps around all posts. New posts will be inserted at the bottom of this DIV.
Post CSS Selector
The selector that selects all posts on a page. Each post must be surrounded by a single DIV.
Navigation links CSS Selector
This DIV contains the Next Posts and Previous Posts link.
Previous Posts CSS Selector
This A tag is what points to the 2nd page of posts.

Many thaks for helping us!

HUN tomiy
Posted 2 months ago

Wow it is surpriseing, thank you very much i was only checking the main page continously. I have been for 10 hours in front of the laptop so far so i am bit tired and my brain stoped working properly :) But at least i know the selectors work fine! And it is your glory!! Thanks for your kindnes and patience! I am impressed. Thx a lot again.

if sombody also wants to use it, I am currently using Mystique – Extend 1.0 with these selectors:

.posts
.hentry
.pagination
.pagination .previous

ROM admin Administrator 484 posts
Posted 2 months ago

Just a note: the theme has this feature built-in, but the posts get displayed on click, not on scroll. You can however change this by simply adding this code in the footer template for example:

<script>
  jQuery(document).ready(function($){
    setInterval(function(){
      $('.page-navi.single a').each(function(){
        var rect = this.getBoundingClientRect();
        if(rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth)
          if(!$(this).hasClass('loading'))
            $(this).trigger('click');
      });
    }, 1000);
  });
</script>

This works when the “single (AJAX)” navigation is enabled, and is waaaay lighter than your plugin :)

(PS: I remove some of the messages since you got it working in the end, only keeping the ones that can help people looking for the same thing)