3oh2 // john boxall

Styling buttons in MobileSafari with -webkit-appearance

MobileSafari happily adds a dash of godawful to inputs and buttons. By settings -webkit-appearance: button and -webkit-border-radius: 0 you can take back control of your buttons and win the day.

.nice {
 /* IF YOU FORGET THESE THEN NOTHING GOOD CAN COME OF THIS */
 -webkit-appearance: button; 
 -webkit-border-radius: 0;
 /* Add your secret sauce below. * /
 background: #000; 
 color: #fff; 
 font-weight: bold; 
 padding: 4px; 
 margin-top: 16px;
}

UIWebView DataDetectors

The bane of my existence.

Under some circumstances, UIWebView seems to want to ignore format-detection. Teach it a lesson with this JavaScript:

setTimeout(function clearDataDetectors() {
    var data = document.querySelectorAll('*[x-apple-data-detectors="true"]');
    if (data.length) {
        for (var i = 0; i < data.length; i++ ) {
            data[i].parentElement.innerHTML = data[i].innerHTML
        }
    } else {
        setTimeout(clearDataDetectors);
    }
}, 250);

Works on Android / iPhone / all webkit flavours! The trick is detect whether the device supports the “orientation” event and fallback to “resize” for older devices.

DOMNodeInsertedIntoDocument

// watch out

document.body.addEventListener(“DOMNodeInsertedIntoDocument”, function(e) {

        window.e = e;

}, true);

JavaScript Date Delta

/** Returns a new Date! Usage: 
  * var now = dateDelta(0);
  * var weekFromNow = dateDelta(now, 7)
  * var tomorrow = dateDelta(1);
  * var yestarday = dateDelta(-1);
  ***/
function dateDelta(date, delta){
    if (typeof delta == "undefined"){
        delta = date;
        date = new Date();
    } else {
        date = new Date(date.valueOf());
    }
    date.setDate(date.getDate() + delta);
    return date
}

Running an iPad app on someone else’s Simulator

Developers have had success exchanging apps between simulators using the following technique from the Apple Discussion Forum:

1. Set the Active Configuration to “Release” and Build and Run the iP(ad|hone) app in the Simulator.
2. Browse to ~/Library/Application Support/iPhone Simulator/3.2/User/Applications/
3. Zip your application’s directory.
4. Unzip the directory in target’s User Applications folder!

MobileSafari -webkit-tap-highlight-color

For touch devices without haptic feedback it’s important to provide a visual prompt in responses to actions to let users know something is happening!

MobileSafari provides the -webkit-tap-highlight-color CSS property to create a coloured overlay over the tapped element.

For the overlay to show up, it must meet one of the following conditions:

• is a link with an href
• has an attached onclick event
• has an attached click event listener

Note that <img> tags do not seem to accept this property, even if made ‘clickable’ by attaching click events.

Test page, including a workaround for <img> tags

Linking to your application from MobileSafari

Linking to your app but not sure if it’s installed?

With JavaScript, you can avoid the error that usually shows when the app’s protocol isn’t found. This work around redirects the browser to the AppStore to download your app if it isn’t already installed:

// To avoid error, you must fail to another app. A safe bet is the appstore!
var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";
 
function applink(fail){
    return function(){
        var clickedAt = +new Date;
        // During tests on 3g/3gs this timeout fires immediately if less than 500ms.
        setTimeout(function(){
            // To avoid failing on return to MobileSafari, ensure freshness!
            if (+new Date - clickedAt < 2000){
                window.location = fail;
            }
        }, 500);    
    };
}

Checkout the live demo

XMLHttpRequest: Refused to get unsafe header

This error is thrown when you try to call xhr.getResponseHeader(header) on a cross domain request.

Chances are you bumping into the Same Origin Policy, and are accidentally requesting a resource from a different domain!

To help debug this problem, try writing out what resources your XHR calls are requesting! Here is a little snippet that will print out the URI of all XHR calls - put it above your code

<script type="text/javascript">
XMLHttpRequest.prototype.open = (function(){
  var super_ = XMLHttpRequest.prototype.open;
  return function(){
    console.log('XHR.open: ' + Array.prototype.slice.call(arguments));
    return super_.apply(this, Array.prototype.slice.call(arguments));
  };
})();
</script>