Difference between revisions of "Team:Tec-Chihuahua"
| Line 894: | Line 894: | ||
| + | <body> | ||
| + | <div id="overlay"></div> | ||
| + | <div id="container"> | ||
| + | <div id="paper"> | ||
| + | <section id="header"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg"> | ||
| + | </section> | ||
| + | |||
| + | |||
| + | <body> | ||
| + | |||
| + | <!-- vanilla js --> | ||
| + | <!-- Accordion --> | ||
| + | <script> | ||
| + | var acc = document.getElementsByClassName("accordion"); | ||
| + | var i; | ||
| + | |||
| + | for (i = 0; i < acc.length; i++) { | ||
| + | acc[i].onclick = function() { | ||
| + | this.classList.toggle("active"); | ||
| + | var panel = this.nextElementSibling; | ||
| + | if (panel.style.maxHeight){ | ||
| + | panel.style.maxHeight = null; | ||
| + | } else { | ||
| + | panel.style.maxHeight = panel.scrollHeight + "px"; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | |||
| + | <!-- jQuery --> | ||
| + | <script> | ||
| + | $(document).ready(function(){ | ||
| + | $('#sidebar-btn').click(function(){ | ||
| + | $('#sidebar').toggleClass('visible'); | ||
| + | $('#overlay').toggleClass('active'); | ||
| + | $('#container').toggleClass('inactive'); | ||
| + | $('#sidebar-btn').toggleClass('inactive'); | ||
| + | }); | ||
| + | $('#overlay').click(function(){ | ||
| + | $('#sidebar').toggleClass('visible'); | ||
| + | $('#overlay').toggleClass('active'); | ||
| + | $('#container').toggleClass('inactive'); | ||
| + | $('#sidebar-btn').toggleClass('inactive'); | ||
| + | }); | ||
| + | |||
| + | $('#sidebar ul ul.sub').click(function(){ | ||
| + | $(this).children().toggleClass('active'); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <!-- hammer --> | ||
| + | <script> | ||
| + | delete Hammer.defaults.cssProps.userSelect; | ||
| + | var hammerPaper = new Hammer(document.getElementById('paper')); | ||
| + | var hammerOverlay = new Hammer(document.getElementById('overlay')); | ||
| + | |||
| + | hammerPaper.get('swipe').set({velocity:1}) | ||
| + | hammerOverlay.get('swipe').set({velocity:1}) | ||
| + | hammerPaper.on("swiperight", function(ev) { | ||
| + | $('#sidebar').addClass('visible'); | ||
| + | $('#overlay').addClass('active'); | ||
| + | $('#container').addClass('inactive'); | ||
| + | $('#sidebar-btn').addClass('inactive'); | ||
| + | }); | ||
| + | |||
| + | hammerOverlay.on("swipeleft", function(ev) { | ||
| + | $('#sidebar').removeClass('visible'); | ||
| + | $('#overlay').removeClass('active'); | ||
| + | $('#container').removeClass('inactive'); | ||
| + | $('#sidebar-btn').removeClass('inactive'); | ||
| + | |||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | </body> | ||
</p> | </p> | ||
Revision as of 01:00, 23 June 2017
×