search-filter-scroll-loading icon positionning in infinite scroll?

Trevor Moderator

#124959

So, I had to experiment a bit. By way of an explanation for others, in the browser inspector, I manually added this HTML inside the body tag, at the end of the page:

<div class="search-filter-scroll-loading"></div>

This is what our javascript does when the infinite scroll is loading. Then it was a case of finding the CSS, which I had already shown was this:

.search-filter-scroll-loading {
    display: block;
    margin: 20px 10px 10px;
    height: 30px;
    width: 30px;
    animation: search-filter-loader-rotate .7s infinite linear;
    border: 5px solid rgba(0,0,0,.15);
        border-right-color: rgba(0, 0, 0, 0.15);
    border-right-color: rgba(0,0,0,.6);
    border-radius: 50%;
}

Then I had to find a way to move the icon. Making it position: absolute; means that it will always appear towards the top of the page, and so out of view when the page has been scrolled down. Making it position: relative is OK, but I do not know where exactly on the page our javascript places it. So, the extra CSS might be:

.search-filter-scroll-loading {
  z-index: 99999999;
  left: 50%;
  top: 100%;
  position: relative;
}

This puts it in the middle of the page horizontally, but you will have to play with these numbers (left and top).

Add New Note to this Reply

Sebastien

#125399

I added the css code but nothing happens!!!

the loader is not appearing…

Why?
Thanks

Add New Note to this Reply

Trevor Moderator

#125434

It is very difficult for me to do this for you, because:

1. The site is live (yes?) and I cannot experiment on live sites. I will only work on a site that is a copy, for safety. If I break anything, there is no pain or loss.
2. The CSS is minified/combined.

Is it possible for you to copy the site to a staging site, switch off all caching, minification, asset combining and CDN, and let me know where you entered this custom CSS?

Add New Note to this Reply

Sebastien

#125714

Hello, impossible for me to do that, I do not have the time.

I put the css code into the style.css of my child theme (like all my own styles)

I put the !important; on each lines but nothing changes…

Could you please tell me where is located the css in the core files?

Thanks

Add New Note to this Reply

Trevor Moderator

#125731

This reply has been marked as private.

Add New Note to this Reply

Sebastien

#125828

Trevor, could you please see with Ross if he has a solution?

I cannot stay like that with the loader not displaying…

You can give me some advice to see, I can investigate from myself into the code.

Thanks for your help,

Best

Add New Note to this Reply

Trevor Moderator

#125832

This reply has been marked as private.

Add New Note to this Reply

Ross Moderator

#127324

Hi Sebastian

I had a look..

Ok so a couple of things…

I can see the loader here for example (just below your products, in your footer on the grey):

But of course this is not sitting right. One thing I noticed in fact, was that the all your products are part of a list <li>, however our loader is attached as a <div> –

So this will not work :/ Our loader was only supposed to basic / quick to setup, so for now I won’t add support for li, but we do have an alternative:

Make your own loader using our JS events – https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

In this case you can disable our loader, and create your own, somewhere on the page (you can even use our class .search-filter-scroll-loading to get the animated icon, but you will have to manually show / hide the loader yourself and integrate with your markup.

Something like:

(function ( $ ) {
	
	"use strict";
	
	//detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  console.log("ajax start");
	  //show your loader
	});

	//detects when the ajax request has finished and the content has been updated
	// - add scripts that apply to your results here
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//hide your loader
	});

	
}(jQuery));

(I’m assuming you know some jQuery to follow the above)

Let me know if all makes sense 🙂

Best

Add New Note to this Reply

Sebastien

#127727

Hi Ross,

Thanks for your help,

However, if I use the ajax method it is good but it also shows the loader when the search is loading and I don’t want.

It is bad that you cannot integrate the loader into the <li> as it seems that all the woocommerce products are into <li>…

DO you have another alternative?

Best

Add New Note to this Reply

Sebastien

#127729

Hi again,

I think that the loader should be integrated into the <li> because it should load at the same time the products load.

At the moment, if I scroll down the products, the loader stay at the top and goes over the screen, normally if I scroll down the loader should follow me and display still at the bottom, right?

Thanks for your help,
Best

Add New Note to this Reply

[Author]

Posts