Body height?

in Userscripts.org discussion
Subscribe to Body height? 5 posts, 2 voices



Aug 1, 2011 3:28am
SoftCreatR Scriptwright
FirefoxWindows

Hi,

i would like to decrease the body max-height for ~30px. In Chrome, i have a toolbar (extension), which is located at the bottom of the browser window. I cant read, what's under it, so i need to decrease the content size.

Any idea, how to do it?!
 
Aug 1, 2011 3:50am
SoftCreatR Scriptwright
ieWindows

Okay... Had an idea. I think, the best way to solve my problem is to move the contents of the body into a container. This is my first try (which isnt working properly...):

// ==UserScript==
// @name Test
// @description
// @version 1.0
// @include http://*
// ==/UserScript==

var dH = document.body.scrollHeight,
bodyDiv = document.createElement('div');

bodyDiv.style.maxHeight = dH - 40;
bodyDiv.style.width = '100%';
bodyDiv.style.position = 'relative';
bodyDiv.style.top = '0px';
bodyDiv.style.left = '0px';
bodyDiv.style.overflow = 'auto';
bodyDiv.innerHTML = document.body.innerHTML;

document.body.innerHTML = '';
document.body.style.overflow = 'none';
document.body.appendChild(bodyDiv);

Tested it on Google and Facebook and it doesnt work as expected.
 
Aug 1, 2011 5:18am
Jefferson Scher Scriptwright
FirefoxWindows

This is scrolling body (longer than the viewport), not a fixed size body (fixed to the viewport), correct? So the problem is that when you get to the end of the page, part of it remains behind your toolbar? How about adding a spacer div to the end of the body so it can scrolls up enough to clear your toolbar? Actually, just a big padding-bottom might do it.

(By the way, using innerHTML on the body will flush some event handlers, so it could wreck the functionality of the page.)
 
Aug 1, 2011 12:22pm
SoftCreatR Scriptwright
ieWindows

Hell, yeah! Good idea :)

On Google (and some other pages), it works. Here on Userscripts (for example) it doesnt.

Here's, what i did so far:

// ==UserScript==
// @name Test
// @description
// @version 1.0
// @include http://*
// ==/UserScript==

var bodyDiv = document.createElement('div');

bodyDiv.style.height = '25px';
bodyDiv.style.width = '100%';
bodyDiv.style.position = 'relative';
bodyDiv.style.bottom = '0px';
bodyDiv.style.overflow = 'none';
document.body.appendChild(bodyDiv);

I want, that the feedbacks panel also appears ABOVE my div and not within.
 
Aug 1, 2011 5:11pm
Jefferson Scher Scriptwright
FirefoxWindows

SoftCreatR wrote:
I want, that the feedbacks panel also appears ABOVE my div and not within.
I assume that element has a style of position:fixed, which the browser presumably computes without regard to what is in the page, since it is fixed to the frame viewport. Could you find anything fixed to bottom:0 and increase that value? I don't know of an efficient way to find such an element.

(Now I see why you wanted a separate container, but I think it would need to be a frame or an iframe to work around position:fixed, and I think that might require reloading the document.)