Tag Archives: javascript

iOS: shouldAutorotateToInterfaceOrientation / Lock Orientation in PhoneGap

Posted on by

Starting in PhoneGap 0.9.5 there’s an undocumented iOS only feature that allows you to handle whether the device should rotate to a particular orientation. It exposes the iOS Objective-C method shouldAutorotateToInterfaceOrientation with a JavaScript function shouldRotateToOrientation.

function shouldRotateToOrientation (rotation) {
    switch (rotation) {
        //Portrait or PortraitUpsideDown
        case 0:
        case 180:
            return true;
        //LandscapeRight or LandscapeLeft
        case 90:
        case -90:
             return false;
    }
}

This needs to be in the global scope of your JavaScript and will get called before any rotations occur, so keep it lean to avoid locking up the UI. Returning true allows the device to rotate, returning false prevents it.

Works great in your HTML5 iOS, iPhone and iPad apps, sadly currently there’s no Android or other platform integration. Hopefully we’ll see a cross-platform method soon!

Quickly Creating an HTML Link in JavaScript

Posted on by

A cool and little known JavaScript function is .link() available to all string objects. Calling string.link(url) returns an HTML string for an anchor tag with the URL in it. For example:

var text = 'the best website ever';
var html = text.link('http://bencollier.net/'); 
html === "the best website ever" //true

A great way to quickly make links without having to do:

var text = "the best website ever";
var url = "http://bencollier.net/";
var html = "" + text +"" ;
html === "the best website ever" //true

Show / Reveal Password Bookmarklet

Posted on by

If you’ve got a password saved, but can’t remember what it is, you can use this bookmarklet to reveal it.
Drag the image to the bookmark bar:

Reveal Passwords
Click the button above to try it out:

If you’re interested in the JavaScript source:

javascript:Array.prototype.slice.call(document.querySelectorAll("input[type='password']"))
    .map(function(el){el.setAttribute('type','text')})

It gets all password inputs and turns their type to text; and should work in modern browsers (like Safari, FF4, Chrome etc) that support ‘querySelectorAll()’.

PhoneGap & The Android Back Button (0.9.5)

Posted on by

In PhoneGap 0.9.5 they’ve updated how the Android back button works. Here’s what to change.

Before in 0.9.4:

BackButton.override();
document.addEventListener("backKeyDown", function() {
    someBackButtonHandlingFunction();
}, true);

Now in 0.9.5:

document.addEventListener("backbutton", function() {
    someBackButtonHandlingFunction();
}, true);

In 0.9.5 and later you no longer need to override the back button, as it’s assumed when you’re adding the event listener that you want to handle the button yourself. Make sure if the user is at the root view of your mobile app, the back button closes the app.

To exit the app in 0.9.4 you’d use:

BackButton.exitApp();

Now, in 0.9.5 you need to use:

device.exitApp();

Good to see PhoneGap advancing to a more device agnostic syntax.

Things That Give Me Usability Cramps – Web Forms

Posted on by

Usability Cramps

[yoo-zuh-bill-ity kramps]

  1. n. are unpleasant, often painful sensations caused by unbearable unusable user experience mistakes
  2. v. usability cramping, usability cramped, why the hell did they do this?

Form Labels That Don’t Select the Fields

This one mega-stresses me out; when the text label next to checkbox or a label doesn’t select it when you click it:

Bad Form Field:

To fix this, just give the input field an ID, and the label a for=’inputID’:

This is particularly annoying when there’s lots of checkboxes or really small radio buttons.

tip: add the following CSS to force the browser to show a pointer on clickable labels and buttons:

label, input[type="button"], input[type="submit"] {  cursor: pointer; }

Mobile Sites That Don’t Use the Right HTML(5) Input Types

If you use the correct types for your inputs then touchscreen devices adapt the keyboard to fit the need, and browsers can adjust the UI accordingly.
iOS Screenshot of email keyboard

Using input type='email' brings up an email specific keyboard on iOS

Browsers that don’t understand these new input types default to text, so you’ve got nothing to lose.

Forms That Need to Reload to Validate

It’s so easy to check your forms with a bit of JavaScript, instead of having to refresh the whole page; and generally require any password or captcha fields to be re-enter.

Oh, and if you have a username field, check it’s available before I click submit:

Twitter showing a username's available

Twitter Signup

I’m purposely not linking to any validation scripts; there’s not a universal drop in one I’d want to recommend, however, keep an eye on the native browser support for validation.