~ January 28, 2014 ~

Liberate your browser from unscrollables with the Static Ding! bookmarklet

Are you sometimes vexed by webpages with fixed headers you can't scroll? Have uninvited, unscrollable webpage elements commandeered precious space in your laptop or desktop browser window, limiting your view of the stuff you want to read, or exacerbating your OCD? Has it happened on websites like Yahoo News, Forbes, Slate, Business Insider, Wired's UK edition, Twitter, or, as of its January 8, 2014 redesign, The New York Times?

Well, help is at hand.

Static Ding! is a simple, free bookmarklet. You tell it to examine the webpage in your current browser tab, and it will try to release any fixed elements it finds so they can be scrolled like the rest of the page.

StaticDing!

You can try it on this very webpage by clicking the "StaticDing!" link above.

To use it on other webpages, you can drag the link to your laptop or desktop browser's bookmarks toolbar to create a bookmark. Then you can click the bookmark later to run Static Ding! on another page. (If you're unfamiliar with bookmarklets, more information is available from Firefox and elsewhere on the Web. Some browsers handle them differently. In Internet Explorer and mobile browsers it can be more effort than it's worth.)

Static Ding! only runs when you tell it to, and only touches the webpage in the browser tab in which you run it.

Static Ding! treads gently. To minimize its footprint, it only changes elements by making them scrollable —so you can still view them —and then it stops running. Some webpages, however, change the same elements right back to unscrollable after Static Ding! is done. For such occasions, Static Ding! also comes in an extra strength formulation called Static Nuke.

Static Nuke is the same as Static Ding! but goes a step further. It tries to turn unscrollable webpage elements invisible, so your browser will not display them at all. If you want to view them again, you will have to reload the page.

StaticNuke

You can try Static Nuke right here by clicking the "StaticNuke" link above. (Remember to reload the page first to reset the fixed header if you already have used Static Ding! on this page.) To use Static Nuke with other webpages, you can drag the link to your browser's bookmarks.

A technical note follows:

Static Ding! and Static Nuke have been tested in these browsers:

The bookmarklets' code is available on GitHub and licensed under the free public MIT license. Static Ding! walks the DOM looking for HTML elements with a position property set to fixed. If it finds any, it changes the property's value to relative. Static Nuke does the same thing, and also sets the display property to none and the opacity to 0. (Yes, the word "static" in "Static Ding" is a misnomer in relation to the CSS position value by the same name.)

The bookmarklets do not detect less prevalent methods of pinning parts of webpages on the screen, such as iframes, and can't help with sites that use them.

The bookmarklets might not run on websites with content security policy (CSP) headers that preclude bookmarklets in some browsers. See, for example, this StackOverflow discussion, this GitHub announcement, or the W3C's CSP candidate recommendation.

Good for your eyes.

Good for your concentration.

Keep content King,
with Static Ding!