I notice that on sites such as http://twitter.com and http://www.linkedin.com, when opened in an Ipad using safari, the page's width is locked to the window so even if you try to scroll horizontally it will not budge, whereas on my site the frame will move, revealing a grey background.
Does anyone know how the pages listed above do this.
I am using the:
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=2.0">
as the way to control some properties but have yet to discover the way to lock/prevent the page from being able to move from left to right. vertical scrolling is perfect ofcourse.
Just to clarify, the page doesnt have a horiz scroll bar as it is fixed to 1024px and is centered, never-the-less, when you use your finger and move it from left to right or vice versa it will move the entire window and show grey behind it. It will be great to find out how pages stop that from happening.
Thanks guys and I appreciate it, once again this is hard to find on the tinterwebs and should come in handy for others who want to do the same. :D
//Giles
Related
I came across a weird scrolling issue on iOS (7 or 8) shown on www.cahri.com/tests/scroll
How to reproduce?
Open the example page on an iPhone/iPad/iOS Simulator in landscape
Touch with your right thumb the main content (right side) and scroll up or down
Release your right thumb
Touch with your left thumb the left side (which is a div with overflow: scroll) and try to scroll: the page scrolls instead of the div. Release your left thumb.
It may take a couple of tries to reproduce, please get back to 2 if the page is not scrolling.
Touch again with your left thumb the left side, now it scrolls correctly
Would you have any idea what is causing the issue? And how would one fix this issue?
iOS web browsers still run into issues with fixed positioned elements (as is your left div) and scrolling. In the many web projects I have done this seemingly always causes issues/bugs that are somewhat inexplainable. I know this is not an exact answer, but I'm just sharing that I've been down this road before :)
Best solution is to either use a method that gets away from fixed positioning and scrolling for mobile devices or a third party scroll library like: http://cubiq.org/iscroll-5
I've had a lot of success with them on iOS devices.
If you wanted a different solution for mobile, you could use media queries to change positioning on elements.
#media screen and (max-width: 600px) {
.column-left { ... }
}
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
I have a site (ils-main.attorneysonlinepreview.com) that scales properly for everything except the menu bar. It's a fixed width site and I've set the viewport meta tag appropriately. For some reason, the menu items are scaling up instead of down so they wrap instead of fitting as they should.
Anyone seen anything like this before?
The issue is only on the iPad, not on 'real' computers. The scaling issue is there on Chrome on the iPad as well. The menu should have 5 items, but the last two wrap and because it's white lettering on white back ground, you might not have noticed it.
it should be simple but I don't find how to do it.
I create a form with a right aligned panel that I color in blue for example.
If I grab my forms left edge and resize it back and forth horizontally quickly, I would like the right panel not to move or flicker. As its position is unchanged, there is no reason why it should not stay completely steady. Does anybody know a simple trick to solve this apparently simple problem?
Thanks
This is just a fact of life with Windows GUI apps. You can see the same effect in a WinForms app and indeed even in mainstream Windows apps. For example, open an Explorer window and do exactly the same operation, resize by grabbing the left hand edge of the window. You will see exactly the same effect. You can see the same effect by resizing from any edge. Word and Excel behave in the same way.
My guess is that Windows repaints in the sizing loop before it sends the resizing message that allows the app to realign its controls.
I am working with the iPad (mobile safari):
Question:
Does anyone know how to hide the scrollbars on iPad?
I have looked already looked into webkit scrollbar styling using ::-webkit-scrollbar... This does not work for the main windows scrollbars.
Scenario:
I have an repeating image inside of a div that is over 10,000px by 10,000px. I want the user to be able to swipe the screen to move around over this huge div, which is essentially one big image, WITHOUT the scrollbars showing up.
So I need the functionality of the scrollbars, I just need them to be hidden.
Suggestions?
Thanks for your help!
-slwd
You might be able to use the TouchScroll library: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Otherwise, what I would do is set overflow: hidden on your div and then use JavaScript to implement the scrolling. This will require listening for touchstart, touchmove, and touchend events, and moving the x/y position of your image accordingly. If you need frictional slowing (similar to what's built into scrolling views on mobile Safari) you can implement that as well. Keep track of the dx/dy between touchmove events, use that as a starting velocity for when you receive a touchend, then use setInterval as a timer to apply the friction until some minimum threshold at which you stop the animation.
This is sort of a hack, but: Make your UIWebView about 10px taller and wider than the screen.
(Inspired by someone asking the opposite question.)