Hallo volk.
ik ben een pagina aan het ontwikkelen dat bestaat uit meerdere pagina's naast elkaar (goed te vergelijken met de site http://edmundyu.com/).
nu heb ik die verschillende pagina's, en die hebben ook een verschillende lengte. hoe kan ik er voor zorgen dat je op elke pagina een verschillende scroll height limit hebt?
als het het uitleggen enigzins makkelijker maakt, hier is de source waar ik mijn site op baseer:
HTML:
CSS:
Java:
[JS]$(document).ready(function() {
//get all link with class panel
$('a.panel').click(function () {
//reset and highlight the clicked link
$('a.panel').removeClass('selected');
$(this).addClass('selected');
//grab the current item, to be used in resize function
current = $(this);
//scroll it to the destination
$('#wrapper').scrollTo($(this).attr('href'), 800);
//cancel the link default behavior
return false;
});
//resize all the items according to the new browser size
$(window).resize(function () {
//call the resizePanel function
resizePanel();
});
});[/JS]
ik ben een pagina aan het ontwikkelen dat bestaat uit meerdere pagina's naast elkaar (goed te vergelijken met de site http://edmundyu.com/).
nu heb ik die verschillende pagina's, en die hebben ook een verschillende lengte. hoe kan ik er voor zorgen dat je op elke pagina een verschillende scroll height limit hebt?
als het het uitleggen enigzins makkelijker maakt, hier is de source waar ik mijn site op baseer:
HTML:
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">item1
<a href="#item1" class="panel">1</a> |
<a href="#item2" class="panel">2</a> |
<a href="#item3" class="panel">3</a> |
<a href="#item4" class="panel">4</a> |
<a href="#item5" class="panel">5</a>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">back</a></div>
</div>
</div>
</div>CSS:
Code:
body {
height:100%;
width:100%;
margin:0;padding:0;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}
#mask {
width:500%;
height:100%;
background-color:#eee;
}
.item {
width:20%;
height:100%;
float:left;
background-color:#ddd;
}
.content {
width:400px;
height:300px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}Java:
[JS]$(document).ready(function() {
//get all link with class panel
$('a.panel').click(function () {
//reset and highlight the clicked link
$('a.panel').removeClass('selected');
$(this).addClass('selected');
//grab the current item, to be used in resize function
current = $(this);
//scroll it to the destination
$('#wrapper').scrollTo($(this).attr('href'), 800);
//cancel the link default behavior
return false;
});
//resize all the items according to the new browser size
$(window).resize(function () {
//call the resizePanel function
resizePanel();
});
});[/JS]
