Where to find jquery mobile layout kits - Chat and Camera Layouts - jquery-mobile

I'm looking for some pre-built layouts in jQuery mobile.
Like the camera layouts for example. I would need lets say at least 5-10 layouts to cover the entire process from the engagement of the camera phone to apply the final pic(s) to a photo gallery and albums. Another set of UI layouts Im looking for is chat messages.
Think about how many unique layouts are on an iPhone? There's about 4-5 layouts for your texting on your iPhone from the list view of the people you've been texting to the thread messages inside each conversation and more. Im looking for all the source code files that come along with each layout. Since Im now using jQuery mobile to do my next set of layouts, Im looking for mobile layouts that is compatible with jQuery mobile.
Any help would be appreciated.
John

Related

Resizable selection area on realtime video

I want to develop an iOS App which will be grab an specific text from a paper using resizable selection area on Real Time video.Click here to see the link of an app which have similar feature. Can you please tell me the which API or Code should i implement in order to add similar features in iOS Platform. I will highly appreciate valuable resource links or project links or Code Sample.

Mobile optimisation of rails app

I have a website at http://bit.ly/1h3HLVE
There are two issues I am trying to resolve regarding viewing the website on mobile devices.
The dropdown boxes in the top navbar do not work on mobile viewing (with my iphone anyway)
When I load the website the first time it is zoomed in on my mobile, and I need to zoom out to see it properly. I'd like to find a way to have it automatically open at the right size for the mobile device.
Can anyone help with either of these?
What you are trying to do is called responsive design, the easiest way would be learn a little about Bootstrap, Bootstrap is framework for design, there is a gem for rails called bootstrap-sass for easy integration, with this you can set different behaviours for different devices (this is one of the functionalities of bootstrap), you can hide for example your navbar in mobile devices and show another smaller in mobile. Bootstrap also has responsive adaptive support for images and tables, that it will change according to the width of the device dynamically.
Of course, if you are hiding items they will still loading to your site so eventually it could be a little hard to loading, you can use browser gem then, this one allow you to have different behaviors for different devises with conditionals(mobile? desktop? e.g.) and also let you have different views for each one.
Check both of them, is a good place too start and there is lots of guides for those, regards.

Flex Mobile - Simple catalogue . iOS

just new in mobile development.
I am starting to use/learn Flash Builder 4.6 and try to do my first test app for iOS
I would like to create a simple app which works like a simple catalogue. Basically a list of images that can be showed and switch between images just moving the fingers. Move from left to right will show next image, move from right to left will show previous image.
Basically the same way that you can see your pictures on your Iphone / Ipad
Do I need to create a view per image?
Thanks!
This Flex mobile demo app may overlap your example.
Demo application from Finnkino Movies
Source Code (FXP)
Source Code (ZIP)
You may also want to create a Flex mobile app in Flash Builder using a default template to experiment with transitions of ViewNavigator.
References:
Demo application from Finnkino Movies
Define views in a mobile application
Define transitions in a mobile application

Website admin panel with iPad support

We're building an admin panel for managing bookings and payments. I would like to use the style of Apple Mail on the iPad as it is clean, simple and user friendly. We are quite capable of building it but the question remains on scrolling content.
Image a Clients page. We'd want a list of clients on the left and onclick the content to load on the right. On iPad mail these two colums scroll independently. Yet to achieve this on our own pages I have found only a handful of inadequate solutions.
1.) Overflow content and two finger scroll
- no scrollbars
- not particularly user friendly
2.) JS libraries such as iScroll
- over complex and lacing in cross browser compatibility.
Thus any other simple ideas on how to do this. Would a good old fashioned frameset accomplish this goal?
What's wrong with two divs with overflow: auto;?

Website for iPad Mobile Safari

While creating a website for iPad Mobile Safari, I have a few questions;
Does the orientation happen automatically or do we have to write code for that ?
What is the best approach in terms of CSS/JS..I mean create separate copy of the web CSS for iPad and just update for iPad specific. Also what about JS?
What is the best way to detect for iPad (CSS/JS) and how?
Any online references which specifically covers iPad Mobile Safari development will also be great.
Thank you.
The orientation happens automatically, but you can write code to intercept the event and do things.
I highly recommend using an existing JS library such as Sencha Touch to handle the UI for you; they automatically detect the client and will display the appropriate scale of the app.
I just added a few meta tags to my current project, based on this page - http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
It made a huge difference. The orientation media queries work great. I madea simple example by setting the body background colour different based on orientation.

Resources