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

Viewing 10 posts - 11 through 20 (of 24 total)
  • Trevor
    #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).

    Anonymous
    #125399

    I added the css code but nothing happens!!!

    the loader is not appearing…

    Why?
    Thanks

    Trevor
    #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?

    Anonymous
    #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

    Trevor
    #125731
    This reply has been marked as private.
    Anonymous
    #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

    Trevor
    #125832
    This reply has been marked as private.
    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

    Anonymous
    #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

    Anonymous
    #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

Viewing 10 posts - 11 through 20 (of 24 total)