In the last post, we had written about swipe detection using jQuery mobile.
We are really inspired by the iPad page scroll UI, it looks so smooth and elegant. So, we decided to write something for a page scroll for iPad/android devices using JavaScript/jQuery.
The logic is quite simple, really, you will have the inner references for a DIV element (or any DOM element) to which you can scroll your lengthy page into, just dock the DOM on top of the page but with help of smooth transition using jquery, which would mimic iPad like page scroll.
Remember to include the jquery plugin, jquery mobile plugin, and CSS.
NOTE: The present code and scripts gives only an idea of the development of logic and does not concentrate on great design and validation
Here is the basic HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, minimum-scale=1 name="viewport"></meta>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="scroll" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>ipad App - framework</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/ipad.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/default.js"></script>
</head>
<body>
<div id="p_nm" class="pag"></div>
<div id="wrapper">
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
<div id="page5" class="page"></div>
</div>
<div id="link_index" class="link">
<a href="#" onclick="scroll_section('page1')">page1</a>
<a href="#" onclick="scroll_section('page2')">page2</a>
<a href="#" onclick="scroll_section('page3')">page3</a>
<a href="#" onclick="scroll_section('page4')">page4</a>
<a href="#" onclick="scroll_section('page5')">page5</a>
</div>
</body>
</html>CSS
.page{
width:720px;
height:1000px;
margin:5px;
border:#CCCCCC solid 1px;
}
@media only screen and (width:device-width) and (orientation:portrait){
.page{
width:720px;
height:1000px;
margin:5px;
border:#CCCCCC solid 1px;
}
}
@media only screen and (width:device-width) and (orientation:landscape){
.page{
width:950px;
height:700px;
margin:5px;
border:#CCCCCC solid 1px;
}
}
.pag{
top:0px;
width:250px;
height:50px;
left:45%;
position:fixed;
}jQuery
function scroll_section(ide)
{
$('#p_nm').html("Page"+ide).animate({top:"15px"},500); // DIV element that the page scrolls to...
$('html,body').animate({scrollTop: $("#"+ide).offset().top},500);
}subscription and comments are welcome!.
