A Pen by Joe Watkins on CodePen.
Created
February 17, 2014 19:53
-
-
Save joe-watkins/9057763 to your computer and use it in GitHub Desktop.
A Pen by Joe Watkins.
This file contains hidden or 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
| <div class="container"> | |
| <h1>IOS7 - Status Bar - Web App Hack</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quo iure accusantium autem fugit nesciunt nisi ad officiis est dolorum quisquam similique error placeat laborum fugiat porro vero excepturi quaerat itaque sit quas aliquam numquam tempore. Mollitia nobis excepturi vero praesentium libero velit nihil. Vel vero aperiam commodi ratione officiis similique sunt autem doloribus delectus. Voluptatum iste unde iusto eveniet molestiae asperiores dolor est officiis nam enim a deleniti minima repudiandae nobis praesentium tempora sequi? Deserunt veniam tenetur adipisci minima laudantium! Tenetur perspiciatis rerum voluptates dolorem hic cum magni corporis nobis in asperiores optio quo incidunt id sed eius deleniti!</p> | |
| </div> |
This file contains hidden or 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
| function ios7StatusBarBump(detectedClass,statusBarElementClass,nonIOS7test) { | |
| var userAgentStr = /(iPad|iPhone);.*CPU.*OS 7_\d/i, | |
| statusBarHtml = "<span class="+statusBarElementClass+"></span>"; | |
| if(navigator.userAgent.match(userAgentStr)){ // is ios7 | |
| addElement(detectedClass,statusBarHtml); | |
| } | |
| if(nonIOS7test == 1){ | |
| addElement(detectedClass,statusBarHtml); | |
| } | |
| function addElement(detectedClass,statusBarHtml){ | |
| $('body').addClass(detectedClass).prepend(statusBarHtml); | |
| } | |
| } | |
| // pass class for body, added element's class, 0 or 1 | |
| // 1 = for non ios7 testing | |
| ios7StatusBarBump('ios7-detected','status-bar-bump',0); |
This file contains hidden or 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
| .ios7-detected > div { | |
| margin-top:20px; | |
| } | |
| .ios7-detected .status-bar-bump { | |
| z-index: 9999; | |
| height:20px; | |
| position: fixed; | |
| top:0px; | |
| left:0px; | |
| right:0px; | |
| background:rgba(0,0,0,1); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment