Picnic Website Code Tutorials

How To Make A Horizontal Website Tutorial

View Demo 1 (simple as it gets) View Demo 2 (with a little style)

I have some bad news folks - your going to see a lot more horizontal websites floating around the web now. CSS by me - JS by ScrollTO, LocalScroll, and jQuery - integrated together and made dead simple by me! Horizontally centered on any size screen (vertically centered also in demo 2). Works with JS on or off.

Download and link to jQuery >> download and link to horizontal-scroll.js >> copy and paste da code below >> load it up and watch the magic!

Da Code...smiley

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>How to make a horizontal website</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="horizontal-scroll.js"></script>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');} 
* html {background:url(fake.jpg)}
* html #full {height:100%;}
</style>
</head>
<body>

<ul>
<li><a href="#one">ONE</a></li>
<li><a href="#two">TWO</a></li>
<li><a href="#three">THREE</a></li>
<li><a href="#four">FOUR</a></li>
<li><a href="#five">FIVE</a></li>
</ul>

<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>

</body>
</html>
		

QUESTION: If you have more or less pages - how do I figure the math?

ANSWER: Simple do this... in its current state there are 5 pages. Each page reperesents 100% on the #wrap - so 500%. And 5 pages divided by 100% equals 20% for the divs (#one,#two,#three,#four,#five). Lets say you have 8 pages. #wrap would need to be 800%. And each div (i.e. page) would be 100% divided by 8 equals 12.5% for divs (#one,#two,#three,#four,#five,#six,#seven,#eight). Do the same for any amount of pages.

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine