Support Forums

Hey there, it looks like you've been redirected from designsandcode.com - as you can see we have a new home - read more

Looking for support? You can access the support system via your account.

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

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

    Sebastien
    (Private)  August 10, 2017 at 3:46 am #125399

    I added the css code but nothing happens!!!

    the loader is not appearing…

    Why?
    Thanks

    Trevor Moderator
    (Private)  August 10, 2017 at 11:07 am #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?

    Sebastien
    (Private)  August 12, 2017 at 2:01 am #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 Moderator
    (Private)  August 12, 2017 at 8:46 am #125731
    This reply has been marked as private.
    Sebastien
    (Private)  August 13, 2017 at 6:35 pm #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 Moderator
    (Private)  August 13, 2017 at 6:59 pm #125832
    This reply has been marked as private.
    Ross Moderator
    (Private)  August 23, 2017 at 7:10 pm #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

    Sebastien
    (Private)  August 26, 2017 at 12:52 am #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

    Sebastien
    (Private)  August 26, 2017 at 1:14 am #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

  • Author
    Posts
Viewing 10 posts - 11 through 20 (of 24 total)
1 2 3

You must be logged in to reply to this topic.