0

I am currently developing a site using drupal.

It's a responsive website, and my problem occurs only on the Android Firefox browser.

When in mobile view (mobile browser, or tiny browser screen on desktop), scrolling down will change the header colours and images, and clicking the menu button will make the menu appear.

My main problem is that the jquery that does all this, will not work in my android firefox browser, but works fine in any other browser. I've put it all in a fiddle.

https://jsfiddle.net/gbwts8a9/7/

The problem appears to be in the 

if ($('.l-header').css('position') == 'fixed' )

statement. If I change that to

if(true)

Firefox also does exactly what it's supposed to do. However, no matter what I change it to ( I've tried to check for #l-navbutton.is(:visible) , I've tried $(window).width functions, but no matter what I do, firefox android apparently does not evaluate them as true, even when all other browsers do.

What statement would check for being on a small screen, and works in all mobile browsers?

KeairaSedai
  • 73
  • 8
  • 1
    If you log the value of (or alert) `$('.l-header').css('position')` on your problematic firefox, what do you get? – adelphus Aug 07 '15 at 14:38
  • I just checked, it alerts fixed . – KeairaSedai Aug 07 '15 at 14:53
  • Interestingly, too.. I just noticed that if I make it alert first, it works fine after the alert. If I remove the alert statement again, it fails to work. If I do something else with it, such as assign it to a var, it won't work. – KeairaSedai Aug 07 '15 at 14:56
  • 1
    I've had a look at your website and I've seen what you're trying to do, but I wouldn't recommend using styles applied by external CSS files as a basis for initialisation conditions - what happens if the CSS takes a while to load? See http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready – adelphus Aug 07 '15 at 15:34
  • `if (window.screen.width < 800) ...` ? – adelphus Aug 07 '15 at 17:32
  • That makes sense. I got the idea from a different website that said it was more reliable than checking for the windows width. However, even when I tried to check for if($(window).width() < 800) it did not work either. There must be some check I can do to make sure I'm looking at the mobile version. – KeairaSedai Aug 07 '15 at 17:37
  • That works! Thanks. It does not solve my original problem, but it does achieve what I wanted the website to do.. thanks! – KeairaSedai Aug 07 '15 at 17:39

1 Answers1

0

To make my situation work on all browsers I had to combine my original statement, and the statement as suggested by adelphus (thanks!) as neither seems to work on all browsers by itself.

My final statement is

if (window.screen.width < 800 || $('.l-header').css('position') == 'fixed' )
KeairaSedai
  • 73
  • 8