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;?
Related
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.
I want users of my website to use pagination on their mobile devices, like for example UIScrollView with paging enabled in iOS.
Still the website should also be viewable on desktops.
So far, I tried Foundation's orbit, but that just doesn't feel fluent at all (when you release your finger, it performs the sliding a little delayed).
Is there any good alternative on how to get this done? If possible I would like the user to even slide vertically as well as horizontally.
Maybe Swipe.js is the thing you looking for.
have you tried SwipeView?
Here you have an demo gallery
I'm looking for this too, but I really think they are none.
If you want it to be fluid, you have create your own using CSS3 animation/transform and so it will not work on hold browser (IE < 10 or 11, but I'm not sure). If you want to handle touch events I recommend you to check out "jQuery Modile"
You can try iScroll 5 it's quite simple but do the trick perfectly.
You will find in the archive of the project an example of horizontal paging under demos/carousel, you will see it's quite good. :)
In addition you will be able to see all other things you can do with iScroll which should fit your demands.
I've been developing an iPad web app over the past three days, and I'm trying to have internal horizontal scrolling, without allowing the rest of the page to move/zoom in ect. Essentially I want to lock it to specific co-ordinates, whilst allowing certain elements to scroll. If you're on an iPad you can see it here: http://streamerforipad.webs.com/app.html. It'll look kinda weird on a desktop. Also, sorry for my abysmal coding skills, I plan to clean it up with external CSS at some point.
P.S. Remember this is a web app so native code is a no-go.
Thanks!
You can disable scrolling within certain element areas using the following:
$("element,element2").bind("touchmove",function(e){
e.preventDefault();
});
I am very new to HTML5 development for ipad. I am creating my first application for ipad using HTML5. Everything is done except I am facing one problem. Problem description is.
There is one vertical overflowing div. This page is viewed properly in computer's browser but when the same page is viewed in ipad the overflowing section is cutoff and it appears that there is no overflowing content.
Please let me know the proper way of doing it.
On the iPad scrollable div's using overflow scrollbars will not appear on that div. The only way to scroll is using a two finger swipe.
Joe says that Scrollability is not yet ready to be used, so I wouldn't implement it in a production system.
To do this you have other options like:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
You want native-like scrolling on the iPad in your HTML5 application? You might want to check out a project called Scrollability by Joe Hewitt: http://joehewitt.github.com/scrollability/
Check out https://github.com/appmobi/aux_web (aUX_webScroll) . I'm the author, so if you have any questions, let me know.
iOS5 has the new property to allow scrolling on divs, but you'll find out that when you use it in a webview, the whole webview moves too and surprisingly, not everyone upgrades the OS.
I wrote an article about new features in iOS 5. Also this topic is covered on section -webkit-overflow-scrolling: http://samuli.hakoniemi.net/ios-5-and-new-features-for-web-developers/#webkit-overflow-scrolling
I've looked for this for a while, but I can't find any good guides or resources that explain it thoroughly (not even Apple's own documentation, which seems to not have as much information as I'd expect). I want to setup a basic interface that has 6 pages horizontally. Each page will have a bunch of labels and textboxes, but the layout will be the same for each page. Eventually, I want to be able to have each page scroll down to view all the content, but I'm assuming I just need to use scrollviews as the content for each page.
Also, each page will eventually have to have separate names for each textbox (and separate from the other pages too) because I'll need all the content of the whole app to be saved out later.
But really, for now, I just need to figure out how to get paging working. I tried following one demo but when I typed in the code, Xcode wasn't recognizing one of my classes (which I know I included it). Plus, I didn't understand what was going on really, and I feel that I need to understand what I'm coding.
Also as a side note, how do I start programming for iOS 5? I updated Xcode to the latest version which said it had support for iOS 5, but I only get up to 4.3 in my project target.
You can use this project http://cocoacontrols.com/platforms/ios/controls/icarousel, the only downside is it does not support cell reuse, so if you plan on having more than a 5 or so panels the app will really start to blog down.
For any future searchers that have found this thread, I was able to achieve what I wanted.
Basically, just make a scrollview the size of however many pages you want (multiply the width by how many pages you want and that will be the content width). Then just enable paging in interface builder and it will page through the view. Then you can just add content to the scrollview.
It's not hard. When I did it for some of my apps, I had a very detailed 'template view' which included primarily a tableview, but also lots of buttons and text fields and such. I was amazed at how well it all worked when put together -- no real trouble with gestures or anything. Apple's UIPageControl sample code is a good place to start.