Layout rendered by resolution browser port

I've got this 20i Cinema Display and when viewing sites on this resolution they all have a lot of space not being used. Would it not be cool to change the layout of your site to whatever the size of your Screen or browser is so we can benefit of this lost space?

Well I came up with a nice little script that can implement multiple layouts (for different resolutions) and change them when detecting a shift in screen resolution or browser size.

I did a very simple test with just changing the background color to prove that it works. I added to my HTML file a CSS file and 2 JS files.

My CSS file contains the different background colors for the different id's. The screening.js file contains the file that controles the changes of the id to the HTML and the global.js initializes the screening object so that it will work when you resize you browser.

Global.js initialization

window.onload = init;

function init()
{
  Screening.addView('pda', 120); //width of your design
  Screening.addView('loser', 770); // width of your design
  Screening.addView('super', 1000); // width of your design
	
  Screening.init();
}

Style.css

body#pda
{
  background: yellow;
}

body#loser
{
  background: #000;
}

body#super
{
  background: #ccc;
}

As you can see I added 3 different views with a specific ID (pda, loser, super). You can see the result on the follow page. Play with the size of you browser to see the effect.