Few errors I cant solve out :(

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Few errors I cant solve out :(

This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 3 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22569
    jyrbba
    jyrbba
    Participant

    Hi,

    I’m trying to optimize our mobile end user experience and i’m having some troubles I can’t seem to work out no matter how hard I try =)

    First of all if just possible i’d like to have a bit different kind of search bar for mobile, i tried to add “active” class to it with javascript, but just didn’t have success. Propably due not selecting the right element etc. Anyway, my mobile sticky bar is going look something like this http://46.101.104.166/oma-sivu/ – This is my developement site. Problem is search is going to be left so tiny. I’d like to add a class to it when search is focused / active so I can make it expand to full 100% of screenwidth. I know you have the compact box thing, but it’s still contained in the same size box and not really helping at all.

    Second is that my results on my mainsite with mobile resolutions don’t show up for some reason. Well actually they do show up, but they are position: fixed with -4xxx pixels, so they are so much to the left they are never visible. I’ve gone pretty much tru every setting 3 times trying to make it work. There are options for results box to have mobile and tablet 100% result box, but it just doesn’t seem to work at all. Atleast for me.

    Thanks!

    –Jyri

    #22595
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    I’m not sure if you resolved this already, but I’m currently seeing this on mobile: https://i.imgur.com/65LXSWX.png
    Let me know!

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #22600
    jyrbba
    jyrbba
    Participant

    Hi,

    i’ve uploaded a new picture, maybe that will help.

    a) I’d like the search bar to have active CSS class so I could make it 100% when it’s clicked. It’s too small for any typing on iphone5. Over 30% of our mobile users are using 320px resolution only.

    b) I’d like the results to be 100%, with some small margins.

    I’m developing on this test site, as I don’t want to do it live.

    http://46.101.104.166/wp-admin

    admin / adminpassword 123

    Attachments:
    You must be logged in to view attached files.
    #22621
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    1. In this case, try this custom script to add the class to the main search container:

    jQuery(function($){
      $('input.orig').on('focus', function(){
        $(this).closest('.asp_m').addClass('asp_focused');
      }).on('blur', function(){
        $(this).closest('.asp_m').removeClass('asp_focused');
      });
    });

    This will add the ‘asp_focused’ class. Then use a custom CSS like so:

    .asp_m.asp_focused {
        min-width: 100% !important;
    }

    2. This might be doable without any custom CSS. Try changing the results position and the width and the margin: https://i.imgur.com/Sny5uGm.png

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #22625
    jyrbba
    jyrbba
    Participant

    Hi,

    sorry I forgot to mention I cracked this last night. I just made a duplicate search that has compact layout, and then hooked it so mobile navigation doesn’t have the regular search just the compact one.

    It’s working now the way I wanted it to, atleast kinda.

    https://www.fotomonza.com/

    –Jyri

    #22632
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    No problem 🙂 You can still re-use those codes in case you need them.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.