How to use Snap.js panels with jQuery Mobile?

Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.

http://jsfiddle.net/frank_o/vZBzD/3/

HTML:

<div data-role="page">
    <header data-role="header" data-position="fixed" data-tap-toggle="false">
        <a id="open-panel">Open panel</a>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <ul>
                    <li>Pretty row 1</li>
                    <li>Pretty row 2</li>
                    <li>...</li>
                </ul>
            </div>
        </div>
    </header>
    <div data-role="content" id="content" class="snap-content">
        <ul>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>...</li>
        </ul>
    </div>
</div>

JS:

$(document).on('pagecontainershow', function () {
    var snapper = new Snap({
        element: document.getElementById('content')
    });

    if (document.getElementById('open-panel')) {
        addEvent(document.getElementById('open-panel'), 'click', function () {
            snapper.open('left');
        });
    }
});

Solution

As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.

You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.

Working Demo

http://codepen.io/nitishdhar/pen/pIJkr

I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.

Code Structure - Different Menu on Both Sides

<body>
<!-- Snap Js Code Comes Here -->
    <div class="snap-drawers">
        <div class="snap-drawer snap-drawer-left">
            <div>
                <ul>
                    <li><a href="default.html">Default</a></li>
                    <li><a href="noDrag.html">No Drag</a></li>
                    <li><a href="dragElement.html">Drag Element</a></li>
                    <li><a href="rightDisabled.html">Right Disabled</a></li>
                    <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                </ul>
            </div>
        </div>
        <div class="snap-drawer snap-drawer-right">
            <ul>
                <li><a href="default.html">Default</a></li>
                <li><a href="noDrag.html">No Drag</a></li>
                <li><a href="dragElement.html">Drag Element</a></li>
                <li><a href="rightDisabled.html">Right Disabled</a></li>
            </ul>
        </div>
    </div>
<!-- Snap Js Code Ends Here -->

<!-- Jquery Mobile Code Comes Here -->
    <div data-role="page" id="content">
        <div data-role="header" data-position="fixed">
            <h4>&copy; Test App</h4>
        </div>
        <div role="main" class="ui-content">
            Some Page Content
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>&copy; Test App</h4>
        </div>
    </div>
</body>

Now apply some CSS as per your requirement of design, but you might need the z-index -

#content {
    background: #BFC7D8;
    z-index: 1;
}

Now initiate the snap nav -

var snapper = new Snap({
    element: document.getElementById('content')
});

This should work fine now.

Alternate Example with same Menu on both sides

Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -

<div class="snap-drawer snap-drawer-left">
    <div>
        <ul>
            <li><a href="default.html">Default</a></li>
            <li><a href="noDrag.html">No Drag</a></li>
            <li><a href="dragElement.html">Drag Element</a></li>
            <li><a href="rightDisabled.html">Right Disabled</a></li>
            <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
        </ul>
    </div>
</div>
<div class="snap-drawer snap-drawer-right"></div>

Now Add this to your CSS -

/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
    display: block;
    right: 0;
    left: auto;
}

/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
    display: none;
}

Working Demo - http://codepen.io/nitishdhar/pen/LliBa