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]

1571 Runs 4439 Views 2134 Copies
Saved

Saved

amir_canteetu 3

amir_canteetu
published 3 years ago

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Snap.js</title>
        <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" />
    </head>
    <body>
        /*Define div to be revealed when content div is dragged */
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <h4>Other Demos</h4>
                    <ul>
                        <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>
                    </ul>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>

        /* draggable pane */
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Demo With Toggle Button</h1>
            </div>
        </div>
        <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") {
                    snapper.close();
                } else {
                    snapper.open('left');
                }

            });

            /* 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");


        </script>

    </body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).