Issue for iOS 7 status bar background-color and font color

[tatva]

I have fixed Overlay issue by setting Margin-top on the body. Now I want to set the body background-color Black and color(for font) white.
Note : My app is still under development, so only way to test this is simulator and ion.

Here is my code :

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    if (device.platform === 'iOS' && parseFloat(device.version) >= 7.0) {                   
        document.body.style.marginTop = "20px";
 $("body").css("background-color","black");
    }    
}

Is there any way to change font color of status bar without using Plugin? 

[Paul]

I believe there is a plist entry you can make to set the theme of the status bar on iOS 7, however to totally hide the iOS7 time/battery/bs status bar, you can make an edit in the .plist file. Add the below entry and this will hide the top status bar:

<key>UIStatusBarHidden</key><true/><key>UIViewControllerBasedStatusBarAppearance</key><false/>

[Steve]

Hi guys,

The only available colors you can choose between are black and white. They can be set by setting a default or a light style status bar. For this, you can use the StatusBar custom plugin as described here. Please, refer to the plugin documentation for the available methods. Make sure to call them within the deviceready event handler. With the plugin, you can even enable the deprecated BlackTnraslucent and BlackOpaque status bar style.

Please, note that you can only test this plugin on a physical device. You cannot test it in the simulator or in Icenium Ion.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Tatva]

Hello,

I have tried this link in which it is done using plugin : https://github.com/apache/cordova-labs/blob/plugins/statusbar/README.md

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    if (device.platform === 'iOS' && parseFloat(device.version) >= 7.0) {                    
    StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByName('green')
    }     
}

I am getting error in Statusbar.js like "module is not defined"

statusbar.js code : module.exports = StatusBar

[Steve]

Hello Tatva,

How did you download and install the plugin to your project? Most likely your plugin structure and installation of the plugin does not comply with the requirements of plugman. For your convenience, I've attached an archive with the StatuBar plugin, just follow the instructions from the following post: Import Custom Plugins.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Tatva]

Hello Steve,

Thanks for your quick response.
Still i am getting same error.

I also refer this link and downloaded the project : https://github.com/apache/cordova-labs/tree/plugins

I have changed in Index.js, onDeviceReady function like
 
onDeviceReady: function() {
        app.receivedEvent('deviceready');        
        navigator.splashscreen.hide();
    StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByName('green');
    },

than getting 2 below errors like ,
1)Uncaught ReferenceError: require is not defined statusbar.js:22
2)Uncaught TypeError: Cannot call method 'overlaysWebView' of undefined index.js:49


So i have changed statusbar.js like,
var argscheck = cordova.require('cordova/argscheck'),
    utils = cordova.require('cordova/utils'),
    exec = cordova.require('cordova/exec');

so i have resovled error by adding "cordova.require" it worked but is it the proper way??.

i have done above changes than i am getting error like:
Uncaught ReferenceError: module is not defined statusbar.js:70

[Steve]

Hi Tatva,

It sounds like you're trying to test the plugin in the Simulator or in Icenium ION. However as mentioned in our first reply:

You can only test this plugin on a physical device. You cannot test it in the simulator or in Icenium Ion.

You should build your app with dev or ad-hoc provision and deploy it on your device.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.