Last active
December 21, 2015 20:49
-
-
Save bivald/6364049 to your computer and use it in GitHub Desktop.
Hide a fixed element (navigation/menu) on zoom (so iOS doesn't distort or alter the menu). iOS could use gesture as well, but touch *should* work better for Android as well. UPDATE: Haven't tried Android, so added an if iOS check
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Never Denim</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="background: red; width: 100%; position: fixed; top: 0px; left: 0px; right: 0px; height: 60px;" id="fixed"></div> | |
| <div style="height: 3000px; background: grey; display: block;">asd</div> | |
| <script src="http://code.jquery.com/jquery-latest.min.js" | |
| type="text/javascript"></script> | |
| <script> | |
| var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent ); | |
| if(iOS) { | |
| window.addEventListener('touchstart', gest, false); | |
| window.addEventListener('touchend', gest, false); | |
| window.addEventListener('touchmove', gest, false); | |
| update = _.throttle(function() { | |
| if( document.documentElement.clientWidth == window.innerWidth ) { | |
| $('#fixed').show(); | |
| }else{ | |
| $('#fixed').hide(); | |
| } | |
| }, 50); | |
| function gest(e) { | |
| if ( e.type == 'touchend' ) { | |
| update(); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In iOS 7 this makes the page not load at all.