ipad scroll

65 views
Skip to first unread message

raj kumar

unread,
Aug 14, 2012, 5:59:48 PM8/14/12
to html5...@googlegroups.com
Hi,


<!doctype html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->

<head>
<meta charset="utf-8">

<title>Flickable.js / Demo 2</title>
<!-- Mobile viewport optimization -->
<meta name="viewport" content="width=900" />


<!-- Shared Scripts -->
<script src="../libs/modernizr-2.0.6.min.js"></script>
<script src="../libs/zepto.min.js"></script>
<script src="../src/zepto.flickable.min.js"></script>
<script src="js/demo.js"></script>

<!-- Demo 1 Scripts -->
<script type="text/javascript">
$(document).ready(function() 
{
$('#demo2').flickable({segments:4});
$('#demo2 a').tap(function(){ alert('You just tapped "'+$(this).text()+'"'); });
if(!Modernizr.touch) {
// If you're on a desktop, show next/prev links for mouse navigation
$('#demo2-intro').append('<p><a class="prev">Prev</a> | <a class="next">Next</a></p>');
$('.next').click(function() { $('#demo2').flickable('scrollNext');});
$('.prev').click(function() { $('#demo2').flickable('scrollPrev');});
// Add mouse support
$('#demo2 a').click(function(){ alert('You just clicked "'+$(this).text()+'"'); });
}
});
</script>

<!-- Shared Styles -->
<link rel="stylesheet" href="css/demo.css">


<!-- Demo 1 Styles -->

<style type="text/css">
   #demo2-wrapper
{
width: 800px;
height: 200px;
margin: 0 auto;
background: #DDDDDD;
overflow: hidden;
}
#demo2
{
width: 3200px;
height: 200px;
}
#demo2 li
{
display: block;
float: left;
width: 200px;
height: 200px;
}
#demo2 li a
{
color: blue;
display: block;
height: 160px;
line-height: 160px;
text-align: center;
margin: 20px;
background: #fff;
-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
}

a{
    text-decoration: none;
    color: inherit;
}

.openme {
    display: inline-block;
    color: #fff;
    background-color: #333;
    margin-top: 100px;
    padding: 10px;
    border: solid 1px #000;
    border-radius: 3px;
    cursor: pointer;
}


#menu{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    padding:0px;
    border: solid 1px #000;
    border-radius: 3px;
    background: -webkit-linear-gradient(top, #444 45%, #333 55%);
    background: -moz-linear-gradient(top, #444 45%, #333 55%);
}
#menu.show {
    opacity: 1;
    visibility: visible;
}

#menu a{
    float:left;
    margin: 7px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
    background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#fff), to(#edeff3));
    background-image: -moz-linear-gradient(top, #fff, #edeff3);
}
#arrow {
    position: absolute;
    bottom: -40px;
    /* Create the arrow using borders */
    border-style: solid;
    border-width: 20px;
    border-color: transparent;
    border-top-color: #333;
}

</style>

Reply all
Reply to author
Forward
0 new messages