Change bytes.com's table width using Greasemonkey 
March 7th, 2009, 10:20 AM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,487
| |
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);
| 
March 17th, 2009, 03:07 PM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,487
| | | re: Change bytes.com's table width using Greasemonkey
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]);
-
}
| 
March 19th, 2009, 03:39 PM
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,518
| | | re: Change bytes.com's table width using Greasemonkey
Thanks, saves me having to do it myself.
You could probably avoid the for loop by accessing the table indexes directly.
| 
March 19th, 2009, 03:42 PM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,487
| | | re: Change bytes.com's table width using Greasemonkey
probably, though there are too many tables in the markup.
| 
March 25th, 2009, 02:54 PM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,487
| | | re: Change bytes.com's table width using Greasemonkey 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) - // 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);
-
}
-
| 
March 31st, 2009, 12:55 PM
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,518
| | | re: Change bytes.com's table width using Greasemonkey
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.
| 
August 14th, 2009, 01:19 PM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany
Posts: 3,487
| | | re: Change bytes.com's table width using Greasemonkey
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);
|  | | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,662 network members.
|