Automatic resize content - one page website

Question

I recently came across these website's: http://community.saucony.com/kinvara3/ and http://www.tokiolab.it

If you look at the website's they are all one page, but the content scales as if it all are single pages.

I think it's nice how the content automatically adapts to the resolution of your browser (when resizing) even though it is an one page website.

Is this a new technique? Is it difficult to write such a plugin or do they exist already?

Hope someone can help me

Solution

Making websites adapt to a variety of screen sizes is, like Dominic shows, a whole book, not a quick fix.

It sounds like you're just looking to have multiple stacked sections, each section being the screen's height. Is that right?

That, alone, isn't too hard:

Set the width and height on the body and html elements to max out the page. I know, it's odd that you have to set the html element too, but that's life.

html, body {
    width:100%;
    height:100%;
}

In your markup define your sections.

<section>...</section>
<section>...</section>
<section>...</section>

And resize your sections to fit on load and when the page is resized. Something like:

function draw() {
    var width = $(document).width();
    var height = $(document).height();

    $("section").width(width).height(height);
}

$(document).resize(draw);
$(draw);

If you also what the scrolling to snap to the sections, define what's fixed and what scrolls with the page, entry and exit animations, etc... that becomes more involved. I don't know that there's a simple plugin that will do it for you. The closest might be impress.js (http://bartaz.github.com/impress.js/).