About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 12, 2013

Page scroll for ipad-android device using javascript-jquery

I am really inspired by ipad page scroll UI, it looks so smooth and elegant. So, i 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>


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); 
}


thats it!, told you its simple!. :)

subscription and comments are welcome!.