Search jQuery

jQuery Forum

iPad Layouts

in jQuery Mobile • 9 years ago

Has anyone created a demo/template or thought about the best approach to a two column iPad layout (like the Mail app uses)? Seems like everything I've seen so far is designed with the small (iPhone/iPad Touch) form factor in mind.

I'm developing for iPad and don't want to re-invent the wheel or go down any blind alleys if others have already worked the basics out.

Thanks in advance!

--Ron

Replies(54)

voxelperf..

Re: iPad Layouts

9 years ago

I had the same question, so I did some research...

The only way we can currently get close to an iPad (two columns) or desktop (three columns) layout is using <div class="ui-grid-a"> and <div class="ui-grid-b"> respectively.

However this workaround has a big issue: list-views in columns cannot scroll independently. You can try applying css overflow property to the <ul> or to an enclosing <div> but the resulting behavior is strange...

So I guess, instead of trying to "hack" jQuery Mobile, we need a roadmap on when tablet and desktop support is planned to be delivered.

Kostas

nose_1.1

Re: iPad Layouts

9 years ago

Do you need the layout to change if you are in portrait or landscape?

In portrait, the list on the left becomes a modal overlay. in landscape it becomes a list.

These changes can occur in a simplified css media enquiry (although that's been iffy in the iOS beta...)

rvullo

Re: iPad Layouts

9 years ago

Yes, I want the layout to change in portrait to use the overlay. I think that works nicely.

Since no one seems to have solved this yet I am playing around with iScroll (http://cubiq.org/iscroll) for scrolling the left column, and Slablet (http://host.sonspring.com/slablet/) for a possible approach to the column layout/orientation issue. Nothing definitive to report yet, but I will keep y'all posted and look forward to any other ideas/experiences you may have had.

Adam Burm..

Re: iPad Layouts

9 years ago

My other question with this sort of layout is having fixed toolbars.

The current fixed-position implementation fades out the toolbar on scroll, then fades them back in. For the mail app interface obviously we want the container below the toolbar to be the only thing that scrolls.

I haven't seen the ability for this behaviour in the docs so far. Can anyone confirm that?

talisto

Re: iPad Layouts

9 years ago

Keep in mind that this is an alpha release, and the alpha release notes specifically say: "While at this very moment jQuery Mobile is highly targeted at mobile devices we hope to quickly grow the scope of the project to encompass many platforms: mobile, tablets, desktops, and beyond". In other words, tablet support will be coming later. Give the devs some time to work through the basic issues first and I'm sure the tablet layouts will follow shortly.

rvullo

Re: iPad Layouts

9 years ago

Oh, please don't think I was complaining. I have better reason than most to be confident in the jQuery team.

I am just starting to work with it and wanted to make sure I wasn't missing something. Not sure what future plans are either.

nose_1.1

Re: iPad Layouts

9 years ago

If you can use jquery outside of mobile to create an instance of the toolbar that has position:absolute, or imply that css style during runtime, that should work. You should also be able to have it remain above the other content.

I have a similar instance, where I copied a div (an image button), placed it above the one that 'sits' on the page with all the others, and it stays in place while everything else flows underneath. I then made the div underneath invisible (hidden?) so the space it would take up is still there.

If I remember correctly the reason they have the headers and footers disappearing and reappearing is that they are using the built-in scrolling of the web browser. Having a floating div that doesn't move with that layer would do the same thing, but you would want the space the header takes up to remain there...

regarding different frameworks for scroll, I am exploring this one for sliding. http://dealinium.com/common/jSlideTouch

I am trying to reconfigure it for the bounce (and modified it so it would not return to the starting location), but it is by far the most responsive alternative so far (this site also has a decent version of scrolling, but it is quite static, and as no acceleration and deceleration.

chinthakad

Re: Re: iPad Layouts

8 years ago

Hi nose_1.1,

How did you fixed the issue of jSlideTouch scroll, which is returning to the starting location. I'm new to jQuery and I have stuck at that issue.

Can you please give me some solution to solve this.

chris_nta

Re: iPad Layouts

9 years ago

I'm using JscrollTouch with Jquery mobile and it works fine on the IPad, but I will also evaluate IScroll. I went a different approach on how to do the layout for the IPad which also works great on the desktop. I have placed a fixed header, footer, left panel and a right panel. There is an event running in the background that updates positions, width and heights when resizing. Then I just use ajax and place the data where I want and re-initialize that part with page(), listview() etc.

For animation I use the addClass() function and the existing webkit animation in the jquery_mobile.css.

rvullo

Re: iPad Layouts

9 years ago

Any chance I could see what you've done Chris?

chris_nta

Re: iPad Layouts

9 years ago

@rvullo
Unfortunatelly I'm not able to give you access to the site because it's a internal project and has not been published yet.

But here some screenshots:

In the last picture, the JscrollTouch was not implemented at this time but the scroll bar only appears when scrolling.

In general I have to say that the jquery mobile team did a great job althought I'm useing it in a different way.

rvullo

Re: iPad Layouts

9 years ago

Totally understandable.

Looks great - thanks for sharing!

andymac41..

Re: iPad Layouts

9 years ago

I understand this is an alpha product but is there a plan in place for how the jQuery team had planned on implementing this style of interface. If so is it possible to be released as I am sure there is many developers that would be happy to help build this feature.

If not is there any form of timeline that can be released?

toddparker

Re: iPad Layouts

9 years ago

Hi all -

@chris-nta - that layout looks great...very nice work. I'd be curious to pick you brain on how you put this together and hear your feedback.

The plan is to create tablet-optimized layouts that build on top of the smartphone code so you can target both form factors with as much code re-use as possible. We're focusing on smartphones for 1.0 in January but I think we'll be doing a lot of work on tablets early this year. Scott just added a bunch of classes for identifying screen width to give us the hooks to start writing styles and script logic against screen resolution/orientation so the groundwork is in place.

If anyone wants to help with this effort, let me know or contribute ideas via Git.

Cheers,
Todd

chris_nta

Re: Re: iPad Layouts

9 years ago

@toddparker

I have used your draft on http://cdn.jquery.net/mobile/wp-content/uploads/2010/08/jquery-mobile-mail-app-11aug20101.png and took over the style and implemented it. Made some adjustments to the collapsible box etc.

Here is a draft of the layout.

So, the height of the two panels are importent when the footer should be keept to bottom of the viewport. This is done by an event (resize) and recalculate the heights. At the moment I'm fighting with the orientation on the IPad (safari on the IPad is crashing when changing orientation).

You can see that the two panels are in a box (Blue) that means that I'm replacing the content in this box instead of loading a whole new page. This even works with the webkit transition/animation (sliding).

Scrollbar is added dependend on the browser agent. For deskop browsers I use JScroll Pane and for others I use Jscroll Touch. I have looked into IScroll yesterday and it seems to perform much better then JScroll Touch.

I have also used tabs from Jquery UI and changed the style.

chris_nta

Re: iPad Layouts

9 years ago

Hi All,

I have implemented Iscroll now. However, Iscroll doesn't work properly if the container have form elements. It means you can scroll but for some reason the form elements are deactivated. Therefore I have implemented both, Jscroll Touch and Iscroll for the Ipad use. Iscroll is much more smooth and feels native.

toddparker

Re: iPad Layouts

9 years ago

Thanks for all the detailed notes on how you built this. I'm sure a lot of people will find this useful. If you get a chance to generics this into a sample template that people could check out, please post a link to it here!

phantomia..

Re: iPad Layouts

9 years ago

Do you have a HTML template which you can share?

I also want to build an iPad App with two columns...

Best Regards.

sheltered..

Re: iPad Layouts

9 years ago

Jesse MacFadyen at Nitobi did a useful scroller you might look into:

https://github.com/purplecabbage/GloveBox

I've used in a few projects (iPad). It's not JQuery-specific.

dave
David M. Oliver | david@olivercoady.com | http://olivercoady.com | @davidmoliver

naugtur

Re: iPad Layouts

9 years ago

I have created a plugin that builds a two-column layout from a normal jquery mobile page. It runs only if a device has a big-enough screen to display it, so there's no need to alter the project between devices.

At the moment it's initialized in a classic jQuery fashion, future versions will just work out of the box and be configured just as jquery mobile is. (sounds like a good idea, correct me if i'm mistaken)

http://jquerymobiledictionary.dyndns.org/dualColumn.html

It's a first working version I wrote and tested a bit in last 3 hours, but it might be a good base to work it out. I know I will try.

asyraf9

Re: iPad Layouts

9 years ago

@todd,

I'm interested in helping out, but not really sure where to start - can you point me in the right direction?

need to develop apps using jquerymobile targeting both tablet and mobile displays. we've already started development, but don't want to hack out our own solution, and then having to do things over further down the road when jquerymobile comes out with its solution.

i figure we should help out on this side. let me know how - thanks!

naugtur

Re: iPad Layouts

9 years ago

I've released a v0.2 of my plugin

http://jquerymobiledictionary.dyndns.org/dualColumn.html

Now all you have to do to get two columns is add a div data-role="menu" in your page.

I'm open to feature suggestions.

urbanseed

Re: Re: iPad Layouts

9 years ago

I may be missing something but this breaks for me in the most recent versions of firefox and chrome. Also tested iPad user agent string in both. Links appear to load in the right column, but go to a new page with a slide left transition, then hangs, loading....

naugtur

Re: Re: iPad Layouts

9 years ago

Sorry, debug leftovers. It's ok now.

andymac41..

Re: iPad Layouts

9 years ago

Is it possible to get a word from the jQuery Mobile team about if this is the direction they were heading or if they have a different plan? So we can work towards an official plugin or patch.

Thanks naugtur for your plugin it has saved me a few hours work to get this working :)

naugtur

Re: Re: iPad Layouts

9 years ago

I posted a question on this forum - where should I put it etc.
I just don't know who to contact, but it'd be cool to ask.

So feel free to ask somebody for feedback on that or suggest who I should ask and I sure will.

yoggl11

Re: iPad Layouts

9 years ago

How about just doing some overrides on the css and using the Footer als navbar on left. works totally fine for me and looks like the native stuff on iPad. I can share Screen Shots if you want to.

erixtekila

Re: iPad Layouts

9 years ago

@yoggl11

How about posting an example instead screenshots ?

naugtur

Re: iPad Layouts

9 years ago

@yoggl11

Your idea requires adding the menu to all the pages. My plugin keeps the same menu on the left while user switches pages.

BTW. I have just released a new version compatible with JQMa3 that works much better.

asyraf9

Re: iPad Layouts

9 years ago

Hi folks,

I'm working on a double column layout just like what you can see in the ipad. it's still a work in progress, as back and forward buttons will mess it up, but i should get it to work soon, need your help and ideas to get it better.

demo site is at:

asyraf9.github.com/jquery-mobile/

you can download the js plugin from there. it's the application.js file. there are comments in there that tell you exactly what needs to be worked on - which i'm working on :), but if you're faster, i'd be glad to incorporate what you did. ideas would be welcome too.

naugtur, I learnt a lot from your code, so thanks!

naugtur

Re: Re: iPad Layouts

9 years ago

You're welcome ;)
But if you were learning from the 0.2 version, then you might want to consider reading the new one, as I trashed most of the code and totally changed the way the menu is being kept visible. Old code was much too invasive.

See for yourself: http://jquerymobiledictionary.dyndns.org/dualColumn.html

onlyfrank

Re: Re: iPad Layouts

9 years ago

Hi asyraf9,

That's a very nice layout! nice work!! :)

Take a look at the sticky footer with the active state being fixed now (I think you might need that fix) @

http://jquerymobile.com/test/#docs/toolbars/footer-persist-a.html

You might also add (as a suggestion/idea) a super toolbar that just sits over the 2 columns! but idk if that would complicate things tho.

asyraf9

Re: Re: iPad Layouts

9 years ago

Thanks onlyfrank,

I saw the commits for the sticky footer today, will pull and integrate them in. the toolbar plugins we have right now are a little redundant for ipad/desktop view, so i am thinking of suggesting or rolling one out myself, but i won't have time to do it anytime soon - need to finish this first :)

I forgot to mention that i also edited some of core jQm - i namespaced some of the event bindings so i could unbind them. I highlighted this to the core team and they liked the idea (namespacing bindings) so hopefully it'll go into core. also, I only have two main pages in the demo, so some of the links may 'seem' like they don't work, it's only coz i'm linking to the same two pages, so when u click on a link whose page is already showing, nothing happens.

hashchanges and history now works - you can deeplink to a page, and back and forward buttons also work. you can't deeplink to a side panel page tho - that breaks the plugin for now. I'm going to test form submissions soon - will post more as i go.

here are brief features:

1) you define a side panel and a main panel using a div with data-role="panel" and data-id attribute. currently only supports the ipad splitview, but once code is ok, I'll start working on allowing various different panel layouts.

2) links in a certain panel (ex in the side panel) can load pages in another panel using the data-panel attribute pointing to the panel using its data-id. if no data-panel is defined, the page loads in the same panel the link is in. this allows for some interesting stuff like loading email lists on the side panel, and displaying the individual emails in the main panel.

3) you may not want side panels to be tracked in history - so the data-hash attribute set on the panel div will handle this. data-hash="true" is default, meaning any page changes on this panel will trigger a hashChange (history record) and a back button is created on the next page. data-hash="false" means no hashChange on any page changes on this panel, and no back button created (not finished with the back button yet for this). data-hash="crumbs" means no hashChange, but a back button will be created that links to the previous page on that panel - the back button uses the previous page's title as its title, just like the ipad.

4) uses jQm's in built touch scroll library for scrolling on the ipad - you can find the js file in /experiments/scrollview in the jquery-mobile source. detects if your browser supports touch or not, and if it does, the two panels scroll using touch. if it doesn't then it scrolls using your mouse.

It's still a work in progress, i have a couple more things to test before i can really say it's usable. comments suggestions are absolutely welcome! thanks!

Asyraf Abdul Rahman,
CEO, CS8,
www.cs8.my

pondera.c..

Re: Re: iPad Layouts

8 years ago

@asyraf9 firstly really nice work! The extended functionality is right along the lines of a project I am working on. Whilst having a play around with this I can see that your code still references the jquery.mobile-1.0a4.1.js file.

Any chance you can point me to the changes you made to the core file (or where I can find this in github - I'm a bit new to it so sorry I'm im being dumb!) so I can try and reflect this in the new beta release.

Thanks in advance!

George

yoggl11

Re: iPad Layouts

9 years ago

@ naugtur

I really like your working example i will check that out.

And sure in the way i proposed you will have to add the menu to every page you want it to have thats of course a problem but its also just a quick hack so i didn't think about this fact.

expressma..

Re: iPad Layouts

9 years ago

thanks good tips

dileep.ko..

Re: iPad Layouts

8 years ago

naugtur,

Hi,you done a great job by finding jquery.mobile.dualColumn.js for ipad .but, i need small help....i think data-role="menu" is working for first page only,In this link http://jquerymobiledictionary.dyndns.org/dualColumn.html demo ,first column is static where as second column is changing the content with respect to first column click.

if i need to change the first column by clicking in the same first column what i have to do...please can you help me in this......

Thanks,

Dileep

naugtur

Re: Re: iPad Layouts

8 years ago

At the moment the easy way to load a new menu is to link to a page that has a data-role="menu" element with a rel="external" attribure. It will load the whole page with the menu div.

I will be introducing the functionality of automatic menu changing, but I have to choose a nicest and most general-purpose solution.

dileep.ko..

Re: iPad Layouts

8 years ago

Hi naugtur,

Thanks lot for your reply,i used rel="external".but,iam getting same problem.i need in the way,if i click some button in the first column,it need to display its menu in the first column..but iam getting menu in the second column.

can you suggest me in different way,iam using single html, in that it contains number of pages....

Thanks,

Dileep

yoggl11

Re: iPad Layouts

8 years ago

Hey Asyraf,

is there any possibility i can use your coding for an existing project. I mean is it also working with alpha 4 and stuff which is realeased?

Thx
Yoggl

asyraf9

Re: Re: iPad Layouts

8 years ago

yoggl11,

yes, you can, some folks have already started prototyping using the plugin in my fork. you need to use the jquery mobile files from my fork tho, i made some small changes to allow it to work well...

I update the core files from the core and test them almost every other day, so my jquerymobile codes are pretty up to date.

if you need instructions, you can go to the demo page at asyraf9.github.com/jquery-mobile/

if you want to submit issues, you can do so at my fork of jquerymobile - github.com/asyraf9/jquery-mobile/

all the best! :)

Asyraf Abdul Rahman,
CEO, CS8,
www.cs8.my

dileep.ko..

Re: iPad Layouts

8 years ago

@naugtur

hi,i hope your doing well,please can you help me in the above situation what i have to do

rel="external" is not working as i wrote in above post....

Thx,

Dileep

naugtur

Re: Re: iPad Layouts

8 years ago

@dileep

If they are in the same html then link can't be external obviously.

You can create a button that will load new content to menu div and call .page() on that new content. That would do.

If you don't know how to do that you'll have to wait until I find some time to work on my plugin.

I will publish some changes by the end of the month, I think.

awe345rzh..

Re: iPad Layouts

8 years ago

Great work so far.

@Asyraf: Is there any chance that you can package your jQuery Mobile Core modifications into a plugin or so? Since I use an already modified modified core, plugging your work in would make life much easier.

davidyarh..

Re: iPad Layouts

8 years ago

Whilst we did not use jQuery Mobile, we used standard CSS and iScroll to allow our split view layout:

See: http://www.youtube.com/watch?v=p8UlScwnpp4&hd=1

frequent

Re: Re: iPad Layouts

8 years ago

I really like the looks of it. Great work!

I have been tinkering with both the JQM splitview and a JQM table-plugin for a while. Good to see something that should resemble my finished product :-)

Cheers

Frequent

gaetanl

Re: iPad Layouts

8 years ago

Hi Frequent,
May I ask you which JQM table-plugin do you mean ? Any url ?
Thanks.
Gaëtan

frequent

Re: iPad Layouts

8 years ago

Sorry. I had started working on a JQM-theme for the datatables plugin by Allan Jardine, but have not had the time to continue. First things needing to go first... it looked nice, didn't work very good though :-(

Rgs,

Frequent

phantomia..

Re: iPad Layouts

8 years ago

Here you can see an iPad layout with two columns in a real world project (virtual Scrum Board): http://bit.ly/nVimJK
The project is open source, you can get the sources and / or contribute at GitHub: http://bit.ly/nR9QmH

pentry

Re: iPad Layouts

8 years ago

A little experiment with iPad style two-column screen-width responsive layout together with google-map-ui plugin.
Ugly workaround with multiple navigation lists though, but it is work in progress.

http://greatname.se/marcus/maps/

Best

Marcus

WallDecals

Re: iPad Layouts

8 years ago

Great job! Thanks for sharing.
walldecals

stephanme..

Re: iPad Layouts

7 years ago

Since I had to come up with a solution for tablets with splitview yesterday...

I am using a combination of the content-primary/content-secondary css hack found at the jquery mobile docs. And Knockoutjs's Template bindings.

I got the inspiration from KnockOut's tutorial: http://learn.knockoutjs.com/#/?tutorial=webmail

The Page has two coloums on large devices. And only one on smaller devices.

In line 6 there is a template producing an ul-li list with custom click events - for the menu on the left.

The click events just toggle the currentContentTemplate

- so the content on the right side changes - without doing a full page-reload!

So my whole app consists of just one dynamic page!

Downsides:

-All transitions are custom animations.

-Hash-Navigation is totally custom!

This works perfectly on all mobile devices and desktop-Browser I have tested.

<div data-role="page">...
<div class="content-primary">
<div id="content-third" data-bind="template: {name: currentContentTemplate()}"></div>
</div>
<div class="content-secondary">
<div data-bind="template: {name: 'menuTemplate'}, jqmCreate: tree()" > </div>
</div>
</div>

poseidon_..

Re: iPad Layouts

7 years ago

Have been experimenting with iPad style two-column screen-width responsive layout together with google-map-ui plugin for new type of travel site.

Have been stuggling a lot with this !

Abhi

kwantm

Craig.Ric..

Re: iPad Layouts

7 years ago

For the last few months I've been playing around with JQM to fit a create a nice tablet layout - In my experience it really is best to not use any js plugins, use a simple 2/3 column layout and just use some old CSS position:fixed tricks to create multiple scroll panes.

You can check out a demo of the layout here: http://craigrich.me/experiments/lucast

This is a working app, and uses fb display your's and your friends events in this tablet layout. Hence why is asks for a facebook login!

Craig

Top Reply

Response title

Attachments

Replies(54)

Statistics

Tags

Actions