FLasH3r/orientationchange.js

## orientationchange.js
/**
 * "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();
}

## orientationchange_example.html
<!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>

## orientationchange_style.css
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;
}
	/**
	* "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();
	}
	<!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>
	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;
	}