Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1094743

    Hi,
    We’re in the early stages of creating a knowledge base site for a client. We have a big search bar like yours, and when you type in, there’s a little animation on the search button that we’d like to disable.

    It’s the same animation in this search box on your demo site – the little spinning circle which appears to the right of the button.

    https://kriesi.at/themes/enfold-knowledgebase-demo/
    Thanks in advance.

    #1094979

    Hey jonrouse,
    This css will remove the spinner:

    #top .avia_search_element .ajax_load .ajax_load_inner{
    display: none !important;
    }
    #top .avia_search_element form.ajax_loading_now .av_searchsubmit_wrapper{
        padding-right: 0px !important; 
    }
    #top .avia_search_element .ajax_load{
        width: 0px !important; 
    display: none !important;
    }

    but you will still have animation in the button, perhaps a better approach will be to edit line 1346 of the \enfold\js\avia.js
    file, look for:

     minChars: 3,

    and change to:

     minChars: 999,

    Best regards,
    Mike

    #1095213

    Hello Mike.
    Thanks very much for getting back to me.
    The quick css works great! I did like the live search results though. I noticed, as you mention, the button still animates.
    Is there any way to stop the animation without using the live search results?

    If not, Is it possible to add the JS change to the child theme?
    I’ve tried creating a folder called \js\ within the child theme and placing the amended file within that, and it isn’t being picked up.
    I’m no expert on child themes, so any help would be much appreciated.

    Thanks again,
    John

    #1095876
    #1096109

    Hi Yigit,
    Thanks for sending the link. So does this work for the \enfold\js\avia.js file? I see it mentions shortcode.js, I’ve never needed to change this file before, so I’m a bit nervous changing it, I’m guessing avia.js is a very important file!

    #1096130

    Hi,

    Please use following code for avia.js file

    function wp_change_aviajs() {
    wp_dequeue_script( ‘avia-default’ );
    wp_enqueue_script( ‘avia-default-child’, get_stylesheet_directory_uri().’/js/avia.js’, array(‘jquery’), 2, true );
    }
    add_action( ‘wp_print_scripts’, ‘wp_change_aviajs’, 100 );

    Best regards,
    Yigit

    #1096159

    Thanks Yigit,

    So, just so that I’m clear is it safe to:
    1) Add the above to the \enfold\js\avia.js file, then;
    2) Create \child\js\avia.js containing just:

    $.AviaAjaxSearch  =  function(options)
    	{
    	   var defaults = {
                delay: 300,                //delay in ms until the user stops typing.
                minChars: 999,               //dont start searching before we got at least that much characters
                scope: 'body'
    
            };
    
            this.options = $.extend({}, defaults, options);
            this.scope   = $(this.options.scope);
            this.timer   = false;
            this.lastVal = "";
    		
            this.bind_events();
    
    	};

    Will everything still work properly? Sorry to be a pain, I just don’t want to break anything!

    #1096341

    Hi,
    Please try using the whole avia.js in your child theme with the correct lines modified. But you are welcome to try as you wrote, with just the one function in the child theme avia.js, if it doesn’t work you can always upload the full file via ftp.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.