How to realize a scrollable content pane in jQuery Mobile 1.3

Question

How to realize a scrollable content pane in jQuery Mobile 1.3

2.8k Views Asked by headkit At 20 October 2024 at 12:57

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!

Original Q&A

There are 1 best solutions below

**Gajotres** · Answer 1

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

Windows Firefox
Windows Chrome
Android Chrome
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.

How to realize a scrollable content pane in jQuery Mobile 1.3

There are 1 best solutions below

Solution

Tested on

Final notes

Related Questions in JQUERY

Related Questions in CSS

Related Questions in JQUERY-MOBILE

Related Questions in ISCROLLVIEW

Related Questions in JQUERY-MOBILE-PANEL

Trending Questions

Popular # Hahtags

Popular Questions