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

Learn More

How to create a toggle button for a Snap.js mobile shelf [JavaScript]

1582 Runs 4486 Views 2143 Copies


amir_canteetu 3

published 4 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">
                    <h4>Other Demos</h4>
                        <li><a href="index.php">Toggle Button Demo</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>
                <h1>Demo With Toggle Button</h1>
        <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')

            /* Get reference to toggle button, the html element with ID "open-left" */
            var myToggleButton = document.getElementById('open-left')

            /* Add event listener to our toggle button */
            myToggleButton.addEventListener('click', function() {

                if (snapper.state().state == "left") {
                } else {


            /* 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).