Response title
This is preview!
Move this topic
please need help, jquery mobile listview slow and non smooth scrolling.
in jQuery Mobile
•
1 year ago
hi,
built an app i jquery mobile, it is almost finished, and after deploying the app to phonegap we discovered that the scrolling and the total feeling is not smooth and the scroll is slow and feels weird.
i have tried almost everything,
1) $document.bind("touchstart", function(event){})
2) $.mobile.buttonMarkup.hoverDelay = 0;
3) using scrollview.js (https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview)
4) removed ul > li and placed divs instead, removed anchors <a>
all of the above and nothing has changed, scroll still stuck.
do you have any idea.
try browsing the app in safari in your iphone to see what i'm talking about.
thank you
1
Replies(9)
I find no speed problem at all on my iPhone 4S with iOS 5.1, and only slight degradation on iPhone 4/iOS 4.3.5. It is fast and responsive.
However, there is a fixed footer bar that is not at the bottom of the screen, and covers part of the scrollable page. The scrollable part shows maybe 80 pixels below the fixed footer.
The fixed footer looks like it's supposed to be a tab bar. Not sure if part if it isn't shown, or if it's really short. It's too short to be useful, and the text is so small that it's unreadable. (Notwithstanding the fact that I don't read Hebrew...)
Sometimes the header bar moves to the right, and you just see "Sa", maybe this is intentional? The top of the "S" in the header bar is cut-off, as well.
The address bar appears briefly when navigating to an item.
Buttons in the header bar when on a sub-item are responsive - I'd like to know how you did that!
Well, now, the footer bar finally moved to the bottom of the page. Not sure how that happened. Now when I scroll down, the header and address bar "catch" and scroll down with the content, while the footer bar does stay put.
I see lots of problems - just not the one that you describe!
However, there is a fixed footer bar that is not at the bottom of the screen, and covers part of the scrollable page. The scrollable part shows maybe 80 pixels below the fixed footer.
The fixed footer looks like it's supposed to be a tab bar. Not sure if part if it isn't shown, or if it's really short. It's too short to be useful, and the text is so small that it's unreadable. (Notwithstanding the fact that I don't read Hebrew...)
Sometimes the header bar moves to the right, and you just see "Sa", maybe this is intentional? The top of the "S" in the header bar is cut-off, as well.
The address bar appears briefly when navigating to an item.
Buttons in the header bar when on a sub-item are responsive - I'd like to know how you did that!
Well, now, the footer bar finally moved to the bottom of the page. Not sure how that happened. Now when I scroll down, the header and address bar "catch" and scroll down with the content, while the footer bar does stay put.
I see lots of problems - just not the one that you describe!
Leave a comment on watusiware's reply
thank you for your fast reply,
yes i know about the footer, not a problem at the moment as it only happend after i added scrollview.js, so this is not the issue.
after you tried the app, the scroll seems ok and normal in your opinion?
Leave a comment on oshikernst's reply
It seems faster than normal - at least for JQM.after you tried the app, the scroll seems ok and normal in your opinion?
Leave a comment on watusiware's reply
Seem fine to me too for scrolling. There was a minor pausing while it loaded some images, but not a big deal imho.
---
http://zsprawl.com
---
http://zsprawl.com
Leave a comment on zSprawl's reply
it sort of works on an old HTC Desire, except the footer is bit shifted up.
Just a quick question, do you need to generate the <li>...</li> for every entry? Your interface doesn't look like it needs a listview, it could be all <div> encapsulated in a single <ul><li>...like this
<ul>
<li>
<div> content </div>
<div> content </div>
<div> content </div>
<'li>
</ul>
don't know if that would speed up the performance but you would be scrolling a single <li> effectively?
Leave a comment on myaxeo's reply
If you're going to do that, you might as well get rid of the list altogether.Just a quick question, do you need to generate the <li>...</li> for every entry? Your interface doesn't look like it needs a listview, it could be all <div> encapsulated in a single <ul><li>.
But that can be said of EVERY list. You can use a listview. Or you can use a bunch of divs. The listview makes it more convenient to code.
How much overhead is a listview? I wouldn't think it makes any difference when you are scrolling. Content is content. Listviews have so special scroll functionality. The only overhead, I would think, would be at the time of construction and at the time of refresh. If you insert or change some content, you'd have to call .trigger('create') on the parent if it's not a listview. If it's a listview, then you need to call .listview('refresh'). Is one significantly slower than the other?
Leave a comment on watusiware's reply
jquery.mobile-1.1.1
removing the content wrapper fixed it for me.
it scrolls just as smooth as a webpage in safari.
removing the content wrapper fixed it for me.
- <div data-role='content'> </div>
it scrolls just as smooth as a webpage in safari.
Leave a comment on theremix's reply
scrollview only works with data-role='content' if I moved the stuff out it won't work
Leave a comment on skoizumi's reply
in i application which i am developing there is a page with two textbox and one submit button, the textboxs are but the button is not visible and it show only a line, it is due to screen size i try to scroll the page but it is not working. i am testing BlackBerry curve 9360,
<div data-role="page" id="pincode_pg" data-title="pincode_page"
data-theme="a" x-blackberry-focusable="true">
<div data-role="header">
<a data-role="none" class="logo_img"> <img
class="banner" />
</a>
<div class="separator"></div>
<div class="sub-title">Please enter your log-in details</div>
<div class="separator"></div>
</div>
<div data-role="content">
<div class="ui-grid-b noscroll" id="numpad">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true"><label for="userEmail"> Email: </label> <input name="userEmail"
id="userEmail" placeholder="e.g: user@email.com" value=""
type="email"/>
</fieldset>
</div>
<div id="pinGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="userPin"> Pin: </label> <input name="userPin"
id="userPin" placeholder="e.g: 12345" value="" type="password"
pattern="\d*" "/>
</fieldset>
</div>
</div>
<a id="btnLogin" data-role="button" data-theme="x"
style="padding: 10px"> Submit </a>
<!-- </div> -->
</div>
</div>
Please hlep
Leave a comment on yamafarooq's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to oshikernst's question
Statistics
- 9 Replies
- 5231 Views
- 1 Followers
