Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

BalfBar fix

Today I realised something big that I really wanted to fix. It comes from a really rubbish problem that both JavaScript and jQuery have that I've spent hours trying to fix.

  • $(window).width() >= 800px is not the same as @media screen and (min-width: 800px)
  • window.innerWidth is also not the same
  • window.outerWidth is also not the same

So my solution to fix this and it's a pretty decent fix albeit it's more of a hack, is to put an invisible element known by its class name as media_tester in the .balfbar element. The JavaScript for BalfBar is now programmed to check for this element and if found uses it for media queries. It has also been added to the SCSS file.

Posted in BalfBar
jquery
width
window
viewport
fix
media
query
css
Comments
Powered by DASH 2.0