CODEWITHSUNDEEP
jquerycssjquery-mobileiscrollviewjquery-mobile-panel
headkit
headkit

Reputation: 3327

How to realize a scrollable content pane in jQuery Mobile 1.3

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!

Upvotes: 0

Views: 2890

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Solution

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.

Tested on

  1. Windows Firefox
  2. Windows Chrome
  3. Android Chrome
  4. Stack Samsung Galaxy S3 Android browser

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>

Final notes

If you want to find out more about iScroll + iScrollView, how they work with working examples then take a look at this article.

Upvotes: 2

Related Questions