Enterprise Software

Stupid Web Tricks: Chromeless windows

Follow these steps to remove the chrome frame from your browser windows.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham

Two types of people inhabit the world: those who cringe at the mere thought of someone wresting the remote control away from them for even a split second, and those who yell "Yippeeeeee!" and throw their hands in the air as they plunge downhill in a stolen shopping cart. It's that little bit of the unexpected, when the browser's cozy-if-constrictive rectangle with its comforting array of buttons is replaced with dang near...nothing.

Nothing can be a pretty thing when carefully applied; the intriguing artifice-of-less smacking up against the viewer's desire for a clearly marked escape route. And you can freely apply that nothing knowing that the Alt-F4 key combination offers deliverance for those less keen on your lessness.

Don't fence me in

The wonders of high-impact minimalism are on full display at Gabriel Suchowolski's Microbians, the mother of all chromeless sites and the source of the script below. Download the chromeless windows Zip archive, unzip the files, and put them in the directory from which your page will be served. Paste this code into the <head> of the page from which you want the chromeless window to launch:

<script language=javascript src="chromeless_30.js"></script>

<script language=javascript>
function openIT(theURL,W,H, wname) {
   CLOSEdwn = "close_dwn.gif"
   CLOSEup = "close_up.gif"
   CLOSEovr = "close_ovr.gif"
   MINIdwn = "mini_dwn.gif"
   MINIup = "mini_up.gif"
   MINIovr = "mini_ovr.gif"
   NONEgrf = "none.gif"
   CLOCKgrf = "clock.gif"
   titHTML = "Window title" //change to your desired window title
   titWIN = "window title" //your desired status bar title
   winBORDERCOLOR = "#000000" //change to your desired border color
   winBORDERCOLORsel = "#FFFFFF" //change to your desired selected border color
   winBGCOLOR = "#FF0000" //change to your desired top bar background color
   winBGCOLORsel = "#00FF00" //change to your desired top bar selected background color
   mywin = openchromeless(theURL, wname, W, H, NONEgrf, CLOSEdwn, CLOSEup, CLOSEovr, MINIdwn, MINIup, MINIovr, CLOCKgrf, titHTML, titWIN, winBORDERCOLOR, winBORDERCOLORsel, winBGCOLOR, winBGCOLORsel)
}
</script>

Put the following link code in the <body> of your page to open your chromeless window:

<a href="javascript:openIT('http://the_url_of_my_chromeless_window.html', 400, 300, 'name of my chromeless window');">Text for your link here</a>

Change "Text for your link here" to whatever you want your link text to be. You will, of course, need to create a separate HTML document for your chromeless pop-up window and enter its filename or URL in the above code. You will also need to enter the size of the window, for example: 400 (width), 300 (height), and its title.

The JavaScript for this trick is distributed under the GNU General Public License, so if you don't know what that is, you should read it. Your pop-up windows will show up without chrome in Internet Explorer 4 and up, while other browsers will just get a standard pop-up.

That's it. You're footloose and lead-free in the land of minimalism. Has the void ever looked so well designed?

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Editor's Picks

Free Newsletters, In your Inbox