Scrolling Against the Grain
Recently I was faced with the challenge of creating a horizontally scrolling website, a challenge in which very few have survived with their sanity still intact. The challenge lies in “going against the grain” because by default, browsers want to wrap the content to fit vertically in the window.
There are plenty of different options out there for you when it comes to making your site go sideways, firstly the horizontal way have a template that you can download and have a play with.
Chris Coyier has also come up with this solution using jQuery to create a table based layout on the fly, while Antonio Lupetti discusses this option of manually setting the width of your containing element.
How I Went Horizontal
I think I may have decided to go the road less travelled with the QCD Boards website, choosing to dynamically set the width of the containing element using jQuery.
Sure it may be considered bad mo-jo to handle page layout with JavaScript and it may not degrade as nicely as I’d like but has anyone really come across a bulletproof technique yet?
Well the idea behind this method is to come up with a set width for each post, multiply it by the number of posts you have and then include that figure in the CSS file, which in turn forces the browser to grow horizontally.
This is achieved by first setting the width of the post element in the CSS file:
.post { width: 800px; }Then all you need to do is include this simple jQuery function:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$function() {
var numElements_single = $('.post').size();
var wrapperWidth_single = numElements_single * 800;
var wrapperWidth = wrapperWidth_single;
$('#wrapper').css( {width: wrapperWidth} );
});
</script>And you should end up with a layout structure similar to this:
Obviously if you want to employ this technique in your own site then you could change the values to something that better suits your needs. Also, if you require more detailed instructions on how to implement this method just let me know and I’ll do my best to help you out.
In Closing
I know that there are plenty of horizontally scrolling websites out there so if you’ve come across a different/better solution for scrolling against the grain then please leave a link in the comments.
A Helpful Tip: if you hold shift while using your mouse wheel, most horizontal websites should scroll sideways for you.
There's been 5 comments so far...
Like what you’ve done but I feel that the site still needs some form of navigation. Perhaps arrow buttons that scroll to the next post? Or even let the page scroll automatically as you move the cursor towards a side of the screen?
@Jack we did consider auto scrolling on mouseover of the screen edges, it might be something we implement in the future but for now we figured the mouse wheel would do.
Fantastic post, thanks for the share.
Nathan I need you to get to work on a digonally scrolling website post haste. Don’t ask me what it’s for, needless to say you’ll be paid handsomely, in the usual fashion. Adam Smith….
Wow Nathan, great post mate. I’m considering horizontal for a few future sites, good to have a resource like this to refer to when that comes along :)