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)

// ==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:

		// 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]

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)

		// 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

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…

// ==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);

[Atli]

Hey.

Your first script. Seems KUB changed the layout or something. Your script looks for a width of "635", but the table currently has "625px".
Was scratching my head there for like 10 minutes trying to figure out why it wouldn't work :)