Detect Browser Bars Visibility with JavaScript

By  on  

It's one thing to know about what's in the browser document, it's another to have insight as to the user's browser itself. We've gotten past detecting which browser the user is using, and we're now into knowing what pieces of the browser UI users are seeing.

Browsers provide window.personalbar, window.locationbar, and window.menubar properties, with the shape of { visible : /*boolean*/} as its value:

if(window.personalbar.visible || window.locationbar.visible || window.menubar.visible) {
  console.log("Please hide your personal, location, and menubar for maximum screen space");
}

What would you use these properties for? Maybe providing a warning to users when your web app required maximum browser space. Outside of that, these properties seem invasive. What do you think?

Recent Features

Incredible Demos

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

  • By
    Assign Anchor IDs Using MooTools 1.2

    One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's so easy to implement. I recently ran...

Discussion

  1. Daniel

    I remember testing these out recently, and from memory, they don’t really do anything in most browsers (always set to true).

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!