Skip to content

Instantly share code, notes, and snippets.

@shazron

shazron/ios7.phonegap.cordova.js

Last active December 23, 2015 07:39
Show Gist options
  • Save shazron/6602131 to your computer and use it in GitHub Desktop.
Save shazron/6602131 to your computer and use it in GitHub Desktop.
Download ZIP
PhoneGap / Apache Cordova - top margin for iOS 7
Raw
ios7.phonegap.cordova.js
// Pre-requisites:
// 1. Device core plugin
// 2. Splashscreen core plugin (3.1.0)
// 3. config.xml: <preference name="AutoHideSplashScreen" value="false" />
// 4. config.xml: <preference name="DisallowOverscroll" value="true" />
function onDeviceReady() {
if (parseFloat(window.device.version) >= 7.0) {
document.body.style.marginTop = "20px";
// OR do whatever layout you need here, to expand a navigation bar etc
}
navigator.splashscreen.hide();
}
document.addEventListener('deviceready', onDeviceReady, false);
@laszlo-horvath
Copy link

Thanks for the ideas guys! Here is the solution I used and it's working on any kind of iOS 7 device:

var iOS7 = window.device 
                && window.device.platform 
                && window.device.platform.toLowerCase() == "ios"
                && parseFloat(window.device.version) >= 7.0;

if (iOS7) {
    // do the trick here
    // ### I used padding-top: 20px on the body element ###
}

@pjayanetti
Copy link

@mullican - Thank you. Your method worked well with jQuery Mobile based UI.

@darly
Copy link

darly commented Oct 4, 2013

@johnnylambada Thanks for that, I havent upgraded to 3.x and your solutions works like a charm for 2.x

@the-machinist
Copy link

thanks @mullican @johnnylambada

@VishalRJoshi
Copy link

If you never created the phonegap project using phonegap CLI then it is a real pain to install the plugins (Step 1 & 2) using it. Try using plugman instead. The command which worked for me to install the device core plugin was

plugman install --platform ios --project "/Users/Vishal/Documents/Dev/Celebrations/app/ios" --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

The project directory is the location of your xcode project which contains phonegap config.xml

@VishalRJoshi
Copy link

And to install the splashscreen plugin try

plugman install --platform ios --project "/Users/VishalRJoshi/Documents/Dev/Celebrations/app/ios" --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

@VishalRJoshi
Copy link

And since I was using Angular.js for my app the code which worked for me inside deviceready listener of cordova was as below:

if(navigator.userAgent.match(/iPhone OS 7/)) {
document.body.style.marginTop = "20px";
}

Hope this helps!!

@AndrewJHart
Copy link

thanks, simple & easy.

Copy link

ghost commented Jan 29, 2014

I would say just add a class on your body tag with JS if it is iOS7.

This will allow you to select with the iOS class in your CSS files and apply styles that are specific to iOS7. This way your styles are not buried in some JS file.

Makes it easier to find.

@garnold
Copy link

garnold commented Mar 25, 2014

Tying it all together, taking a stab at @jlongnbt 's suggestion, using Cordova merges:

  • Install the "Device" plugin:
cordova plugin add org.apache.cordova.device
  • Create a file merges/ios/css/platform.css with the contents:
body.iOS7 {
    -webkit-transform: translate3d(0, 20px, 0);
}
  • Create a file merges/ios/js/platform.js with the contents:
$(document).on('deviceready', function () {
    if (window.device && parseFloat(window.device.version) >= 7.0) {
        $('body').addClass('iOS7');
    }
});
  • Add references to platform.css and platform.js to www/index.html:
    <head>
        <!-- ... -->
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/platform.css"/>
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/platform.js"></script>
        <!-- ... -->
    </body>
  • Ship it!

@louisdoe
Copy link

Hi, it is possible to call the "core device plugin" in a Phonegap Build app ? Like this maybe :
gap:plugin name="org.apache.cordova.Device"
?

Thanks

@diaswrd
Copy link

diaswrd commented Jul 25, 2014

@louisdoe Yes, I'm using phonegap build to create my .apk and .ipa files with <gap:plugin name="org.apache.cordova.device" /> in my config.xml file. Without problems.

@luckywildcat
Copy link

I am injecting the style by adding this to the script in the head:
if(navigator.userAgent.match(/iP[ha][od].*OS 7/)) {
document.write('<style type="text/css">body{-webkit-transform: translate3d(0,20px,0)}</style>');
}
Problem is, the status bar then has a white background on ios7+, pre iOS7 it shows black background statusbar with light content. I want it to have a blue background on any iOS version.

I tried changing the XIB to blue background, but that won't work since it seams to move the entire view down 20px.

Thoughts? TIA

(It's using UIStatusBarStyleDefault)

@dmcg
Copy link

dmcg commented Aug 13, 2014

Good discussion here
http://blogs.telerik.com/appbuilder/posts/13-11-07/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7
but I couldn't get the referenced plugin to work

The webkit-transform knackers JQuery Mobile for me, as its footers are now off the bottom of the page. The best overall I've found for JQM is

    document.body.style.marginTop = "20px";
    $(".ui-header").css("margin-top", "20px");

@johnhight
Copy link

@dmcg Yes, using JQuery Mobile too, and the webkit-transform whites out the whole page, but your solution works great for me.

@identy
Copy link

identy commented Sep 30, 2015

body . padding -20px

by identy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment