Speed up development with full-stack environments for every branch.

Learn More

How to create a mobile shelf using Snap.js [JavaScript]

2360 Runs 5735 Views 2980 Copies


amir_canteetu 3

published 3 years ago

<html lang="en-US">
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="styles/snap.css" />
        <link rel="stylesheet" type="text/css" href="styles/demo.css" />
        /*Define div to be revealed when content div is dragged */
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                        <li><a href="index.php">Default</a></li>
                        <li><a href="noDrag.php">No Drag</a></li>
                        <li><a href="dragElement.php">Drag Element</a></li>
                        <li><a href="rightDisabled.php">Right Disabled</a></li>
                        <li><a href="hyperextend.php">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.php">Skinny Threshold</a></li>
                        <li><a href="toggles.php">Toggles</a></li>
                        <li><a href="expand.php">Expanding</a></li>
                        <li><a href="settings.php">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
            <div class="snap-drawer snap-drawer-right"></div>

        /* draggable pane */
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
        /* include the Snap.js file in a script tag */
        <script type="text/javascript" src="js/snap.js"></script>
        <script type="text/javascript">

            /* instantiate snapper object, and define pane to slide left or right */
            var snapper = new Snap({
                element: document.getElementById('content')

            /*  define cross-browser event handler. */
            var addEvent = function addEvent(element, eventName, func) {
                if (element.addEventListener) {
                    return element.addEventListener(eventName, func, false);
                } else if (element.attachEvent) {
                    return element.attachEvent("on" + eventName, func);

            /* when the element with id 'open-left' is clicked, use the public snapper.open() method to slide the pane rightward, to reveal the LEFT menu */
            addEvent(document.getElementById('open-left'), 'click', function() {

            /* Prevent Safari opening links when viewing as a Mobile App */
            (function(a, b, c) {
                if (c in b && b[c]) {
                    var d, e = a.location,
                            f = /^(a|html)$/i;
                    a.addEventListener("click", function(a) {
                        d = a.target;
                        while (!f.test(d.nodeName))
                            d = d.parentNode;
                        "href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
                    }, !1)
            })(document, window.navigator, "standalone");


Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).