Change bytes.com's table width using Greasemonkey

Dormilich · #1 March 7th, 2009, 10:20 AM

lately, people have complained that the new layout is too narrow on most Computer/Laptop screens. Firefox users can make use of the Greasemonkey Addon to apply on-the-fly changes.

(Opera users can use Opera's UserScripts, which should work similarly)

Expand|Select|Wrap|Line Numbers

 // ==UserScript==

// @name           widen Bytes.com

// @namespace      http://bytes.com/

// @description    widen bytes.com's too narrow main table

// @include        http://bytes.com/*

// ==/UserScript==
 
window.bytes_new_width = function()

{

    // define new size

    var new_size = 1000;
 
    // get the main table and reset its width

    var tbl = document.getElementsByTagName('table');

    var l = tbl.length;

    for (var i=0; i<l; i++)

    {

        // there is only one table with a width

        // attribute of 635

        if (tbl[i].getAttribute("width") == 635) 

        {

            tbl[i].setAttribute("width", new_size);

        }

    }
 
    // get the code blocks and widen them too

    var code_box = new_size - 100 + "px";

    var code = document.getElementsByClassName('codeContent');

    var k = code.length;

    for (var j=0; j<k; j++)

    {

        // set box size (enclosed in table)

        code[j].style.width = code_box;

    }

}
 
window.addEventListener("load", window.bytes_new_width, false);

Dormilich · #2 March 17th, 2009, 03:07 PM

if you don't like the "Popular Articles" menu, add following code in the first for-loop:

Expand|Select|Wrap|Line Numbers

         // remove Articles menu

        if (tbl[i].getAttribute("class") == "maintable")

        {

            var row1 = tbl[i].rows[0];

            // gets all <td> (even from subtable)

            var cells = row1.getElementsByTagName("td");

            // remove last

            row1.removeChild(cells[cells.length-1]);

        }

acoder · #3 March 19th, 2009, 03:39 PM

Thanks, saves me having to do it myself.

You could probably avoid the for loop by accessing the table indexes directly.

Dormilich · #4 March 19th, 2009, 03:42 PM

probably, though there are too many tables in the markup.

Dormilich · #5 March 25th, 2009, 02:54 PM

Quote:

Originally Posted by Dormilich

if you don't like the "Popular Articles" menu, add following code

update: no need to loop over the tables.... (and doing some clean up, too)

Expand|Select|Wrap|Line Numbers

         // remove Articles menu

        var main = document.getElementsByClassName("maintable")[0];

        if (main)

        {

            var row1 = main.rows[0];

            // get last table cell

            var cell3 = row1.cells[2];

            // remove last

            row1.removeChild(cell3);

        }

acoder · #6 March 31st, 2009, 12:55 PM

The "maintable"-classed table is also the parent of the table with width 635, so either get the first table

Expand|Select|Wrap|Line Numbers

table.getElementsByTagName("table")[0]

or via the first td (table cell) on the first row.

Dormilich · #7 August 14th, 2009, 01:19 PM

after taking care of the table width, I now got annoyed by the lengthy forum descriptions in the User Control Panel…

Expand|Select|Wrap|Line Numbers

 // ==UserScript==

// @name           bytes_overview_table

// @namespace      http://bytes.com/

// @include        http://bytes.com/usercp.php

// @description    remove a good deal of the Forum description in the User Control Panel

// ==/UserScript==
 
window.bytes.overview = function () 

{

    // get the table cells where the description is

    var trs = document.getElementById("collapseobj_usercp_forums").getElementsByClassName("alt1Active");
 
    // got this loop termination idea from Markus

    for (var i=0; trs[i]; i++)

    {

        // the element that actually holds the text

        var div = trs[i].getElementsByClassName("smallfont")[0];
 
        // skip if there is no text inside

        if (div.firstChild.nodeType != 3)

            continue;
 
        // cut the text at the first hyphen

        var text = div.textContent;

        div.textContent = text.substring(0, text.indexOf("-"));

    }

};
 
window.addEventListener("load", window.bytes.overview, false);

Change bytes.com's table width using Greasemonkey

re: Change bytes.com's table width using Greasemonkey

re: Change bytes.com's table width using Greasemonkey

re: Change bytes.com's table width using Greasemonkey

re: Change bytes.com's table width using Greasemonkey

re: Change bytes.com's table width using Greasemonkey

re: Change bytes.com's table width using Greasemonkey

/bytes/development

/bytes/it

/bytes/about