jQM - iScrollView example 1

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css">
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css">
<script src="http://example.gajotres.net/iscrollview/iscroll.js"></script>
<script src="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js"></script>
<div data-role="page" id="index">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h1>Index page</h1>
    </div>
    
    <div data-role="content">
        <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div data-role="popup" id="popupBasic">
            <div class="header" data-role="header">
                <h1>Products</h1>
            </div>
            <div class="content" data-role="content" data-iscroll>
                <ul data-role="listview">
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>                
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
  ...

CSS

.ui-content {
    padding: 0 !important;
}

.ui-listview {
    margin: 0 !important;
}

div.iscroll-scroller {
    width: 100% !important;
}

.ui-popup .ui-content {
    height: 150px !important;
}