I have created jQuery full-page sliding panels that work perfectly on desktop devices. However, when the browser window is resized smaller, the panel divs fail to fill the page.
If you want to view the issue in action, you can check out the JSFiddle demo here and resize the preview window down: Fiddle
HTML:
<div class="window">
<div class="panel-1" id="one">
<p>Lorem</p>
<div class="nav">Jump To:
<a href="#" id="1one">1</a> <a href="#" id="1two">2</a> <a href="#" id="1three">3</a>
</div>
</div>
<div class="panel-2" id="two">
<p>Lorem</p>
<div class="nav">Jump To:
<a href="#" id="2one">1</a> <a href="#" id="2two">2</a> <a href="#" id="2three">3</a>
</div>
</div>
<div class="panel-3" id="three">
<p>Lorem</p>
<div class="nav">Jump To:
<a href="#" id="3one">1</a> <a href="#" id="3two">2</a> <a href="#" id="3three">3</a>
</div>
</div>
CSS:
body {
margin:0;
padding:0;
}
.window {
width: 100%;
margin: 0 auto;
overflow: hidden;
position: fixed;
}
[class^="panel"] {
height: 100%;
text-align: center;
position: absolute;
transition: all ease 1s;
-o-transition: all ease 1s;
-moz-transition: all ease 1s;
-webkit-transition: all ease 1s;
}
.panel-1 {
background: gray;
}
.panel-2 {
background: GoldenRod;
margin-top:100%;
}
.panel-3 {
background: green;
margin-top:100%;
}
JS (jQuery):
// Controls panel movement
$(document).ready(function () {
// Add your JavaScript code here
});
// Ensures the "window" <div> fills the entire page height
$(function () {
$('.window').css({
'height': (($(window).height())) + 'px'
});
$(window).resize(function () {
$('.window').css({
'height': (($(window).height())) + 'px'
});
});
});
If anyone has insights or suggestions, please feel free to share! You can also access the JSFiddle demo again for reference: Fiddle