Code Snippet > JS - jQuery

10 Useful Javascript Snippets for your mobile websites

After developing a few mobile websites in the past few months, I notice that I am reusing certain Javascript code in every project. Followings are the 10 Useful Javascript Snippets that I use for mobile sites. Note that some snippets require jQuery mobile framework.

JS - jQuery

Display a message when the page is viewed in landscape

var updateorientation = function (){
	var classname = '',
	top = 100;
	switch(window.orientation){
		case 0:
		classname += "normal";
		break;

		case -90:
		classname += "landscape";
		break;

		case 90:
		classname += "landscape";
		break;

	}

	if (classname == 'landscape') {
		if ($('#overlay').length === 0) {
			window.scrollTo(0, 1);
			$('body').append('<div id="overlay" style="width: 100%; height:' + $(document).height() + 'px"><span style="top: ' + top + 'px">Landscape view is not supported for this page.</span></div>');
		}
	} else {
		$('#overlay').remove();
	}
};

JS - jQuery

Usage:

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
	updateorientation();
}, false);

Source: http://eisabainyo.net/weblog/2011/06/23/10-useful-javascript-snippets-for-your-mobile-site/