Skip to content

Instantly share code, notes, and snippets.

@FirstVertex

FirstVertex/hScrollDemo.html

Last active October 31, 2017 00:26
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save FirstVertex/4440841 to your computer and use it in GitHub Desktop.
Save FirstVertex/4440841 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrates horizontal scrolling with jQueryMobile iScrollView
Raw
hScrollDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>iscrollview Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link href="stylesheets/jquery.mobile-1.1.1.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/demo.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="javascripts/demo.js" type="text/javascript"></script>
<script src="javascripts/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="javascripts/iscroll.js" type="text/javascript"></script>
<script src="javascripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="javascripts/pull-example.js" type="text/javascript"></script>
<style type="text/css">
.hscroll1 {
white-space:nowrap;
position:absolute;
background-color:#ffffc0;
padding: 0.44em;
}
.hWrap1 {
min-height:3em;
background-color:#eee;
}
.hContent1 {
padding: 0.44em !important
}
.hContent1 ol {
padding:0;
margin:0;
}
.hContent1 ol li {
display:inline-block;
padding:0 0.44em;
margin:0;
}
</style>
</head>
<body>
<div class="list-demo-page" data-role="page">
<div data-id="my-persistent-header" data-position="fixed" data-role="header" data-tap-toggle="false">
<h1>List</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" style="margin-top:0;border-top:0;">
<a data-role="button" data-theme="a" href="index.html" rel="external">1.0.1 </a>
<a data-role="button" data-theme="b" href="index_11.html" rel="external">1.1.1</a>
</div>
</div>
<div data-iscroll='{"hScroll":true,"vScroll":false,"resizeEvents":"orientationchange",
"scrollerClass":"hscroll1","wrapperClass":"hWrap1","scrollerContentClass":"hContent1",
"resizeWrapper":false}' data-role="content"><ol><li>
<a href="inset_11.html">Item 1 sint ut aut dolore</a></li><li>
<a href="inset_11.html">Item 2 officia consequatur numquam ducimus</a></li><li>
<a href="inset_11.html">Item 3 esse accusantium rerum maxime</a></li><li>
<a href="inset_11.html">Item 4 consectetur aut modi sunt</a></li><li>
<a href="inset_11.html">Item 5 ut officia tenetur quo</a></li><li>
<a href="inset_11.html">Item 6 in quaerat laudantium omnis</a></li><li>
<a href="inset_11.html">Item 7 officiis molestias placeat qui</a></li><li>
<a href="inset_11.html">Item 8 fugiat maiores ullam eaque</a></li><li>
<a href="inset_11.html">Item 9 eos quia aspernatur consequatur</a></li><li>
<a href="inset_11.html">Item 10 rerum nihil enim delectus</a></li><li>
<a href="inset_11.html">Item 11 ad dolorum debitis laboriosam</a></li><li>
<a href="inset_11.html">Item 12 voluptatum ut sunt debitis</a></li><li>
<a href="inset_11.html">Item 13 et tempora autem et</a></li><li>
<a href="inset_11.html">Item 14 et cum qui reprehenderit</a></li><li>
<a href="inset_11.html">Item 15 nostrum ut est dolorem</a></li><li>
<a href="inset_11.html">Item 16 quod similique labore autem</a></li><li>
<a href="inset_11.html">Item 17 voluptatibus vel facere enim</a></li><li>
<a href="inset_11.html">Item 18 consectetur voluptas aut inventore</a></li><li>
<a href="inset_11.html">Item 19 magni nobis dolores soluta</a></li><li>
<a href="inset_11.html">Item 20 adipisci et sint suscipit</a></li><li>
<a href="inset_11.html">Item 21 neque voluptas consequuntur voluptates</a></li><li>
<a href="inset_11.html">Item 22 ducimus ducimus ut nulla</a></li><li>
<a href="inset_11.html">Item 23 fuga suscipit ab culpa</a></li><li>
<a href="inset_11.html">Item 24 autem laudantium animi officiis</a></li><li>
<a href="inset_11.html">Item 25 eum itaque accusantium dolorum</a></li><li>
<a href="inset_11.html">Item 26 iste nisi error rerum</a></li><li>
<a href="inset_11.html">Item 27 cupiditate sit consequatur ullam</a></li><li>
<a href="inset_11.html">Item 28 delectus esse maiores velit</a></li><li>
<a href="inset_11.html">Item 29 aut neque esse voluptatum</a></li><li>
<a href="inset_11.html">Item 30 sunt esse et aut</a></li><li>
<a href="inset_11.html">Item 31 sed repudiandae mollitia ipsa</a></li><li>
<a href="inset_11.html">Item 32 nobis omnis cumque voluptates</a></li><li>
<a href="inset_11.html">Item 33 possimus eos iure ut</a></li><li>
<a href="inset_11.html">Item 34 aut rerum sit ratione</a></li><li>
<a href="inset_11.html">Item 35 in quisquam corporis nihil</a></li><li>
<a href="inset_11.html">Item 36 eum et perspiciatis modi</a></li><li>
<a href="inset_11.html">Item 37 provident ex et aut</a></li><li>
<a href="inset_11.html">Item 38 voluptates necessitatibus id iste</a></li><li>
<a href="inset_11.html">Item 39 excepturi est aliquid cumque</a></li><li>
<a href="inset_11.html">Item 40 non veniam qui molestiae</a></li><li>
<a href="inset_11.html">Item 41 cupiditate eligendi similique quibusdam</a></li><li>
<a href="inset_11.html">Item 42 alias pariatur sit sed</a></li><li>
<a href="inset_11.html">Item 43 quasi quia error voluptas</a></li><li>
<a href="inset_11.html">Item 44 aut omnis excepturi odio</a></li><li>
<a href="inset_11.html">Item 45 accusamus cumque possimus atque</a></li><li>
<a href="inset_11.html">Item 46 ducimus consequatur quia sit</a></li><li>
<a href="inset_11.html">Item 47 velit velit ducimus nulla</a></li><li>
<a href="inset_11.html">Item 48 ut iure mollitia tempore</a></li><li>
<a href="inset_11.html">Item 49 alias eum est distinctio</a></li><li>
<a href="inset_11.html">Item 50 nihil est sed modi</a></li></ol></div>
<div data-id="my-persistent-footer" data-position="fixed" data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a class="ui-btn-active ui-state-persist" href="index_11.html">List</a>
</li>
<li>
<a href="inset_11.html">Inset</a>
</li>
<li>
<a href="pull_11.html">Pull</a>
</li>
<li>
<a href="shortpull_11.html">Short</a>
</li>
<li>
<a href="form_11.html">Form</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment