- This topic has 23 replies, 3 voices, and was last updated 7 years, 2 months ago by Ross.
-
Trevor(Private) August 8, 2017 at 8:02 am #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 itposition: 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).
Trevor(Private) August 10, 2017 at 11:07 am #125434It 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?
Anonymous(Private) August 12, 2017 at 2:01 am #125714Hello, 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
Ross Moderator(Private) August 23, 2017 at 7:10 pm #127324Hi 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
Anonymous(Private) August 26, 2017 at 12:52 am #127727Hi 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
Anonymous(Private) August 26, 2017 at 1:14 am #127729Hi 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 -
AuthorPosts