How To Make A Horizontal Website Tutorial
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...
<!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.
