The New CBC Radio 3

I often listen to CBC Radio 3 at work. Recently they updated their website; while it’s mostly a change for the better (yay, the player doesn’t stop updating!) there were a couple of things bugging me about it. With the old design, you always had access to the player and the main navigation, but now they stay at the top of the page. Not helpful when you’re scrolling through comments and whatnot.

So I wrote a Greasemonkey script that keeps the player and the left navigation bar in place. It also clears out the CBC header at the top, as well as the CBC Radio header that sits below that, for a cleaner page.

To use this script, just install Greasemonkey and then click here to install the script. Sorry, no love for non-Firefox users.

Here is the script, in all its glory:

// ==UserScript==
// @name           CBC R3 Cleanup
// @namespace  http://mike.eire.ca
// @description  keeps left nav and music player in fixed position
// @include        http://radio3.cbc.ca/*
// ==/UserScript==
 
var div;
//top header
div = document.getElementsByClassName('span-5')[0];
div.parentNode.removeChild(div);
 
//navigation
div = document.getElementsByClassName('span-1')[0];
div.parentNode.style.position = 'relative';
div.style.position = 'fixed';
div.style.zIndex = 100;
div.style.overflowX = 'hidden';
div.style.overflowY = 'auto';
div.style.height = document.documentElement.clientHeight.toString() + 'px';
 
//main content container
div = document.getElementById('aspnetForm');
div.style.position = 'relative';
div.style.marginLeft = '200px';
 
//player
div = div.getElementsByClassName('span-4')[0];
div.style.position = 'fixed';
div.style.zIndex = 100;
 
//main content
while ((div = div.nextSibling)) {
	if (div.nodeName.toLowerCase() === 'div') {
		div.style.paddingTop = '100px';
	}
}
 
//footer
div = document.getElementById('footer');
div.parentNode.removeChild(div);

One Reply to “The New CBC Radio 3”

  1. Thanks for the script – I was looking for something to remove the unnecessary cbc boilerplate at the top of the new design.

Comments are closed.