CODEWITHSUNDEEP
jquerybrowserresize
idbranding
idbranding

Reputation: 729

Automatic resize content - one page website

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

Upvotes: 2

Views: 19776

Answers (3)

nicholas
nicholas

Reputation: 14593

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/).

Upvotes: 5

nicholas
nicholas

Reputation: 14593

Like Val said, more to do with scroll effects than page size.

Both those examples look like Scrollorama pages (http://johnpolacek.github.com/scrollorama/)

Another good one is http://www.nikebetterworld.com/product.

Upvotes: 0

Dominic Green
Dominic Green

Reputation: 10258

The principle you are looking at is responsive design, there is a ton off articles around about it.

A good book is http://www.abookapart.com/products/responsive-web-design

Article : http://www.alistapart.com/articles/responsive-web-design/

Also if you want to retrofit some features you can just use media queries

http://www.w3.org/TR/css3-mediaqueries/

Upvotes: 0

Related Questions