Run JavaScript Code on Orientation Change

Language

JavaScript (Client)

Tags

Author

Simon McLoughlin

Submitted on

February 14, 2012 at 2:02 AM

Rating

Downloads

134

Notes

This snippet allows you to run javascript when the user turns the device. The code is using this to show how to have a bar hover along the bottom of the page (mobile devices can't use position: fixed; bottom:0px; as this adds it to the bottom of the content, with this javascript you can float something permanently at the bottom of the screen instead of at the end of a list of data).

dojo.addOnLoad(function() 
{ 
	//run once on start up and then on each onorientationchange
	var orientation = window.orientation;
	
	/*
		orientation values:
		0 	portrait mode
    		90:  	landscape mode with the screen turned to the left
    		-90: 	landscape mode with the screen turned to the right
    	*/

	var height = window.innerHeight; 
	var div = dojo.byId('footerDiv'); 
	height -= 50; 
	div.style.marginTop = height.toString() + "px";

	window.onorientationchange = function() 
	{ 	
		console.log(" Height: " + window.innerHeight);


		var height = window.innerHeight; 
		var div = dojo.byId('footerDiv'); 
		height -= 50; 
		div.style.marginTop = height.toString() + "px"; 
	} 
});

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...