search

DataZombies / jQTouch

jQT extensions jqt.activityIndicator, jqt.bars (with numeric badges), jqt.checkGroup & jqt.segmentedControl.Get updates via Twitter http://twitter.com/HeadDZombie. If you find this fork useful please make a donation via PayPal (http://tinyurl.com/2fpmx27). See below for demo links.
MIT License
159 stars 34 forks source link

Scrolling issue #76

Closed webuniverseio closed 12 years ago

webuniverseio commented 12 years ago

Hi again. I have an issue when I'm using tabbar - can't scroll page. I researched your code and found following lines: // Prevent navbar pull-down $('#' + pageID + ' .toolbar ~ div').andSelf().not('.' + jQT.barsSettings.wrapperClass + ', .listIndex').bind('touchmove', function (e) { e.preventDefault(); e.stopPropagation(); });

Once I comment line with preventDefault everything starts working, so I want to clarify, what it supposed to do and what was the issue with navbar? Also why do you need to handle '.listIndex'?

P.s. I don't use iScroll on this page.

Thanks

DataZombies commented 12 years ago

The navbar is the section on the top of an iPhone app that has the back button. In jQT-ish it's the toolbar class (don't ask, I didn't name them). You can't scroll the page because iScroll isn't on it. iScroll is also need to keep the tabbar on the bottom.

webuniverseio commented 12 years ago

Hi,

Here is my situation: I used iScroll, but got same issue with the form elements as here - https://github.com/cubiq/iscroll/issues/74 So I started to search for workaround - covered all form elements with empty span - now I was able to touch form elements and scroll, also I used code which detected if page was scrolled. If not - set focus on element behind empty span. But iphone webkit doesn't allow you to trigger focus, which mean there is no way to focus on input or textarea elements.

So what I did - I check hashChange event and if it is set to specific page (with form) - add class 'whatever' to body. Now, using this class I can remove position absolute from #jqt and it's children - which should make this page scrollable as any other page with long content. But it appeared that now I can scroll page only if touch starts from form element - which reversed things again. I started to turn off stylesheets, then javascript... and finally I found that issue comes from your plugin. Commenting line with e.preventDefault(); will solve my issue, so that is why I'm asking - was there anything really important in this line (or in whole block)?

Thanks

DataZombies commented 12 years ago

It just prevents the user from touching and dragging the nav-bar down which drags down the entire app.