Mobile Device Orientation Change detection using Javascript / Jquery ~ Web CodeHelpers

Mobile Device Orientation Change detection using Javascript / Jquery

Mobile Device Orientation Change detection using Javascript / Jquery



orientationchange Event in javascript

This method is what you would expect from a mobile API; a simple orientationchange event on the window:
// Listen for orientation changes 
window.addEventListener("orientationchange", function() { 
// Announce the new orientation number 
alert(window.orientation); 
}, false);
 During these changes, the window.orientation property may change. 
A value of 
0 means portrait view, 
-90 means a the device is landscape rotated to the right, and 
90 means the device is landscape rotated to the left.
 
Example : 
<script>           
  function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
</script>
 

orientationchange Event in jQuery
This method is what you would expect from a mobile API; a simple orientationchange event on the window:
// Listen for orientation changes 
$(window).on("orientationchange",function(){
  alert("The orientation has changed!"); });

0 comments :

Post a Comment

Subscribe updates via Email