Hi all,

These two links, http://deanoakley.com/ and http://www.jukkasoininen.com/ exploit horizontal scrolling perfectly. How do you make a site that functions in that way?

Thanks

I would say the first site just has a static background and the content just expands to the right. Second site looks like its probably done with Javascript.

No idea, but i found them a bit OTT and some confusing as to where i was going with what link.

I would say the first site just has a static background and the content just expands to the right. Second site looks like its probably done with Javascript.

 

But what do you write in your css to enable the content to be expanded to the right????

No idea, but i found them a bit OTT and some confusing as to where i was going with what link.

 

I think it adds a new dimension to web design as it allows the developer to utilise or give the effect of the use of real estate in a design.

Just set the width of a div to like 400% or something.

 

That should work.

I think it adds a new dimension to web design as it allows the developer to utilise or give the effect of the use of real estate in a design.

 

I can see it from that point of view, and Im in no ways against it, its a clever concept, but it needs refining.

Wow! these websites, are showing me something I've usually found rather taboo! Times are changing in the world of webdesign! lol

The scrolling effect doesn't work with all browsers, but I still want know how he did it. There is something called httrack which downloads a website for you. Later, I will download the website and figure out what he did.

I did this recently on template i was doing.

 

It was a 9x9 grid style though.

 

Each box i nested inside a <ul> and then used a jquery plugin to scroll between the boxes when links we clicked.

http://www.gcmingati.net/wordpress/wp-cont...ide-plugin.html

 

There is an tutorial to the sort of effect you are after If would need a bit of modifying to be the whole site rather than just a box, but it gives you an idea of how it is done

This is what i used http://demos.flesler.com/jquery/localScroll/

 

I would need less modifying, and supports both horizontal and vertical together or individually.

Or of course you could just create a div with the following:

 

#horizontalContent{
white-space:none;
width:100%;
overflow:auto;
white-space:nowrap;
}

 

Then just add some padding to the top and the bottom.

The second site is completely useless to a user who has javascript turned off, whereas the first site still functions with it turned off, you just lose the smooth slide effect. Good to see the first site has taken into account usability and accessibility.

#1 rule of javascript, is make sure it enhances the user experience, but isn't required for the user experience.