OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING

[Liath]

you could have 20 search forms on your page without any problems, but only if they are not nested

[Darwazo]

Wow !! working perfect ....dream come true
Thank you very much Liath and Marius ...you guys are champions !!  & its implemented now on web wwww.darwazo.com
Thanks

[mrtsoftware]

Darwazo , please check your web site's " CONTACT " form, I can not send message to you , it gives error, see secreenshoot

[Darwazo]

Thank u for your time mrtsoftware , appreciated !
I guess its fixed now !
Solution: I had activated option to Upload file in Contact form in Default settings of osclass. Its unchecked now.

[mrtsoftware]

I have submitted contact form, can you please answer me with your private email, I need your helps regarding same problems you solved.

[Darwazo]

Did you get my reply !!
I'm basically learner !! officially non-coder !! but I am up for any help I could extend to you within my knowledge. Fingers crossed ! n thank you again

[Liath]

@mrtsoftware
just ask if you need any help

[Darwazo]

Hi Liath,
Since my theme is osclasswizards, on smartphone/mobile - while opening my site, half of screen is covered with freezed search part. Any solution to this?

1 - Either fixed part should not come on mobile version
2 - or in mobile version, it shows only as SEACH Area and Seach Button ( i.e. search bar without categories,region and city).

Thank you in advance

[marius-ciclistu]

...

But...this is not a good idea because you keep 500 px from your view page blocked.

....

[Darwazo]

Marius ..u were right but I didn't get it at that time ...You are experience pro champ and could foresee this as an issue on mobile.

May be any option that fixation / freezing only applies with screen size is bigger than 6/7 inches wide? 

Thank you very much ....

[marius-ciclistu]

You could unfreeze the header on mobile devices via javascript (if that was the solution you chose), but I let Liath change the code.

[Liath]

make use of media queries, choose your preferred max-display-size and reset the position
https://www.w3schools.com/css/css_rwd_mediaqueries.asp


e.g.

Code: [Select]

@media only screen and (max-width: 500px) {
    #header .banner_none {
          position: unset !important;
    }
}

[marius-ciclistu]

And I am happy that I let you Liath give the solution. I wouldn't have thought about your given solution.
I was thinking about window width > 500 px.

Code: [Select]

$(window).scroll(function() {
if($(window).width() > 500){
    if ($(this).scrollTop() > 139) {
        $('#form_vh_map').addClass('sticky');
    } else {
        $('#form_vh_map').removeClass('sticky');
    }
}
});

[Liath]

And I am happy that I let you Liath give the solution. I wouldn't have thought about your given solution.
I was thinking about window width > 500 px.

your solution is possible also...

[Darwazo]

Thank you very much Liath and Marius for help out.

Initially I struggled with both codes........
but lateron I realized 500px is not enough while testing code on localhost to see impact ....and after changing to 900px or above  I achieved the result.

I pasted following code (with or without .sticky and achieved result)

@media only screen and (max-width: 900px) {
#header .banner_none { position: unset !important; }   
}

What should be optimal size which only applies to mobile ( I guess 1024px)?. I believe fixed position is good in Tablets....any thought...


B/w...Thank you very much Guys !! #Champs