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

7 posts, 0 answers
  1. tatva
    tatva avatar
    1 posts
    Member since:
    Oct 2013

    Posted 13 Nov 2013 Link to this post

    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? 
  2. Paul
    Paul avatar
    56 posts
    Member since:
    Jan 2006

    Posted 13 Nov 2013 Link to this post

    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/>
  3. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 14 Nov 2013 Link to this post

    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.
  4. Tatva
    Tatva avatar
    4 posts
    Member since:
    Nov 2013

    Posted 21 Nov 2013 Link to this post

    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


  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 21 Nov 2013 Link to this post

    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.
  6. Tatva
    Tatva avatar
    4 posts
    Member since:
    Nov 2013

    Posted 22 Nov 2013 Link to this post

    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


  7. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 22 Nov 2013 Link to this post

    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.
Back to Top