<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>The class names demo shows how you can utilize the classess added by Snap.js to adjust hidden content. In this case, we're showing the same menu on both sides of the app via CSS and classess.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"style="opacity:0.8;"><divid="toolbar"><ahref="#"id="open-left"></a><h1>Class Names</h1></div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content')});</script><script type="text/javascript"src="../assets/demo.js"></script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>The Default demo shows basic Snap.js functionality</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"><divid="toolbar"><ahref="#"id="open-left"></a><h1>Default</h1></div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content')});</script><script type="text/javascript"src="../assets/demo.js"></script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
<ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a>
<p>Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
<inputtype="text"id="search"placeholder="Search for Things">
</div>
<divclass="drawer-inner">
<h3>Snap.js</h3>
<divclass="demo-social">
<ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a>
<p>Expanding is when the app disappears completely and the entire app's drawer takes up the usable space. Good for searching</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>The Default demo shows basic Snap.js functionality</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"><divid="toolbar"><ahref="#"id="open-left"></a><h1>No Hyperextension</h1></div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content'),hyperextensible:false});</script><script type="text/javascript"src="../assets/demo.js"></script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
<ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a>
<p>Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<divclass="content">
<divclass="content-padded">
<pclass="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resorces:</p>
<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>This demo has the menu on the right side disabled</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"><divid="toolbar"><ahref="#"id="open-left"></a><h1>Right Disabled</h1></div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content'),disable:'right'});</script><script type="text/javascript"src="../assets/demo.js"></script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>You can update the settings of an instantiated snap object by calling the settings method.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"><divid="toolbar"><ahref="#"id="open-left"></a><h1>Updatable Settings</h1></div><divstyle="padding-top: 50px"><divclass="opt"><p>Change Speed: </p><selectdata-key="speed"><optionvalue="0.3">Normal</option><optionvalue="1">Slow</option><optionvalue="0.2">Fast</option></select></div><divclass="opt"><p>Change Easing</p><selectdata-key="easing"><optionvalue="ease">ease</option><optionvalue="linear">linear</option><optionvalue="cubic-bezier(0.175, 0.885, 0.320, 1.275)">easeOutBack (Bezier Curve)</option></select></div><divclass="opt"><p>Disable</p><selectdata-key="disable"><optionvalue="none">None</option><optionvalue="left">Left</option><optionvalue="right">Right</option></select></div><divclass="opt"><p>And More!</p></div></div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content')}),updateSnap=function(){varkey=this.dataset.key,val=this.value,opts={};switch(key){case'speed':opts.transitionSpeed=parseFloat(val,10);break;case'easing':opts.easing=val;break;case'disable':opts.disable=val;break;}snapper.settings(opts);},selects=document.getElementsByTagName('select'),i;for(i=0;i<selects.length;i++){selects[i].addEventListener('change',updateSnap);}</script><script type="text/javascript"src="../assets/demo.js"></script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>You can define the width of your app's sliding space</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"><divid="toolbar"><ahref="#"id="open-left"></a><h1>Skinny Threshold</h1></div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content'),maxPosition:100,minPosition:-100});</script><script type="text/javascript"src="../assets/demo.js"></script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
<!DOCTYPE HTML><htmllang="en-US"><head><title>Snap.js</title><metahttp-equiv="x-ua-compatible"content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-touch-fullscreen"content="yes"><linkrel="stylesheet"type="text/css"href="../../snap.css"/><linkrel="stylesheet"type="text/css"href="../assets/demo.css"/></head><body><divclass="snap-drawers"><divclass="snap-drawer snap-drawer-left"><div><h3>Snap.js</h3><divclass="demo-social"><ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en"data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript"data-url="http://jakiestfu.github.com/Snap.js/"data-count="none"data-via="jakiestfu">Tweet</a><ahref="https://twitter.com/jakiestfu"class="twitter-follow-button"data-show-count="false"data-lang="en">Follow @jakiestfu</a><iframesrc="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Snap.js&type=watch&count=true"allowtransparency="true"frameborder="0"scrolling="0"width="120"height="20"></iframe></div><h4>Demos</h4><ul><li><ahref="default.html">Default</a></li><li><ahref="noDrag.html">No Drag</a></li><li><ahref="dragElement.html">Drag Element</a></li><li><ahref="rightDisabled.html">Right Disabled</a></li><li><ahref="hyperextend.html">Hyperextension Disabled</a></li><li><ahref="skinnyThreshold.html">Skinny Threshold</a></li><li><ahref="toggles.html">Toggles</a></li><li><ahref="classNames.html">Class Names</a></li><li><ahref="expand.html">Expanding</a></li><li><ahref="settings.html">Settings</a></li><li><ahref="ratchet/template.html">Ratchet</a></li></ul><div><p>Toggles are easy to create. Snap.js gives you the state of the pane and allows you to make decisions simply.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p></div></div></div><divclass="snap-drawer snap-drawer-right"></div></div><divid="content"class="snap-content"><divid="toolbar"><ahref="#"id="open-left"></a><h1>Toggles</h1></div><divclass="toggler"id="ol">Open Left</div><divclass="toggler"id="or">Open Right</div></div><script type="text/javascript"src="../../snap.js"></script><script type="text/javascript"src="../assets/demo.js"></script><script type="text/javascript">varsnapper=newSnap({element:document.getElementById('content')});addEvent(document.getElementById('ol'),'click',function(){snapper.open('left');});addEvent(document.getElementById('or'),'click',function(){snapper.open('right');});</script><script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></body></html>
/* 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;}/* Show the "Drag" background in the demo */#content{background:#BFC7D8url(drag.png)center75%no-repeat;}/* Demo toolbar styles */#toolbar{background:#536ea7;border-bottom:1pxsolid#111b32;position:absolute;top:0;right:0;left:0;width:auto;height:44px;}#toolbarh1{color:#fff;font-size:16px;line-height:22px;text-align:center;text-shadow:0-1px0rgba(0,0,0,0.8);position:absolute;top:0;right:44px;left:44px;width:auto;height:44px;}#open-left{background:url(open.png)centercenterno-repeat;display:block;width:44px;height:44px;}/* Show the red "No Drag" box in the demo */#no-drag,#do-drag{position:absolute;top:50%;left:50%;width:50%;height:100px;margin-left:-25%;margin-top:-50px;background:red;color:#FFF;text-align:center;line-height:100px;}#do-drag{background:green;}/* Styles for the social buttons in the demo */.demo-social{padding:015px;}/* Show the translucent white "Toggle" boxes in the demo */.toggler{width:80%;background:rgba(255,255,255,0.5);margin:0auto;position:relative;top:70px;padding:20px;margin-bottom:20px;text-align:center;}/* Styles for expanding "Search" input in the "Expanding" demo */.search{padding-bottom:10px;border-bottom:1pxsolidrgba(0,0,0,0.2);-webkit-box-shadow:01px0rgba(255,255,255,0.1);-moz-box-shadow:01px0rgba(255,255,255,0.1);box-shadow:01px0rgba(255,255,255,0.1);}#search{height:30px;width:87%;margin:7px7px07px;background:linear-gradient(#414A5A,#4C5464);background:-webkit-linear-gradient(#414A5A,#4C5464);padding-left:15px;border:1pxsolid#222936;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;-webkit-box-shadow:inset01px2px-1pxrgba(0,0,0,0.5),01px2px-1pxrgba(255,255,255,0.4);-moz-box-shadow:inset01px2px-1pxrgba(0,0,0,0.5),01px2px-1pxrgba(255,255,255,0.4);box-shadow:inset01px2px-1pxrgba(0,0,0,0.5),01px2px-1pxrgba(255,255,255,0.4);}#search:focus{outline:none;border-color:#151515;}/* Styles for fading out the drawer content in the "Expanding" demo */.drawer-inner{-webkit-transition:opacity0.3sease;-moz-transition:opacity0.3sease;-ms-transition:opacity0.3sease;-o-transition:opacity0.3sease;transition:opacity0.3sease;}.snapjs-expand-left.drawer-inner,.snapjs-expand-right.drawer-inner{opacity:0;}/* Styles for the "Settings" demo */.opt{padding:20px;border-bottom:1pxsolidrgba(0,0,0,0.1);}.optp{font-weight:bold;margin-top:0;margin-bottom:5px;color:#222;color:rgba(0,0,0,0.6);}/* Default demo styles */.snap-content{background:#BFC7D8;}.snap-drawers{background:#323949;}.snap-drawer{background:#323949;color:#eee;}.snap-drawerh3{font-size:36px;font-weight:normal;margin:15px;}.snap-drawerh4{padding:15px;border-top:1pxsolidrgba(255,255,255,0.1);margin-bottom:0;}.snap-drawerul{padding:0;margin:0;list-style-type:none;}.snap-drawerli>a{display:block;border-bottom:1pxsolidrgba(0,0,0,0.1);border-top:1pxsolidrgba(255,255,255,0.1);padding:15px;font-weight:bold;text-shadow:01px0#000;text-decoration:none;color:#ccc;text-indent:20px;}.snap-drawerp{opacity:0.5;padding:15px;font-size:12px;}