Question

I’m trying to build a mobile version of a website. I’ve kinda made the html and the css but I want it to work nice. I’ve made two columns (a left column which is the menu and a right column which is the content). Both of them have overflow hidden.

I’ve put overflow auto and I still can’t make them scroll if the content is bigger. So, I tried iScroll but it’s very buggy. It does not scroll until the end of the content, if I change the orientation it messes up a bit.

Could I use jQuery Mobile the same way I used iScroll? What about Sencha Touch? (I saw all the examples for Sencha Touch and it was awesome, just that I don’t want to code like they say – just javascript – I want to write html and then with javascript say that a certain ul element is actually a list and should be treated as such).

Can anyone recommend me a tutorial or something where I could make a small web app work good?

Answer 1

AFAIK, you can use Sencha Touch this way, for example…

var panel = new Ext.Panel({
    fullscreen: true,
    dockedItems: [{
        dock : 'top',
        xtype: 'toolbar',
        title: 'Standard Titlebar'
    },{
        dock : 'top',
        xtype: 'toolbar',
        ui   : 'light',
        items: [{
            text: 'Test Button'
        }]
    }], 
    html: 'Testing',
    renderTo: 'idOfHtmlElement'
});

You just structure your HTML elements as you wish, and use the renderTo config option to specify what each component is rendered to.

I have to ask though… why would you want to work this way? You’d be doing twice as much work and maintaining the codebase would require more effort. This is the beauty of Sencha Touch as it lets the developer worry purely about functionality and not about the quirks of the devices.

There page here dedicated to scrolling content in a fixed height div, that may be of some use to you (although I’ve not seen your code so it’s hard to say).

My experience with iScroll is that it is far from ideal, and jQuery touch and jQuery mobile are frameworks that are nowhere near the level of polish that is shown by Sencha Touch.

My advice is that you pickup Sencha Touch and start learning the framework. Version 2 will be out in the next few months and that promises support for even more devices (Windows Phone 7 for example).

Scrollability by Joe Hewitt may also be worth a look, although he hasn’t worked on it that much in the recent months.