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
Related
From my testing this is specific to Safari iOs issue.
The bug is on this page.
Basically on iOS, when expanding the last content item, the browsers doesn't always scroll the content but scrolls the page.
It's inconsistent behavior which happens to the last section item no matter what I do. I've tried adding in another section element to the DOM as a hack to make it work properly but it still behaves the same.
The height is expanded based of max-height parameters so that dynamic content cant be expanded correctly by the js.
Been spending hours looking at this and it's at a point where I need some other eyes to take a look. Thanks for any help you can offer!
Of course it's after asking a question you find the answer.... I was able to fix this by removing a css height rule on a parent container that was using the new vh rule. I changed it to use 100% vs 80vh and it's behaving as expected. Hope this helps someone else.
So I have built a site using Keith Clark's pure CSS parallax idea. And it looks good, but I'm curious if anyone has figured out how to allow inertial/momentum scrolling on iOS.
Here is my site so far.
What I know so far:
Currently inertial/momentum scrolling doesn't work because essentially the whole page is held within a container with overflow-y:auto. So when you are scrolling on the page you are scrolling within a container.
On iOS you have to apply -webkit-overflow-scrolling: touch to allow anything that scrolls that isn't the viewport to have inertial/momentum scrolling.
If you add -webkit-overflow-scrolling: touch to .parallax then the entire parallax effect breaks.
example of that here
I've tried adding iscroll.js to the page but it also breaks the page by making the children within the .parallax container to scroll in a way that isn't proper. It makes the parallax layers move up and down relative to the viewport instead of he container.
Another problem that this causes which isn't as big a deal but would be nice to address here since it's related is that on iOS the page will never go into minimal-ui since that only happens when the viewport scrolls.
I've seen people ask about this on the blog post so I figured I could bring the same problems over to stackoverflow and see if anyone has any good ideas.
Thanks!
Not what you want to hear (assuming you put in some good hours reading through Keith Clark's guide) but iOS handles scrolling events differently than desktop. It's possible you could adjust what you have already, but if you really want this you're probably better off switching to a js tool with documented support for iOS parallax + momentum. Stellar can do this, for example - http://markdalgleish.com/projects/stellar.js/docs/
I'm developing a web-app, based on the Dribbble API. In this app I have a div which shows all comments with a max-height of 200px, so if there's more than 200px worth on comments, the div gets scrollable. So far so good, works as intended on iOS.
However, when I add a Scale transfrm to this div (to mimic iOS's folder opening animation), scrolling the div breaks entirely. You can see the live version here: http://maxsteenbergen.com/longshot/
Is this fixable by setting a a new style using jQ's webkitAnimationEnd or is this without solution?
EDIT: In the meantime I found that using two fingers to scroll the div works but obviously, this is not how it's supposed to work.
It's also worth noting that scrolling DIV's don't work on older versions of iOS - it might be worth having a look at iScroll.
You can implement native iOS UI and achieve much better UI feedback. especially on scroll view. To obtain data from Dribbble API you may use 3rd-party Dribbble iOS SDK: https://github.com/agilie/dribbble-ios-sdk
I am trying to do (EDIT: on a web-app destined primarily for the iPad) what Google does in gmail for iPad: the left-hand pane containing the list of messages stays put, and the right hand side of the screen (the message content pane) can be scrolled vertically with a touch-gesture.
How is this division of the page with right-side-only scrolling accomplished?
Thanks
Use div scrolling. See Glovebox for example. Try this demo on the iPad.
After trying to reverse engineer the gmail scrolling and the apple ipad help scrolling, I was directed to http://cubiq.org/iscroll-4.
iscroll-light is great if you only need the smooth scrolling abilities.
You are looking for the UISplitViewController.
Try this link: Developing Split View Based Apps for the iPad, or the documentation page linked above.
Assuming that it's in the web browser, I'd guess they're using CSS position: fixed;.
#chris I don't think they are, because gmail is a web based app, not a native ipad app.
I'm not sure if this will help but take a look at this: http://www.domedia.org/oveklykken/css-div-scroll.php
Use touchstart, touchmove and touchend events. You would also need to prevent the event from bubbling up - preventDefault.
Im currently developing a WebApp for the iPad, now it depends on the viewport (screen-width and screen-height)
Im currently looking to somehow make it dynamic so when the user rotates the ipad, it actually resizes the viewport of the page
Has anyone done this or attempted it and been successful, i would think its just a small snippet of Javascript
Have you tried using: "device-width" ?
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19
Just meta viewport and CSS. Here is a demo (although it rearranges rather than resizes, the principles are the same).