Hack 95. Maximize HomestarRunner Cartoons

Make Flash animations fill the entire browser window.

One of my guilty pleasures on the Web is HomestarRunner.com (http://www.homestarrunner.com). I say "guilty pleasure" for two reasons: first, because it serves no purpose whatsoever except entertainment, and second, because it's entirely Flash-based, and I normally avoid Flash if at all possible. But HomestarRunner is just too good to stay away from. It's why I keep Flash installed at all.

Here's the problem: I run my laptop at 1400 x 1050, and the HomestarRunner cartoons look downright puny, because they display at a fixed size. This hack intelligently resizes the HomestarRunner cartoons to fill my browser window. The cartoons still look good because they are drawn with vector graphics, so Flash scales them without introducing blotches or jagged edges.

12.2.1. The Code

This user script runs only on http://www.homestarrunner.com. It finds the two Flash objects on the page; the first is the cartoon itself, and the second is the site navigation bar. It determines the optimal dimensions to fill the browser window without exceeding the height or width and resizes the objects to fit.

Save the following user script as homestar-fullon.user.js:

 // ==UserScript== // @name Homestar-Fullon // @namespace http://apps.bcheck.net/greasemonkey/ // @description Make HomeStarRunner cartoons fill your browser window // @include http://homestarrunner.com/* // @include http://www.homestarrunner.com/* // ==/UserScript== // based on code by Timothy Rice // and included here with his gracious permission function resize( ) { var objs = document.getElementsByTagName('embed'); var o = objs[0]; var bar = objs[1]; if(o && o.width && o.height && o.width>0 && o.height>0) { var dw = window.innerWidth; var dh = window.innerHeight - (bar&&bar.height?bar.height*2:0); var ar = o.width/o.height; if (dw/ar <= dh) { dh = Math.floor(dw / ar); } else { dw = Math.floor(dh * ar); } /* set embedded object's size */ o.width = dw; o.height = dh; } } /* remove margin */ document.body.style.margin = "0px"; /* resize embed when window is resized */ window.addEventListener("resize", resize, false); /* resize on first load */ resize( ); 

12.2.2. Running the Hack

Before you install this script, maximize your browser window and go to http://www.homestarrunner.com. Regardless of your monitor's resolution, the cartoon will always be the same size, centered in the window with tons of blank space on either side, as shown in Figure 12-1.

Figure 12-1. HomestarRunner.com, fixed size

Now, install the user script (Tools Install This User Script) and refresh the page. Bam! The cartoon resizes to fill as much of your browser window as possible, as shown in Figure 12-2.

Figure 12-2. HomestarRunner.com, maximized

Depending on the dimensions of your browser window, the cartoon might fill the height of the window with space on the left and right, or it might fill the width and leave space on the top and bottom. The script is smart enough to figure out the maximum dimensions of the Flash animation. It even resizes the animation as you resize your browser window.