Hi all,
As we all know, iPad do not support the <frame> element, but both Gmail and Ymail could do something similar by creating a 2pane style , and the navi pane (left one) could scroll (in ipad style). May I ask if anyone do have the idea how it created?
Thank you very much.
I don't actually know for sure how they've done it (I can't seem to reach mobile gmail in a desktop browser, and I can't find a view-source feature on my iPad) but I suspect that it's not as complicated as it looks.
Keep in mind that in a regular browser, when there is too much content we get a scrollbar. That's not how the iPad renders long pages. On the iPad, if there is too much content we never get a scrollbar, scrolling is achieved by sliding the content up and down. So what we should imagine is that this is two panes with scrollbars, because that's how it would show up in a normal browser.
From there, it's a much simpler problem. It's probably just two divs floated in a standard two-column layout, each with their overflow set to scroll. Something super-basic, like:
<div>
{the nav list of emails goes here}
</div>
<div>
{the currently-open email goes here}
</div>
<style>
div {
float: left;
width: 50%;
overflow-y: scroll;
}
</style>
There's probably something fancy in there to make each div consume 100% of the available height (it's probably not as simple as height: 100%) but already if either div contains enough content, we'll get individual vertical scrollbars which the iPad will hide, giving us that neat sliding-scroll gesture instead.
I've tested a few of my own apps which were build back in time with Frames. They all worked "normally" are you sure you didnt use the wrong Doctype for your HTML?