Right, time for a slightly more nerdy post. As I was looking for a simple way to make my jQTouch webapp iPad ready without having to resort to a fork (like Beedesk’s). I found the following solution that I’d like to share with you lot. The sollution is pretty simple, and is *unobtrusive*; it will not affect the iPhone/iPod layout and functionality (as far as I can tell).

Firstly, I ‘borrowed’ the section of Beedesk’s CSS that deals with the iPad layout. It basically provides a ‘splitscreen’ class and a ‘section=”aside”‘ parameter. I added one class for hiding the back buttons (and any other classes which would be of no use in the iPad layout) and saved it as an additional ‘ipad.css’:

1. ipad.css:

#jqt > [section="aside"] {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    right: 0;
    min-height: 100%;
}

@media only screen and (min-device-width: 768px) {
    #jqt.splitscreen {
        width: 768px;
        margin-left: auto;
        margin-right: auto;
        -jqt-splitscreen: 1;
    }

    #jqt.splitscreen > * {
        left: auto;
        right: 0;
        width: 448px;
        border-radius: 5px;
    }

    #jqt.splitscreen > .unfixed {
        overflow-y: scroll;
        height: 100%;
    }

    #jqt.splitscreen > [section="aside"] {
        position: absolute;
        left: 0;
        right: auto;
        width: 320px;
        border-radius: 5px;
    }

    #jqt.splitscreen > :not([section="aside"]) {
        border-left: 1px solid;
    }
}


@media only screen and (min-device-height: 768px) and (orientation:landscape),
only screen and (min-device-width: 1024px) {
    #jqt.splitscreen {
        width: 1024px;
    }

    #jqt.splitscreen > * {
        width: 704px;
    }

    #jqt.splitscreen > [section="aside"] {
    }
}

Then I added a detection script to the index file which sets a flag when my app is being accessed from an ipad:

2. addition to the head section:

<script language="javascript" type="text/javascript">
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
</script>

Using this flag, I can now set the .css file to be loaded or not:

3. load .css if ipad:

<script language="javascript" type="text/javascript">
if (isiPad){
document.write("<style type="text/css" media="screen">@import "**path to your css files**ipad.css";</style>");
}
</script>

(ofcourse, both these script can be merged in to 1 script call)

Then I modified my html code:

4. html code:

<div id="jqt" class="splitscreen">

and

<div id="home" section="aside">

‘home’ is my initial (current) div when in single column (iPhone/iPod) layout, containing the menu. Note that the class ‘current’ is missing. Hold on, I’ll get to that 🙂

5. Now, the important bit

Based on the iPad flag, you should *dynamically* write the opening of the DIV you want to be visible in the right column so that it has *class ‘current’* when viewed on an iPad and *no class* when not viewed on an iPad. In my case ‘overzicht’ is the div I want to be displayed in the right column initially:

<script language="javascript" type="text/javascript">
if (isiPad){
    document.write("<div id="overzicht" class="current">");
} else {
    document.write("<div id="overzicht">");
}
</script>

*Note: Don’t bother writing jQuery addClass scripts instead of this, it will not work.*

Note 2: Make sure this div is somewhere *after* your home-div in the HTML.

At this point, when you ‘test drive’ your webapp, you will notice that the ‘current’ div will show up, but the left column remains empty. To fix this, and to *prevent the left column from ever animating* you just need to add 1 line of code to the initialisation section in jqtouch.js:

6. jqtouch.js modification:

// Determine what the "current" (initial) panel should be
    if ($('#jqt > .current').length == 0) {
        currentPage = $('#jqt > *:first');
    } else {
        currentPage = $('#jqt > .current:first');
        $('#jqt > .current').removeClass('current');
    }

add this line right below that section: (line 909 at the time of writing, revision 166)

$('#home').addClass('current');

This will add the class ‘current’ to my home div (‘#home’) and place it ‘out of reach’ for the jqtouch animations: it will always stay in view.

Now refresh your webapp and it should run normally on iPhone/iPod and should switch to a 2-column layout on the iPad. Animations will still work!

I hope I retraced my steps correctly and that this will be of use for someone 🙂

EDIT: Yes, there were some closing brackets missing from the CSS (as I copied it from Beedesk’s fork, it seems the brackets are missing there, too). Fixed it now.