Last active
September 27, 2024 11:26
-
-
Save vbuaraujo/bddb3b93a0b2b7e28e1b to your computer and use it in GitHub Desktop.
GreaseMonkey script to remove "position: fixed" from webpages
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name unfix-all-the-toolbars | |
// @description Removes "position: fixed" style from elements, unfixing "toolbars" and the such. | |
// @namespace http://inf.ufrgs.br/~vbuaraujo/ | |
// @include * | |
// @version 1 | |
// @grant none | |
// ==/UserScript== | |
/* | |
Based on https://stackoverflow.com/questions/13696100/greasemonkey-script-to-make-fixed-positioned-elements-static | |
2015-02-17: Original version. | |
2016-05-01: Added the styleWidth threshold heuristic. | |
The big problem here is we want to avoid unfixing *all* "position: fixed" | |
elements, because some of them are fake popup windows which become quite | |
unusable if you change them to "position: static". So we need some heuristic | |
to distinguish "legitimate" fixed elements from gratuitous ones like navbars. | |
*/ | |
function numPixels(str) { | |
if (str.endsWith("px")) | |
return Number(str.slice(0, -2)); | |
else { | |
console.log("unfix-all-the-toolbars: Computed width is not in pixels! " + width); | |
return null; | |
} | |
} | |
function unfixAll() { | |
var bodyStyle = window.getComputedStyle(document.body); | |
var pageWidth = numPixels(bodyStyle.width); | |
var pageHeight= numPixels(bodyStyle.height); | |
var toolbarWidthThreshold = 0.8 * pageWidth; | |
Array.forEach( | |
/* Assorted selection of likely fixed elements, to avoid querying all elements */ | |
document.querySelectorAll("h1, h2, ul, ol, li, div, nav, header, footer"), | |
function (el) { | |
var style = window.getComputedStyle(el); | |
if (style.position === "fixed") { | |
/* Avoid unfixing JavaScript popus like Twitter's "confirm retweet" window */ | |
if (style.display === "none" || style.visibility === "hidden") return; | |
if (numPixels(style.width) < toolbarWidthThreshold) return; | |
// Try to select the best replacement for 'fixed'. Still breaks lots of things, though. | |
if (numPixels(style.bottom) === 0 && numPixels(style.top) > 0) | |
el.style.position = "static"; // Use static for footers. | |
else | |
el.style.position = "absolute"; | |
} | |
}); | |
} | |
window.addEventListener("load", unfixAll); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment