Geachte lezers,
Ik hoop dat jullie mij kunnen helpen. Ik zit met de volgende vraag.
Ik probeer m.b.v. JQuery + Scollto + LocalScroll plugin een fullscreen scrollable website te maken. De meesten "Pagina's", wat dus fullscreen divs zijn, bestaan uit 1 parent div (1 topic) maar sommige paginas hebben horizontaal meerdere fullscreen divs.. Klinkt dat begrijpelijk? Zal het visueel maken:
[contentdiv 1]
[contentdiv 2][Horizontaal 2][Horizontaal3][horizontaal4]
[contentdiv 3]
[contentdiv 4]
[contentdiv 5]
[contentdiv 6]
hierbij de huidige code
Hoop dat jullie mij kunnen helpen
Ik hoop dat jullie mij kunnen helpen. Ik zit met de volgende vraag.
Ik probeer m.b.v. JQuery + Scollto + LocalScroll plugin een fullscreen scrollable website te maken. De meesten "Pagina's", wat dus fullscreen divs zijn, bestaan uit 1 parent div (1 topic) maar sommige paginas hebben horizontaal meerdere fullscreen divs.. Klinkt dat begrijpelijk? Zal het visueel maken:
[contentdiv 1]
[contentdiv 2][Horizontaal 2][Horizontaal3][horizontaal4]
[contentdiv 3]
[contentdiv 4]
[contentdiv 5]
[contentdiv 6]
hierbij de huidige code
HTML:
<!DOCTYPE html />
<html>
<head>
<style>
* {margin: 0; padding: 0;}
h1{font-size: 36px;}
.red{background-color: red;}
.blue{background-color: #03C;}
.float{float: left;}
#navigate{position: fixed; top: 0; z-index: 100;}
#navigate2{position: fixed; bottom: 0; z-index: 100;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
</head>
<body>
<div id="navigate">
<a href="#content1">content1</a>
<a href="#content2">content2</a>
<a href="#content3">content3</a>
<a href="#content4">content4</a>
<a href="#content5">content5</a>
<a href="#content6">content6</a>
</div>
<div id="content1" class="contentdiv red"><h1>content 1</h1></div>
<div id="content2" class="contentdiv blue">
<div id="navigate2">
<a href="#vert1">vert1</a>
<a href="#vert2">vert2</a>
<a href="#vert3">vert3</a>
<a href="#vert4">vert4</a>
<a href="#vert5">vert5</a>
<a href="#vert6">vert6</a>
</div>
<div id="vert1" class="contentdiv red float"><h1>Vert 1</h1></div>
<div id="vert2" class="contentdiv blue float"><h1>Vert 2</h1></div>
<div id="vert3" class="contentdiv red float"><h1>Vert 3</h1></div>
<div id="vert4" class="contentdiv blue float"><h1>Vert 4</h1></div>
<div id="vert5" class="contentdiv red float"><h1>Vert 5</h1></div>
<div id="vert6" class="contentdiv blue float"><h1>Vert 6</h1></div>
</div>
<div id="content3" class="contentdiv red"><h1>content 3</h1></div>
<div id="content4" class="contentdiv blue"><h1>Content 4</h1></div>
<div id="content5" class="contentdiv red"><h1>Content 5</h1></div>
<div id="content6" class="contentdiv blue"><h1>Content 6</h1></div>
<script type="text/javascript">
$(document).ready(function(){
var BrowserWidth = $(window).width() + "px";
var BrowserHeight = $(window).height() + "px";
var test = ($(window).width() * 6) + "px";
$(".contentdiv").css({
"width" : BrowserWidth,
"height" : BrowserHeight
});
$("#content2").css({"width" : test});
$(window).resize(function(){
$(".contentdiv").css({
"width" : BrowserWidth,
"height" : BrowserHeight
});
});
$("#navigate").localScroll({
duration: 1600,
easing: 'easeOutBounce'
});
$("#navigate2").localScroll({
target: "#content2",
duration: 1600,
easing: 'easeOutBounce'
});
});
</script>
</body>
</html>Hoop dat jullie mij kunnen helpen
