Back to Demos List

GSW Browser: Screen Orientation


This page demonstrates the ability to lock the screen in either portrait mode or landscape mode.
Note: This effects all of the devices connections using cordova.












About This Demo

This demo is using the cordova-plugin-screen-orientation plugin. For more information click here:


var GSW = GSW || {};
GSW.Tests = GSW.Tests || {};

GSW.Tests.onDeviceReady = function() {
	window.addEventListener("orientationchange", function() {
		console.log(screen.orientation.type);
	});
	GSW.Tests.orientationChange = function(mode) {
	    let portrait = document.getElementById("portrait");
	    let revPortrait = document.getElementById("revPortrait");
	    let landscape = document.getElementById("landscape");
	    let revLandscape = document.getElementById("revLandscape");
		let status = document.getElementById("currOrientation");
		portrait.disabled = false;
	    revPortrait.disabled = false;
		landscape.disabled = false;
		revLandscape.disabled = false;
        if(mode == 0){
			portrait.disabled = true;
			screen.orientation.lock('portrait-primary');
			status.innerHTML = 'Current Orientation Is: portrait-primary ';
        }
        else if(mode == 1){
			revPortrait.disabled = true;
			screen.orientation.lock('portrait-secondary');
			status.innerHTML = 'Current Orientation Is: portrait-secondary';
        }
        else if(mode == 2){
			landscape.disabled = true;
		    screen.orientation.lock('landscape-primary');
		    status.innerHTML = 'Current Orientation Is: landscape-primary';
        }
        else if(mode == 3){
			revLandscape.disabled = true;
		    screen.orientation.lock('landscape-secondary');
		    status.innerHTML = 'Current Orientation Is: landscape-secondary';
        }
        else{
		    let status = document.getElementById("currOrientation");
		    status.innerHTML = "Current Orientation Is: Unlocked";
           screen.orientation.unlock();
        }
	}
	document.getElementById("portrait").addEventListener("click", function(){GSW.Tests.orientationChange(0)});
	document.getElementById("landscape").addEventListener("click", function(){GSW.Tests.orientationChange(2)});
	document.getElementById("revPortrait").addEventListener("click", function(){GSW.Tests.orientationChange(1)});
	document.getElementById("revLandscape").addEventListener("click", function(){GSW.Tests.orientationChange(3)});
	document.getElementById("unlock").addEventListener("click", function(){GSW.Tests.orientationChange(4)});
}
document.addEventListener('deviceready', GSW.Tests.onDeviceReady, false);