Question

I would like to remove the upper and left elements from a web page (using greasemonkey/scriptish) in order to optimize its layout for displaying it at a galaxy tab 10.1.

The web page is tvtv.de and my first approach (I’m completely new to tinkering web-pages) is:

// ==UserScript==
// @include     http://www.tvtv.de/*
// ==/UserScript==

var elmDeleted = document.getElementById("header");
elmDeleted.parentNode.removeChild(elmDeleted);
elmDeleted = document.getElementById("main_left");
elmDeleted.parentNode.removeChild(elmDeleted);

The questionable elements are blanked out, but still use the original space in the layout.
I also tried different approaches, like setting the element widths to zero, hiding the elements (element.style.display=”none”), etc. but the result has always been the same.

Is it possible to ‘collapse’ the elements, so they won’t use any space in the page layout?

Any help would be greatly appreciated, thanks in advance.

Answer 1

You are removing/hiding the elements correctly. If they were relatively positioned then they would collapse to fill the available space.

In the case of this particular site, the main content is positioned absolutely. To collapse the elements use:

var css = '#main_left, #main_right { top: 0; }',
    style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
document.body.appendChild(style);