Results Flickering on Scroll

Dear @Illid,

I have added the JQuery but still I get issues. The problem is mainly driven, as user, from the fact that when you scroll the results actually you move also the page below and then everything get messed up.

Also fixing the top position in pixel creates some issues between mobile and desktop.

I was advised by the Theme (Electro) to use your plugin which is fantastic and I would like to have a great result menu without issues.

If you need my ID and PW just let me know.

Thank you
Gabriele

Hi,

One of the solutions that I can provide for you – is to use ‘Mobile full screen’ search layout. More about it you can read here: Mobile Support

To enable it please go to the plugin settings page -> Sarch form tab and enable ‘Mobile full screen’ option.

But this layout is not working for search forms that is placed inside fixed blocks like your header. So in order t make it works inside it you will be needed to make some code improvements.

First – please open advanced-woo-search/assets/js/common.js file, find lines

  showMobileLayout: function() {

                if ( ! methods.isFixed() ) {
                    self.after('<div class="aws-placement-container"></div>');
                    self.addClass('aws-mobile-fixed').prepend('<div class="aws-mobile-fixed-close"><svg width="17" height="17" viewBox="1.5 1.5 21 21"><path d="M22.182 3.856c.522-.554.306-1.394-.234-1.938-.54-.543-1.433-.523-1.826-.135C19.73 2.17 11.955 10 11.955 10S4.225 2.154 3.79 1.783c-.438-.371-1.277-.4-1.81.135-.533.537-.628 1.513-.25 1.938.377.424 8.166 8.218 8.166 8.218s-7.85 7.864-8.166 8.219c-.317.354-.34 1.335.25 1.805.59.47 1.24.455 1.81 0 .568-.456 8.166-7.951 8.166-7.951l8.167 7.86c.747.72 1.504.563 1.96.09.456-.471.609-1.268.1-1.804-.508-.537-8.167-8.219-8.167-8.219s7.645-7.665 8.167-8.218z"></path></svg></div>');
                    $('body').addClass('aws-overlay').append('<div class="aws-overlay-mask"></div>').append( self );
                    $searchField.focus();
                }

            },

and replace with

showMobileLayout: function() {

                var show = AwsHooks.apply_filters( 'aws_show_mobile_layout', false, { instance: instance, form: self, data: d } );

                if ( ! methods.isFixed() || show ) {
                    self.after('<div class="aws-placement-container"></div>');
                    self.addClass('aws-mobile-fixed').prepend('<div class="aws-mobile-fixed-close"><svg width="17" height="17" viewBox="1.5 1.5 21 21"><path d="M22.182 3.856c.522-.554.306-1.394-.234-1.938-.54-.543-1.433-.523-1.826-.135C19.73 2.17 11.955 10 11.955 10S4.225 2.154 3.79 1.783c-.438-.371-1.277-.4-1.81.135-.533.537-.628 1.513-.25 1.938.377.424 8.166 8.218 8.166 8.218s-7.85 7.864-8.166 8.219c-.317.354-.34 1.335.25 1.805.59.47 1.24.455 1.81 0 .568-.456 8.166-7.951 8.166-7.951l8.167 7.86c.747.72 1.504.563 1.96.09.456-.471.609-1.268.1-1.804-.508-.537-8.167-8.219-8.167-8.219s7.645-7.665 8.167-8.218z"></path></svg></div>');
                    $('body').addClass('aws-overlay').append('<div class="aws-overlay-mask"></div>').append( self );
                    $searchField.focus();
                }

            },

Don’t worry about plugin updates. I will include this changes in the next plugin release.

Second – please use following code snippet:

add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {

    $script = "
        function aws_show_mobile_layout( show, options  ) {
            if ( options.form.closest('#masthead').length > 0 ) {
                show = true;
            }
            return show;
        }
        AwsHooks.add_filter( 'aws_show_mobile_layout', aws_show_mobile_layout );
    ";

    wp_add_inline_script( 'aws-script', $script);
    wp_add_inline_script( 'aws-pro-script', $script);

}

You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.

Thank you,

I appreciate your support, but unfortunately it still doesn’t work properly with my theme.

I will have to go for something else.

Thank you