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

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    HTML5 Context Menus

    One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so...

  • By
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

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!