Hi,
I'm new to this forum, and I really hope someone can help me with the following issue.
I'm creating a one-page-design with fullscreen divs. Every div contains one subject of the website. those subjectdivs are stacked vertically en use localscroll to change. some subjects contain multiple divs stacked horizontal. This is where the problem starts. I'll make a visual interpretation of the idea:
div
div div div div div div
div
div
div
this is the html I wrote so far. (I deeplinked the localscroll and scrollto for posting)
- <!DOCTYPE html />
- <html>
- <head>
- <style>
- * {margin: 0; padding: 0; }
- html{ overflow: auto; }
- h1{ margin: auto; 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',
- axis: 'xy',
- duration: 1600,
- easing: 'easeOutBounce'
- });
-
- });
- </script>
- </body>
- </html>
I hope someone can help me!