iPad Split-view supports on a jqtouch's fork

Background

The original jQTouch does not support iPad other than expanding every widget to fill the new space. However, it is still one of the best starting points for an HTML5 mobile application.


BeeDesk is about productivity. Making better use of the extra iPad screen space is important, so we put much effort into making that happen.


Here is a screen shot of the modified main jQTouch example.


Link to demo here (supports iOS devices, Safari or Chrome):

    http://bit.ly/beedesk-jqt

Scope of work

We spent three very long days on the initial work and roughly the same amount of time spread out over the following three weeks fixing bugs such as an animation laying problem that is now fixed.

Changes include:

  • CSS
  • Adding initialization code to support two "current" panes.
  • Rewriting the page history management.
  • Adding an HTML marker for "section" to let jQTouch know which section of a pane to display.
  • Adding a conditional widget (a widget that shows or hides depending on whether it is in split-view or singular-view mode).
  • Adding a new “Toggle” button type (in addition to <a> and <a class="back">).

Initially, we thought we’d only need some CSS tricks and initialization code. However, more effort was required to create a meaningful application that would be compatible with both split view and singular view.

Author’s Note: After this work we also discovered that URL-search (i.e, http://example.com/mobileapp?search=abc) passing is important for split-view navigation. We’ve since added that support and will present it in a later blog post.

Goal

We strive to maintain the original jQTouch’s ease of use. We also want the same HTML markup to run on both screens, and minimal time investment in decorating existing jQTouch applications to support split view.

Mini User Guide

Main switch

To activate split-view support, a user should add ".splitscreen" to "#jqt", as shown here:

    <body id="jqt" class="splitscreen">
        <div id="homepane" class="current">
           <!-- ... -->
        </div>
        <div id="uipane">
           <!-- ... -->
        </div>
        <!-- ... -->
    </body>

If jQTouch detects the screen is smaller than iPad, it automatically falls back to the original behaviour.

Assign a section

By default, all panes appear on the main side (right, larger side) of the split view. Specify "<div id="xyz-pan" section="aside"> for each pane that should appear on the "aside" (left side) of the split view.

Also, remember to mark one of each side as ".current". For example:

    <body id="jqt" class="splitscreen">
        <div id="homepane" class="current" section="aside">
           <!-- ... -->
        </div>
        <div id="uipane" class="current">
           <!-- ... -->
        </div>
        <!-- ... -->
    </body>

TIP! Sometimes, you might want to create a new blank pane and assign current to it, so that it has a page to start with.

Condition widget

If you are converting the main example or your application, you may notice that in many cases, the Back button is no longer useful. The new code should handle it gracefully if you click it, but it doesn't do anything meaningful.

To switch it off you can use the new "section='aside | [ main | full ]'" markup. For example:

    <div id="ui" class="current">
        <div class="toolbar">
            <h1>UI Demos</h1>
            <a class="back" href="#" section="full">Home</a>
        </div>
        <!-- ... -->
    </div>

This markup lets jQTouch know that the widget should be displayed only if the application is run in full screen mode and hide it otherwise. If a widget should appear in more than one section, you may use a comma separated list such as "section='main, full'".

Toggle Button

 

A new type of button is added to support the case where a button on the aside section controls the display of the main section.

      <div id="uinavibar" class="navibar">
        <a href="#settingpane" class="tog left nopad slideup">Toggle</a>  
        </div>
        <!-- ... -->
      </div>

Because the class ".toggle" conflicts with existing jQTouch CSS, we simply use ".tog", which toggles settingpane. You can mix and match it with a conditional widget.

Where to get it

iPad support can be found on BeeDesk's fork: http://bit.ly/gyraLr

Porting Split-view to the official fork

Jan 2013

I has become the maintainer of the official jQTouch. I would like spend some time porting splitview to the official branch. If you like to see it happens much sooner, please consider making a donation:

PayPal - The safer, easier way to pay online!

29 responses
wow, this is awesome work so far, I've been looking for this for so long I'm so glad you posted this !
Hi Thomas, great work. In testing this on an iPad it appears that the main pane doesn't support vertical scrolling i.e. if the html content is larger than the display size? Can you confirm if you've encountered this yet? Hopefully I'm missing something small that you can point out. Thanks again, Paul
@Stefan, thanks for your kind words.

@Paul, I tried the version at http://bit.ly/beedesk-jqt , I am able to scroll the each page, both on Windows' Safari and iPad. If you're modifying the example, add new page etc, then you need to make sure each scrollpane has a unique id (requirement of iScroll). Let me know if you have more question.

I noticed the bitly link didn't work, so you can get the fork here:

https://github.com/beedesk/jQTouch

thanks for the iPad support, just what I am looking for.

Thanks, Josh. The link is now fixed (extra trailing / prevented the link from working).
Wow, this is really awesome, really nice work!

Any chance of getting a css file for the JQT theme? Have a few apps but only work in Apple theme, JQT seems to be same as Iphone version which with the Beedesk layout causes everything to be on top of everything else when viewed on Ipad.
OR
Anyone else take the time to edit the JQT Theme CSS?

Any help will be very much appreciated. I am fairly new to CSS, seems easily doable, but for me it'd be too time consuming and a lot of trial and error.

Is it possible to specify certain divs to be fullscreen view. For example have the slitscreen mode be the default, but then have a link in the side menu navigate to a fullscreen div? Or will i need to do some modifying to achieve this?

Thanks

@Mr.Mustache. There is no support of JQT Theme. At some point, I failed to keep it up and it is very behind. You would better off to start at apple theme and change there.

If anyone take the pain, I promise I will keep it in-sync. But, I can't see I am able to work on it soon.

@leck, you can use "unfixed". For example,

<body id="jqt">
<div class="unfixed">
<input ...>
</div>
</body>

You can look at the "form" table in the main example. It shows the usage. Can be mixed-n-match.

Is is possible to have links in the side pane open in itself? This is to emulate a folder structure, like in the dropbox app. When you click a link in the sidepane, it opens the underlying list of folders.
There is no built-in support to do that.

However, it might not be too difficult to use ajax to replace the elements yourself.

Hint, if you interested to use the back button, you can use .

Please tell me how to switch from split view into single view again. I am stuck between a project..
@BrianMelroni you can remove "splitscreen" class from body.
I recently started using jqt's fork. i discovered a bug when it is in plain safari not in mobile phone or IPad.
If you click any link from main links list (right side of the pane)
then click back or cancel to go back.
if your safari window loses (just switch to some other application like finder or something) focus your previously clicked link's pane pops out at the right of the right pane (main)

Could you help me on this one?

Hello! This is some really great work. It's perfect for an iPhone app that I want to add iPad support for.

There is however one big caveat that is preventing me from moving forward...

I have noticed that when I scroll past the content in either pane, the viewport begins to slide up as well, clipping the content. This really distracts from the experience and definitely is a dead giveaway that the app is not native...

Is there anyway I can prevent this from happening or have you experienced this issue?

I notice the problem, but have not found a solution yet. Check back in a few days if it totally critical to you.
@Thomas @sp0rkyd0rky - I agree it would be awesome if the vertical scrolling problem got fixed!!!
The problem which sp0rkyd0rky reported is now fixed.

The problem was "scroll past the content in either pane, the viewport begins to slide up as well, clipping the content".

@Thomas_Yip the problem is not fixed in the demo
Try clearing the cache. To be precise, I solved the "clipping" problem.

A native app would not reveal the fabric-pattern background, even you scroll past the top and bottom. My fork still does. But, the "clipping" problem should have solved.
only problem i have is how do you point to and other page and get it to show in the other
side window
I found this This
$('#ajax_link').tap(function(){
jQT.goTo('Thumbnails.asp', 'pop');
})

I found the goto function and I went alert(param); that worked but the did not change

next question how would you pass some like thumbnails.asp?sheet=books

thank
i keep reading i'm slowly getting head around it LOL

Got it working Thanks Does help to read the Manual LOL

only problem now is the scolling does not work look like more reading

have a look www.frenchtouch.co.nz/ipad

Great work! we're using it in our mobile client on both iPhones and iPads.
Question:
Why is i-scroll required?
Isn't iOS5 support for CSS pposition-fixed adn scrollable enough?
As I am thinking... That is a great idea but not all users may have updated yet, so this may cause confusion when opening with iOS 4 or below. 

Scrolling' (at least on the larger, right, section) has become very clumsy on iOS 6.
Any attentions on addressing this issue somehow?
Maybe use native (iOS 5+) scrolling when available instead of i-scroll?
Didn't get Posterous notification for 11 months. Sorry for not replying.
The work was done before scroll is supported natively. I contributed the native scroll change to sencha's jQTouch main. I couldn't resolve animation issue with native scroll in my this fork.

What I like to do is to port split-view as an `extension` into sencha touch. But, it is really depends on how much time I would able to put into it. Can't give a time frame.

Hi Thomas, I know you dropped development on this fork but I have a quick question: I had my code working fine on chrome (split, scroll, etc) but since a chrome update, the navigation seems broken (currently v29). I don't get any error message. Any idea ?
I updated how Touch events are detected and it seemed resolve the issue. Pull from master and let me know if it still doesn't work.