Connecting Tech Pros Worldwide Help | Site Map

Change bytes.com's table width using Greasemonkey

Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#1   Mar 7 '09
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
  1. // ==UserScript==
  2. // @name           widen Bytes.com
  3. // @namespace      http://bytes.com/
  4. // @description    widen bytes.com's too narrow main table
  5. // @include        http://bytes.com/*
  6. // ==/UserScript==
  7.  
  8. window.bytes_new_width = function()
  9. {
  10.     // define new size
  11.     var new_size = 1000;
  12.  
  13.     // get the main table and reset its width
  14.     var tbl = document.getElementsByTagName('table');
  15.     var l = tbl.length;
  16.     for (var i=0; i<l; i++)
  17.     {
  18.         // there is only one table with a width
  19.         // attribute of 635
  20.         if (tbl[i].getAttribute("width") == 635) 
  21.         {
  22.             tbl[i].setAttribute("width", new_size);
  23.         }
  24.     }
  25.  
  26.     // get the code blocks and widen them too
  27.     var code_box = new_size - 100 + "px";
  28.     var code = document.getElementsByClassName('codeContent');
  29.     var k = code.length;
  30.     for (var j=0; j<k; j++)
  31.     {
  32.         // set box size (enclosed in table)
  33.         code[j].style.width = code_box;
  34.     }
  35. }
  36.  
  37. window.addEventListener("load", window.bytes_new_width, false);



Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#2   Mar 17 '09

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:
Expand|Select|Wrap|Line Numbers
  1.         // remove Articles menu
  2.         if (tbl[i].getAttribute("class") == "maintable")
  3.         {
  4.             var row1 = tbl[i].rows[0];
  5.             // gets all <td> (even from subtable)
  6.             var cells = row1.getElementsByTagName("td");
  7.             // remove last
  8.             row1.removeChild(cells[cells.length-1]);
  9.         }
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3   Mar 19 '09

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.
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#4   Mar 19 '09

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


probably, though there are too many tables in the markup.
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#5   Mar 25 '09

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


Quote:

Originally Posted by Dormilich View Post

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
  1.         // remove Articles menu
  2.         var main = document.getElementsByClassName("maintable")[0];
  3.         if (main)
  4.         {
  5.             var row1 = main.rows[0];
  6.             // get last table cell
  7.             var cell3 = row1.cells[2];
  8.             // remove last
  9.             row1.removeChild(cell3);
  10.         }
  11.  
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6   Mar 31 '09

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
Expand|Select|Wrap|Line Numbers
  1. table.getElementsByTagName("table")[0]
or via the first td (table cell) on the first row.
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#7   Aug 14 '09

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…
Expand|Select|Wrap|Line Numbers
  1. // ==UserScript==
  2. // @name           bytes_overview_table
  3. // @namespace      http://bytes.com/
  4. // @include        http://bytes.com/usercp.php
  5. // @description    remove a good deal of the Forum description in the User Control Panel
  6. // ==/UserScript==
  7.  
  8. window.bytes.overview = function () 
  9. {
  10.     // get the table cells where the description is
  11.     var trs = document.getElementById("collapseobj_usercp_forums").getElementsByClassName("alt1Active");
  12.  
  13.     // got this loop termination idea from Markus
  14.     for (var i=0; trs[i]; i++)
  15.     {
  16.         // the element that actually holds the text
  17.         var div = trs[i].getElementsByClassName("smallfont")[0];
  18.  
  19.         // skip if there is no text inside
  20.         if (div.firstChild.nodeType != 3)
  21.             continue;
  22.  
  23.         // cut the text at the first hyphen
  24.         var text = div.textContent;
  25.         div.textContent = text.substring(0, text.indexOf("-"));
  26.     }
  27. };
  28.  
  29. window.addEventListener("load", window.bytes.overview, false);
Reply