Change bytes.com's table width using Greasemonkey

Dormilich

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

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

Thanks, saves me having to do it myself.

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

Dormilich

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

Dormilich

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

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

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