Created
August 7, 2012 16:32
-
-
Save jlubean/3287069 to your computer and use it in GitHub Desktop.
"orientationchange" Event Polyfill
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
| /** | |
| * "orientationchange" Event Polyfill | |
| * by Jason LuBean | |
| * | |
| * This polyfill allows you to use "window.orientation" | |
| * and to bind to the "orientationchange" event. It has | |
| * no dependencies on any libraries, but has support for | |
| * using jQuery to bind to the "orientationchange" event. | |
| * | |
| * Because IE8 does not allow you to use attachEvent / | |
| * fireEvent for custom events, you have to set the | |
| * window.onorientationchange function: | |
| * | |
| * function handler() { | |
| * //Do something useful when orientation changes | |
| * } | |
| * | |
| * if(window.addEventListener) { | |
| * window.addEventListener("orientationchange", | |
| * handler, false); | |
| * } else { | |
| * window.onorientationchange = handler; | |
| * } | |
| * | |
| * If you use jQuery: | |
| * | |
| * $(window).on('orientationchange', handler); | |
| */ | |
| if(typeof window.orientation === 'undefined') { | |
| var lastOrientation = -1, | |
| orientationEventType = "orientationchange", | |
| resizeEventType = "resize"; | |
| // Set orientation to landscape (90) if width > height | |
| // Set orientation to portait (0) if width <= height | |
| // Use document.body.offsetWidth for IE | |
| function getOrientation() { | |
| var ornttn = | |
| window.outerWidth > 0 ? | |
| (window.outerWidth > window.outerHeight ? 90 : 0) : | |
| (document.body.offsetWidth > document.body.offsetHeight ? 90 : 0); | |
| return ornttn; | |
| } | |
| // Dispatch/fire the "orientationchange" event when the | |
| // width==height boundary is crossed. | |
| function handleResize() { | |
| var evt; | |
| window.orientation = getOrientation(); | |
| if(window.orientation != lastOrientation) { | |
| lastOrientation = window.orientation; | |
| if(document.createEvent) { | |
| evt = document.createEvent("HTMLEvents"); | |
| evt.initEvent(orientationEventType, true, true); | |
| window.dispatchEvent(evt); | |
| } else { | |
| evt = document.createEventObject(); | |
| evt.eventType = orientationEventType; | |
| evt.eventName = orientationEventType; | |
| if(window[orientationEventType]) { | |
| window[orientationEventType](); | |
| } else if(window['on'+orientationEventType]) { | |
| window['on'+orientationEventType](); | |
| } else if(typeof jQuery == 'function') { | |
| $(window).trigger(orientationEventType); | |
| } | |
| } | |
| } | |
| } | |
| //Listen for the window "resize" event | |
| if(window.addEventListener) | |
| window.addEventListener( resizeEventType, handleResize, false); | |
| else | |
| window["on"+resizeEventType] = handleResize; | |
| //Initialize the orientation | |
| window.orientation = getOrientation(); | |
| } |
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> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <link rel="stylesheet" href="orientationchange-style.css"> | |
| <script src="orientationchange.js"></script> | |
| </head> | |
| <body> | |
| <div id="floater"></div> | |
| <div id="orientation-change"> | |
| orientationchange | |
| </div> | |
| </body> | |
| </html> |
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
| html, body { | |
| height: 100%; | |
| margin: 0px; | |
| background-color: white; | |
| } | |
| #floater { | |
| height:50%; margin-bottom:-10px; position:relative; | |
| } | |
| #orientation-change { | |
| font-size: 20px; | |
| color: black; | |
| text-align: center; | |
| width: 100%; | |
| height: 20px; | |
| display: block; | |
| } | |
| .portrait { | |
| background-color: #33ff99; | |
| } | |
| .landscape { | |
| background-color: #3399ff; | |
| } | |
| div { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| -o-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment