GSW Browser: Status Bar

The StatusBar object provides some functions to customize the Android StatusBar.

These buttons show or hide the status bar. (Note: If it the status bar does not appear to be visible, press either the dark content or light content buttons below.)

These two buttons refer to the color of the content in the status bar

These buttons allow the modification of the background color.

About This Demo

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

Cordova Documenation

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

GSW.Tests.onDeviceReady = function() {
	// Cordova is now initialized. Have fun!
	console.log('Now running cordova-' + cordova.platformId + '@' + cordova.version);
    StatusBar.overlaysWebView(true);
    
	document.getElementById("styleDefault").addEventListener("click",  function() {
        StatusBar.styleDefault();
        StatusBar.backgroundColorByName("white");
	});
	document.getElementById("styleLightContent").addEventListener("click",  function() {
        StatusBar.styleLightContent(); 
        StatusBar.backgroundColorByName("black"); 
	});
	document.getElementById("backgroundColorByName").addEventListener("click",  function() {
        StatusBar.backgroundColorByName("red");            
	});
	document.getElementById("backgroundColorByHexString").addEventListener("click",  function() {
        StatusBar.backgroundColorByHexString("#32DE84");            
	});
	document.getElementById("hide").addEventListener("click",  function() {
        StatusBar.hide();            
	});
	document.getElementById("show").addEventListener("click",  function() {
        StatusBar.show();
        StatusBar.backgroundColorByName("white"); 
        StatusBar.styleDefault();
	});
    
}

document.addEventListener('deviceready', GSW.Tests.onDeviceReady, false);