Caution: Audio may begin with Music!! |
In the last post we had written about swipe detection using jQuery mobile.
We are really inspired by iPad page scroll UI, it looks so smooth and elegant. So, we decided to write something for a page scroll for iPad/android device using JavaScript/jQuery.
The logic is quiet 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 page but with help of smooth transition using jquery, which would mimic ipad like page scroll.
Remember to include jquery plugin , jquery mobile plugin and css.
NOTE: The present code and scripts gives only an idea of the development or 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 to show which page u have scrolled into
$('html,body').animate({scrollTop: $("#"+ide).offset().top},500);
}subscription and comments are welcome!.