Search jQuery

jQuery Forum

Using jQuery Plugins

wvmaaren

Localscroll not behaving like I want it to

in Using jQuery Plugins • 9 years ago

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

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!

Replies(1)

wvmaaren

Re: Localscroll not behaving like I want it to

9 years ago

Already fixed it after 8 hours of blood, sweat and tears...

Had to use the hash option to make it work

<!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({
target: 'body',
axis: 'xy',
duration: 1600,
hash: true,
queue: true
});
$("#navigate2").localScroll({
target: 'body',
axis: 'xy',
duration: 1600,
hash: true,
queue: true
});
});
</script>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Localscroll not behaving like I want it to

Replies(1)

Re: Localscroll not behaving like I want it to

Statistics

Tags

Actions