I use a grid to simulate some kind of splitview where I want to use the left side together with a listview to show some navigation buttons and the right side to show some content.
now the listview is really long and I want to have it scrollable. so the listview pane should be scrollable while the content pane stays in full screen height (or later gets its own scrollable content pane). how is this possible with jQM? thnx!
What you want can't be done that easily. No matter on what platform are you working it is almost impossible to create 2 scrollable panes and that each of them works separately, specially on mobile devices. But as always there's a workaround.
Working example: http://example.gajotres.net/iscrollview/
I can't create you a jsFiddle because iscrollview don't work in that environment.
If you already dont know, iscrollview is jQuery mobile plugin create as a wrapper around iscroll. Iscroll is plugin create to give a scrollable content to mobile browsers.
This implementation uses fixed floating right panel. While rest of the page is scrollable this panel will give you an illusion like it is fixed on a right side of the page.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />
<style>
#iscroll-listview {
margin: 0 !important;
}
.right-pane {
position: fixed;
width: 50%;
height: 100%;
background: red;
top:0;
color: white;
margin-top: 40px;
}
</style>
<script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>
<script src="http://www.fajrunt.org/js/iscroll.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" class="index-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
<h1>INDEX PAGE</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" >
<div class="example-wrapper" data-iscroll>
<p>some content that will be scrolled</p>
<p>Some more content that will be scrolled</p>
<ul data-role="listview" id="iscroll-listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
</div>
</div>
<div class="ui-block-b">
<div class="right-pane">
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
</div>
</div>
</div><!-- /grid-a -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
<h1>My Footer</h1>
</div>
</div>
</body>
</html>
If you want to find out more about iScroll + iScrollView, how they work with working examples then take a look at this article.
