I’m trying to create a multi directional one page website like below or this
[panel 1]
[panel 2]
[panel 3][panel 4][panel 5]
[panel 6]
I know how to scroll vertical or horizontal but not together.
The effect I’m looking for is similar to this.. http://jsfiddle.net/shavindra/zKxxK/39/
I want each panel to be width: 100%; height: 1000px;
if anyone can give me a simple breakdown or point me in the right direction i’d be grateful.
/////// EDIT + 2 ///////////////
Here is my local code but I can’t replicate @Beetroot-Beetroot solution.
This code below now works for anyone looking for a similar solution. Thanks to @Beetroot-Beetroot
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
margin: 0px;
overflow: none;
}
#content {
width: 100%;
height: 100%;
position: absolute;
}
#scrollWrapper {
position: relative;
overflow: hidden;
}
#scroller {
position: absolute;
}
.scrollitem {
position: absolute;
background: #F0F8FF;
border: 1px solid black;
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div id="scrollWrapper">
<div id="scroller">
<div class="col1 row1 scrollitem">col1, item1</div>
<div class="col1 row2 scrollitem">col1, item2</div>
<div class="col1 row3 scrollitem">col1, item3</div>
<div class="col1 row4 scrollitem">col1, item4</div>
<div class="col1 row5 scrollitem">col1, item5</div>
<div class="col2 row1 scrollitem">col2, item1</div>
<div class="col2 row2 scrollitem">col2, item2</div>
<div class="col2 row3 scrollitem">col2, item3</div>
<div class="col2 row4 scrollitem">col2, item4</div>
<div class="col2 row5 scrollitem">col2, item5</div>
<div class="col3 row1 scrollitem">col3, item1</div>
<div class="col3 row2 scrollitem">col3, item2</div>
<div class="col3 row3 scrollitem">col3, item3</div>
<div class="col3 row4 scrollitem">col3, item4</div>
<div class="col3 row5 scrollitem">col3, item5</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var $scroller = $("#scroller"),
$scrollitems = $(".scrollitem"),
borders = {
top: parseInt($scrollitems.css('border-top-width')),
right: parseInt($scrollitems.css('border-right-width')),
bottom: parseInt($scrollitems.css('border-bottom-width')),
left: parseInt($scrollitems.css('border-left-width'))
},
margin = 8,
currentPage = {
jq: $(),
x: 0,
y: 0
},
scrollTime = 1200,
xPitch,
yPitch,
inTransition = false;
$(window).on('resize', function() {
$("#scrollWrapper, #scroller").height($(document).height());
$("#scrollWrapper, #scroller").width($(document).width());
$(".scrollitem").width($(document).width() - borders.left - borders.right - 2);
$(".scrollitem").height($(document).height() - borders.top - borders.bottom - 2);
xPitch = $(document).width() + margin,
yPitch = $(document).height() + margin
}).trigger('resize');
function scrollBy(coords) {
//find new item relative to current
coords.x += currentPage.x;
coords.y += currentPage.y;
return scrollTo(coords, false);
};
function scrollTo(coords, noScroll) {
var def = new $.Deferred();
var $newPage = $scrollitems.filter(".col" + coords.x).filter(".row" + coords.y);
//if new page exists,
if (!inTransition && $newPage.length) {
inTransition = true;
//position new page and show it
var left = coords.x * xPitch,
top = coords.y * yPitch;
$newPage.css({
'left': left,
'top': top
}).show();
//scroll to new page
var t = noScroll ? 0 : scrollTime;
$scroller.animate({
'left': -left,
'top': -top
}, t, function() {
//hide current page (not really necessary if everything else is pixel perfect)
currentPage.jq.hide();
//update currentPage to reflect new page
$.extend(currentPage, {jq:$newPage}, coords);
inTransition = false;
def.resolve();//allow something to happen after new page is loaded
});
}
else { def.reject(); }//allow something to happen if new page doesn't exist
return def.promise();
}
//go to initial page
scrollTo({x:1, y:1}, true).done(function() {
//here do whatever is necessary on initial page load
});
$(document).on('keydown', function(e) {
e.preventDefault();
switch (e.which) {
case 37:
scrollBy({x:-1, y:0}); // left
break;
case 38:
scrollBy({x:0, y:-1}); // up
break;
case 39:
scrollBy({x:1, y:0}); // right
break;
case 40:
scrollBy({x:0, y:1}); // down
break;
}
});
</script>
</html>
Try this:
http://jsfiddle.net/fakTV/1/
A different approach is taken to positioning the pages, allowing the HTML, javascript and CSS to be simplified.
You will see that scrolling from page to page is handled by a pair of functions
scrollBy()(for relative page selection) andscrollTo()(for absolute page selection).This is probably not exactly what you want but may give you a better basis to start from.