jQuery Forum

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

1 year ago

I'm pleased to announce the release of Version 1.1 of jquery-mobile-iscrollview.

Version 1.1 includes an important bug fix: previous versions (as well as jquery-mobile-iscroll, which jquery-mobile-iscrollview was initially based on) incorrectly sized the wrapper in some cases. The code now takes into account the box-sizing model of the wrapper element when setting the size of the wrapper. This was incorrectly and inaccurately handled previously using a "magic number" adjustment.

Additionally, Version 1.1 adds accessors for several iScroll internal variables, and adds an optional callback function and context to the refresh() method. A new option, wrapperAdd has been added, allowing you to add an arbitrary value to the wrapper height.

As well, the code has be significantly refactored.

New documentation has been added, including:

Scrolling data-inset="true" listviews
Customizing scrollbars
Hints on using with multiple scroll areas
Documentation on the fixInput option

zSprawl

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

1 year ago

I set this up and it works better than the existing wrapper.

The one change I had to make was to have it refresh on the "pageshow" event instead of the "pagebeforeshow" event. Unfortunately, combined with jQM's "fade" transition, it creates a very noticeable flash. It isn't a deal breaker per-say, but I have to admit annoying. Not sure if it is this plugins "fault".

Perhaps the answer is moving back to pagebeforeshow, but for whatever reason it would set the height attribute for the iscroll-wrapper to 0.

Since all of my Apps have been going to the iTunes store recently, I'll stick with the NativeControls plugin through Cordova, but this is a great option for a pure webapp solution.

---
http://zsprawl.com

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

1 year ago

I've de-linted (should have done that sooner) and found some bugs.Scroll bars are now positioned correctly without fiddling with CSS.

I changed the fixInput default from false to true, as it has negligible impact performance-wise (vs. the internal iScroll fix).

I'll be adding a sample of pull-to-refresh in pure JQuery code over the weekend, and then optimizing for JQuery 1.7.x using on() with version detection. I guess that will be 1.2 early next week.

llin96

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

1 year ago

I found a bug while using iscrollview on iPad 2 safari 5.

I am using iscrollview with jquery switch control inside (in listview), run the page on iPad 2 safari 5, when I touch the circle image to switch value, the browser then redirect me to location "#". for example, when I am in http://domain/index.html#bar, after I touch the switch button circle image, the browser location goes to http://domain/index.html#.

I am not sure if it's caused by safari 5 or iscrollview or iSroll 4:

If I run the page on PC with safari 5, everything works correct.
If I run the page on iPad2 with safari 5 but remove iscrollview and iScroll 4, everything works correct, too

Using firebug to check DOM elements, I find jquery mobile generate <a href="#"...>..</a> child element for a circle button. I guess something caused by iscrollview (or iScroll 4) which redirect me to "#" while touch the circle image.

Any help on this would be appreciate!

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

1 year ago

I'm using it in my own app with a slider with no trouble. I don't have an iPad 2, but I test on iPhone 4, 4S, iPad 1 and New iPad.

Can you show an example of your page?

I'm going to be adding a form page to the demo. I'll make sure to include a slider.

llin96

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

1 year ago

Thank you for your quick reply!

I also tested on iPad 1 without any issue.

Make sure you add the switch(on/off) control and press the circle to switch value (the problem reproduced only when the circle pressed).

I will show my example later. Basically I am using Backbone 0.9.2 with JQuery Mobile 1.1.0, the listview was generated via template (using Underscore) after backbone Model load the data.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I've pushed version 1.2pre1 to GitHub!

This is a very significant update. It include support for pull-down/pull-up, fixes some important bugs on iOS, and is very much faster than 1.1. (as much as 10X in some aspects). Please see the documentation and release notes for details.

If you have tried jquery.mobile.iscrollview before, and encountered bugs or performance issued, I urge you to try this release. I am especially interested in hearing results on Android, because I don't have good access to Android devices for testing.

The demo has been revamped, and now has 5 tabs demonstrating various features, a selector in the header to demo with jQuery Mobile 1.0.1 or 1.1, and demonstrates resizing headers/footers with orientation.

It no longer uses jquery.actual or a patched iscroll.js. It does ship with a patched jQuery Mobile 1.1 that has a proposed fix slated for JQM 1.1.1 that fixes a performance issue with long list views that have links.

I haven't pushed to GitHub in some time, because the code was very much in daily flux, and I didn't feel it was in a state for public consumption. I appreciate everyone's patience. I will be going back to pushing changes close to when they are made.

1.2 started out as a pull-down/pull-up feature release, but I quickly realized that there were some severe performance issues. I added extensive logging features to help me track down where it was spending time, and was able to improve performance dramatically.

First, I noticed that resizing the wrapper and refreshing the scroller were quite slow. So, I added options to minimize the number of resizes and refreshes by deferring them to the next pagebeforeshow if the page is not the currently-displayed page.

This helped, but the resizing and refreshing was still unreasonably slow in some cases, as was initial construction so I invested further and found the bottleneck to be jquery.actual. jquery.actual allows you to get the size of a hidden element. jQuery Mobile hides pages that aren't the current page.

I didn't want to give up clean visual construction and build the widget on pageshow (where jquery.actual) wouldn't be needed) so I looked at jquery.actual to see if I could find a way to speed it up. I did find a way (2X or so). That change was submitted as a pull request and accepted, and so jquery.actual now benefits from this performance increase.

Ultimately, I eliminated jquery.actual entirely, because it does more than is needed in the particular case of getting the sizes of elements on a non-current page. This sped things up more.

I also realized that I'd made some bad CSS choices in the demo that compounded the performance issues. Those have been corrected. I managed to find a way to cue Safari to pre-cache list items with unduly affecting initial construction time.

The end result is gratifying: construction of a page with a 400-item list (on iPhone) has gone from 8 seconds with 1.1 to about 1 second. Construction of more typical pages is now a reasonable 100-200mSec - many pages are constructed in only 50mSec or so.

However, I started seeing inconsistent problems with wrapper resizing. Ultimately, it turns out that the sluggish performance of 1.1 was masking some bugs. I started to see the the resizing problems showed up most often on iPhone 4S and the iOS Simulator running on desktop. The widget was now too fast! ;)

The last resizing bug turned out to have to do with jQuery Mobile playing "hide and seek" with persistent footers. It turns out it moves them in and out of the page during page transitions! Catch it at just the right time, and the footer literally isn't there. (Well, it's there, but it's moved out of the page, and temporarily becomes a sibling of the pages.)

frequent

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I second you on resizing elements being a major performance drainer. Also thanks for the other insights (persistent footers - always good to know!)

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Unfortunately I tried the latest github version (from yesterday around noon) with a relatively simple page and couldn't get it to scroll. I did have the header and footer stay fixed after removing the fixed setting, but the list just bounced right back to the top when I tried to scroll down. I couldn't figure out if that is a bug, or a setting that I can't find. Below is my code. Note that I'm not using jquery.actual as described above, and I'm using watusi's patched iscroll because I couldn't find the version mentioned on the github (I figured this one would work regardless). Not that it matters, but this page shows a bunch of connections that are pulled from the user's Contact app using Cordova (previously Phonegap), so it winds up with a pretty long list. I also added createScroller false because I dynamically manipulate the content and the structure is such that I didn't need it anyway, and I removed it with the same result.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>MobileHealthRx</title>
<link href="jquery.mobile-1.0.1/mhrx_custom_jqmtheme.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.0.1/jquery.mobile.structure-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview.css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview-pull.css"/>
<link href="styles/mhrx.css" rel="stylesheet" type="text/css"/>
<script src="scripts/cordova-1.7.0.js" type="text/javascript"></script>
<script src="scripts/json2.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery-1.6.4.js" type="text/javascript"></script>

<script src="scripts/mhrx_init.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="scripts/PushNotification.js" type="text/javascript"></script>
<script src="scripts/UACordovaWrapper.js" type="text/javascript"></script>
<script src="scripts/iscroll.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="scripts/mhrx_core.js" type="text/javascript"></script>
<script src="scripts/mhrx_messages_home.js" type="text/javascript"></script>
<script src="scripts/mhrx_connections_home.js" type="text/javascript"></script>
<script src="scripts/mhrx_settings_home.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="connections_new_from_contact" data-title="Choose Contact">
<div data-role="header"> 
    <a href="connections_home.html"data-icon="arrow-l" data-theme="c" class="ui-btn-left" data-direction="reverse">Cancel</a>
    <h1>Choose a Contact</h1>
</div>
<div data-role="content" data-iscroll='{"createScroller":false}'>
    <div id="contact_list_holder" name="contact_list_holder">
    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search contacts...">
        
        </ul>
    </div>
</div>
<div data-role="footer" data-id="mhrx_footer"> 
    <div data-role="navbar">
      <ul>
        <li><a href="messages_home.html" onTouchEnd='quickClick(this, event, "none" );' data-icon="home">Messages</a></li>
        <li><a href="connections_home.html" onTouchEnd='quickClick(this, event, "none" );' class="ui-btn-active ui-state-persist" data-icon="star">Connections</a></li>
        <li><a href="settings_home.html" onTouchEnd='quickClick(this, event, "none" );' data-icon="gear">Settings</a></li>
      </ul>
    </div>
</div>
</div>

</body>
</html>

Also, each of the rows dynamically added to the list look something like this:

<li><a href="connection_page.html?conn=65" data-transition="slide"><span class="ui-grid-b"><span class="ui-block-a conn-name"><h3>connections name</h3></span><span class="ui-block-b conn-type"><h2>User</h2></span><span class="ui-block-c conn-icon"><img src="icons/unlock.png" width="24" height="24" /></span></span></a></li>

I would really love to use this, because all the scrolling options I have are pretty painful and don't seem to work great. Any help provided would be great.

I also have another page that I use that is much more complicated, with a form in the footer. In that case, the page doesn't scroll at all, and the footer gets pushed partly off the bottom. I'm hoping any solution to the above might help to fix that one, though, so not going to post all that here (yet).

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I would start very simple, by adding `data-iscroll` to a container with some static content inside, and modify from there. I think you're biting-off too much all at once

I would leave createScroller defaulted to `true`, even if you are adding dynamic content. If you set createScroller false, you still have to pay attention toremoveWrapperPadding and addScrollerPadding, the latter of which modifies the structure. Bottom line is I don't really see any good reason to set createScroller false.

Get rid of the createScroller = false, get rid of the content list holder, add a couple of dummy items to the listview, and see what you get. If that works, see if you can add to the list dynamically. If that works, get rid of your static dummy items.

Make sure that you call .refresh() on the widget after you change dynamic content. This is probably why you are getting the "bounce". The scroller needs to know that there was a change so that it knows that the content height has changed. Before you call refresh() on the iscrollview, make sure that you refresh the listview as well.

I'm pretty sure your data-filter is going to be a problem. You will have to add code to react to listview events and refresh the scroller every time the filtered content changes. That's something I will probably support in a future version.

A form in the footer shouldn't be a problem, unless the footer change height dynamically (for example, if the form has a textbox). If it does change size dynamically, you could call .resizeWrapper() when it changes.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Ahh, I wasn't doing the refresh on the widget, let me try that. It seemed to work fine otherwise. Thanks for the heads up on the data-filter, that will hopefully be easy to work around. I'll also try this on the other page, because I wasn't refreshing there either.

Thanks, I'll post back what I find!

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Hi, i tried to use iscroll with and iscrollviews. I noticed that when i have a long list the transitions between pages are very slow. I refresh the wrapper and the list but when i add items to my list (from ajax request or directly in html) the transitions are very very slow. Most long the list most slow the transitions.

You how to fix this problem? I think that this is the only bug in the new version of iscroll/iscrollview infact i use pratically all plug-in included. In particular Pull to refresh.

Thanks for helps!

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I noticed that when i have a long list the transitions between pages are very slow.

That sounds like this bug in jQuery Mobile 1.1 which affects listviews that have links in them:

https://github.com/jquery/jquery-mobile/issues/4340

As a workaround, try with jQuery Mobile 1.0.1/jQuery 1.6.4.

rollingro..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Is this suppose to work for phonegap/android? I tried to use phonegap build with the demo you have and the scroller isn't working at all, fixed tools bars, or the pull down/up functionality.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Itried with JQM 1.0.1 and JQM 1.6.4. Nothing. My long list is very slow when i click on a item.

I post my code, maybe i wrong something:

index.html

<link rel="stylesheet" href="css/jquery.mobile.1.0.1.css">
<link rel="stylesheet" href="css/iscrollviews.css">
<link rel="stylesheet" href="css/iscrollviews-pull.css">
<link rel="stylesheet" href="css/demo.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" charset="utf-8" src="js/jquery1.6.js"></script>
<script src="js/demo.js"></script> -->
<script src="js/jquery.mobile.1.0.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/iscrollviews.js"></script>
<script src="js/pull-example.js"></script>
<script type="text/javascript" charset="utf-8" src="js/js_general.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<body onload="onBodyLoad()">
<div data-role="page" id="home" class="pull-demo-page" >
<div data-role="header" data-position="inline" data-tap-toggle="false">
<h1>INDEX PAGE</h1>
</div>
<div data-role="content" data-iscroll>
<ul data-role="listview" id="list">
</ul>
<div class="iscroll-pullup">
<span class="iscroll-pull-icon"></span>
<span class="iscroll-pull-label"></span>
</div>
</div>
<div data-role="footer" data-position="inline" data-id="my-persistent-footer">
<h1>My Footer</h1>
</div>
</div>
<div data-role="page" id="dynamic" data-add-back-btn="true" data-rel="back">
<div data-role="header" data-position="inline">
<h1>Ajax</h1>
</div>
<div data-role="content" data-iscroll>
<div class="post"></div>
</div>
<div data-role="footer" data-position="inline" data-id="my-persistent-footer">
<h1>My Footer</h1>
</div>
</div>
</body>

js_general.js (for personal ajax request)

$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://www.xxxxxxiphone/ajax.php",
data: "home",
success:function(response){
$("#home #list").append(response)
$("#list").listview("refresh")
$(".iscroll-wrapper").iscrollview("refresh");
}
})
$(".title").live("click",function(){$.mobile.changePage( "#dynamic", { transition: "slide"} )});
})

In pull-example ai modified the code to do an ajax request on my server, i don't thing that is important.

Thanks for help.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

rollingrock83 wrote:

Is this suppose to work for phonegap/android?

Yes.

Please add an issue on Github, and include a small example. Make sure that you include content of your page <head>.

madsex wrote:

My long list is very slow when i click on a item.

Is it still slow if you remove data-iscroll?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I'm very Sorry, not my list is very slow but my transitions from #home to #dynamic are very slow when i click on an item (the firsts are ok but after the thirtieths the transitions are very very slow). If i remove data-scroll the list is blocked, i can't scroll my list.

To clarify. My problem is on the transition beetwen page if i click an item in a very long list.

Thanks for help me!

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I've pushed 1.2pre2 of jquery.mobile.iscrollview to github.

- Bug fixes

- Demo is now generated by Middleman static site generator, and is Lorem®-approved ;)

- Has latest patched jQuery Mobile 1.1 with fix for "long listview" performance bug (previously had a preliminary version of the patch)

- Demo shows how to disable JQM scroll-to-top during transitions (in demo.js) for >1.1 (or patched version). Since the demo only uses iScroll to scroll (and will keep scroll position within scroller), there are no pages taller than device, so it seems appropriate to disable this.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Hi, sorry for later.

I try your sugestion but i can't to find a solution. I used this example to create my dyamic list from my database mysql:

https://github.com/watusi/jquery-mobile-iscrollview

I think that it is the script that you sugested me.

Nothing the transition between pages #home and #dynamic are very slow if i click an item after twentieth, oviusly my list is created dynamicaly. The firsts items are ok but after the twentieth if i click an items transition is very slow, the longer the list the longer the transitions. If i have a list of 50 items and i click on the fiftieth i way 20/25 seconds to see the transition to #dynamic page.

I don't understand how to disable scroll to top. Can you explain me?

Thanks

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

It sounds like you should try jQuery Mobile 1.1.1, just released today. It includes a bugfix that should fix your problem. (Or, you could have tried the patched version of 1.1 included with the jquery.mobile.iscrollview demo.)

Not sure why you are seeing such delays with such a short list, though. Are your list items each very tall? That would explain it, because the bug isn't strictly related to the number of items in the list, but to the height of the list in pixels.

You don't need to disable scroll to top, since the fix addresses this. I do disable it completely in the jquery.mobile.iscrollview demo (not in the plugin itself, though):

if ($.mobile.maxScrollForTransition) {
$.mobile.maxScrollForTransition = function() {
return 0;
};
}

Note that this will only have any effect starting with version 1.1.1 of jQuery Mobile. Older versions don't have $.mobile.maxScrollForTransition, so the code is skipped. Not clear that this really buys you anything if your pages are already just 1X device height.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Just an update that I was able to get mine working well using 1.2pre2. I used it first in jQM 1.0.1, and found the performance pretty good with a list of about 500 <a> elements, and it got better after I did two things:
- Used the CSS snippet on github to get rid of any visual changes when pressing the buttons (I also got rid of the gradient in that, although I'm not sure that it mattered)
- Added the CSS mentioned somewhere to pre-render the list items.

I also just took out the filter, turns out it completely didn't work with a list that long anyway, and would just sit there not doing anything, so it wasn't useful.

However, it was still taking a few seconds to load, to go into list items, and also to come back out. So I decided to try jQM 1.1.1 since that's supposed to be better. Unfortunately, this turned out to be even worse, but throughout the application and not specific to the scroller page. Oh well, I went back to 1.0.1 and everything sped back up.

I may try and implement the vclick trick on the list items to make it a bit faster, but a couple of seconds to load my list, which would be fairly big for many people, is probably okay.

Just a couple of suggestions on documentation, since I approached it as completely naive (that was easy):
- The JS file still mentions a dependency on jquery,actual, which it doesn't have.
- The section in the documentation re: dynamic content should probably mention the need to call refresh. Refresh itself is mentioned further down, but I couldn't find anywhere that it said it needs to be included, and that was my primary problem the first time around.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Oh, and I forgot to ask, is there a way in this or in iscroll to scroll to the bottom of the content? Based on the documentation it looks like I could use something like:

$(".example-wrapper").jqmData('iscrollview').scrollTo(0,maxScrollY());

Would that be accurate?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Thank you - specific feedback like this on documentation is very useful. I'll incorporate your suggestions.

To scroll to the bottom:

var v = $(".example-wrapper").jqmData('iscrollview");
v.scrollTo(0, v.maxScrollY();

Alternately, you can scroll to the last element, which I do in the demo (pull-example.js):

$("example-wrapper").iscrollview("scrollToElement", ".example-list > li:last-child");

In this case, you need to know enough about the structure of the content to be able to locate the last item.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Thanks for the response. In case anyone is interested, below is a sample page that tests out a scroller for dynamic content load of a long list, very similar to what my page looks like (minus all my junk).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no" />
<title>Scroll test</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview.css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview-pull.css"/>
<script src="scripts/jquery.mobile-1.0.1/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="scripts/iscroll_watusi.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript">
$('#index_page').live("pagebeforeshow",function(event, data) {
    var items = [];
    for (i=0; i<100; i++) {
            items.push('<li><a href="#?id=' + i + '" data-transition="none">First Lastname</a></li>');
    }
    $("#contact_list_holder > ul").html(items.join(''));
    $("#contact_list_holder > ul").listview('refresh');
    var v = $(".iscroll-wrapper").jqmData('iscrollview');
    v.refresh(null, null, function afterRefreshCallback() {
            v.scrollToElement("#contact_list_holder > ul > li:last-child");
            //v.scrollTo(0, v.maxScrollY());
        }
    );
});
</script>
</head>
<body>
<div data-role="page" id="index_page" data-title="title">
<div data-role="content" data-iscroll>

    <div id="contact_list_holder" name="contact_list_holder" >
          <ul data-role="listview" >
              
        </ul>
    </div>

</div></div>
</body>
</html>

What's written above actually does what I wanted it to, but there were three challenges that I wanted to mention (all probably documentation-related):

The use of the callback in refresh was critical, and without that it simply wouldn't work. I know that appears in the examples, but I think it's something that should go along with my prior comment about including refresh in the dynamic content section. I imagine it's more relevant the longer the list, but didn't try out variants. Now that I think about it, though, this may only be relevant if you were actually doing something after it's ready, so maybe it should be in the scrollTo section instead? That's still a pretty common scenario, I think.
There's a small typo in your maxScrollY piece above, which is calling it as a function with parentheses (your 2nd one got dropped). This threw me off for a while because I was looking at the iscroll documentation, where you can call maxScrollY as a variable w/o the parens, but in this it has to have them.
This is admittedly a minor one, but the use of the ".example-wrapper" in the documentation was somewhat confusing, and it was simpler to just use ".iscroll-wrapper" in mine. That said, I know this is in case you have multiple scrollers, but in that case I think you may want it to be a "#example-wrapper" so that they can control each one individually. Probably including the class="example-wrapper" in the sample at the top would have clarified this completely for me.

For anybody doing dynamic content, it was also important to have the "double" <div> structure in the page because of the extra divs that get added in between the div with data-iscroll and its immediate child element, that's why I have the data-iscroll one level higher than I otherwise would have needed it. I could have also changed my code to insert the dynamic content at $("#content_list_holder > div > div > ul") or something similar, but that just seemed ugly and maybe a bit too fragile.

Anyway, thanks for the help, this has totally saved me tons of frustration, wish it had existed two months ago before I spent days struggling with it!

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I try to avoid using IDs. I know you *can* use them in jQuery Mobile, if you are careful. But I just always use classes. Of course, I still have to make sure they are unique if I mean to have/effect only one of them.

Since each element created by jquery.mobile.iscrollview gets a class, it's easy to navigate to them from the wrapper. I will try to emphasize this more in the docs. The additional structure that is added is fairly recent, and was put there to support pull-down/pull-up.

So, if I want to get at the scroller content, without having to add a class to a listview or other container, I just do (for example):

$(".my-wrapper").find(".iscroll-content")

or

$(".iscroll-content", ".my-wrapper")

(I've been switching to using the first form above, because it shows more clearly what you are doing, and I've read it's faster than the second form.)

Then you can use the object returned to insert/delete/change content, refresh a listview, etc. and you don't need to create any of the extra structure. Just stick data-iscroll on your listview div.

I suppose this would be a useful utility function to add. So, in some future version:

$(".my-wrapper").iscrollview("content")

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Thanks for the additional info, that's good to know.

I worked on this some more enabling it throughout my app, and ran into some things that are either issues or limitations (depending on how you define them). Code is at the bottom for both.

First is that it doesn't work well inside of dialog pages on iOS. What happens is that the list is set up almost behind the header (if there is one), and runs on off the bottom of the page. Even if there aren't many on the list, the white background will go off the bottom of the page. Couldn't really figure that one out.

Second is that if you have a page where the data-iscroll element is not the same as the data-role="content" div, then you get a number of odd behaviors. In my example I made it one level down because I had content that appeared above the scrolling div within the content div that shouldn't scroll, so the scrolling had to be one level down. (You can see the extra comment commented out in the first example below.)

In this case, a band of opaque padding (15px) shows up around the whole list, cutting off the edges. This also messes up the fixed footers, which now pop in and out on Firefox, and in iOS will drop most of the way off the bottom of the screen and stay there permanently after initially scrolling.

With CSS, I could fix the formatting, but not the issues with the fixed footer, which would now pop in and out (this is jQM 1.6.4, which has that as the default behavior I think), but I think that only happens if there are fewer list items than the page when I tap the blank space, otherwise it has the vanishing off the bottom issue. I've put the CSS in the files below, and there's an extra for the search field because that is styled slightly differently.

In the examples below, the first is the base file, and the second is the non-working dialog page. I set them up so that you can pick a list item in file 1 and go to the dialog, and then back by closing that. To get a non-working version (which I'll probably paste below these two just to make it easier) do what I said in the comments.

Working base page:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no" />
<title>Scroll test</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview.css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview-pull.css"/>
<script src="scripts/jquery.mobile-1.0.1/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="scripts/iscroll_watusi.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript">
$('#scroll_page').live("pagebeforeshow",function(event, data) {
    var items = [];
    for (i=0; i<50; i++) {
            items.push('<li><a href="scroll-test-dialog.html" data-rel="dialog">First Lastname</a></li>');
    }
    $("#contact_list_holder > ul").html(items.join(''));
    $("#contact_list_holder > ul").listview('refresh');
    var v = $(".iscroll-wrapper").jqmData('iscrollview');
    v.refresh();
});
$('#scroll_page_list').live("pagebeforeshow",function(event, data) {

    var items = [];
    for (i=0; i<50; i++) {
            items.push('<li><a href="#" data-rel="dialog">First Lastname</a></li>');
    }
    $("#contact_list_holder_dialog > ul").html(items.join(''));
    $("#contact_list_holder_dialog > ul").listview('refresh');
    var v = $(".iscroll-wrapper").jqmData('iscrollview');
    v.refresh();
});

</script>
<style type="text/css">
     .test-ul {
        margin: 0px !important;
    }
    .test-iscroll {
        margin: -15px;
    }
    .test-iscroll .ui-listview-filter {
        margin: 0;
    }
</style>
</head>

<body>
<div data-role="dialog" id="scroll_page" data-title="MHRX - Welcome">
<div data-role="header">
    <h1>Choose</h1>
</div>
    
<div data-role="content" data-iscroll >    
    <div > 

        <div id="contact_list_holder" name="contact_list_holder" >
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search connections..."> 
            
            </ul>
        </div>

    </div>
</div>
<div data-role="footer" data-position="fixed" data-id="mhrx_footer">
    <div data-role="navbar">
      <ul>
        <li><a href="messages_home.html" onTouchEnd='quickClick(this, event, "none" );' data-icon="home">Messages</a></li>
        <li><a href="connections_home.html" onTouchEnd='quickClick(this, event, "none" );' class="ui-btn-active ui-state-persist" data-icon="star">Connections</a></li>
        <li><a href="settings_home.html" onTouchEnd='quickClick(this, event, "none" );' data-icon="gear">Settings</a></li>
      </ul>
    </div>
</div>

</div>
</body>
</html>

Non-working dialog (save this as scroll-test-dialog.html):

<!DOCTYPE HTML>
<html>
<head>
</head>

<body>
<div data-role="dialog" id="scroll_page_list" data-title="MHRX - Welcome">
<div data-role="header">
    <h1>Choose</h1>
</div>
<div data-role="content" data-iscroll>
    <div >

        <div id="contact_list_holder_dialog" name="contact_list_holder_dialog" >
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search connections...">
            
            </ul>
        </div>

    </div>
</div>

</div>
</body>
</html>

The non-working base page (just move the data-iscroll one div lower), for brevity just including the content div:

<div data-role="content" >    
    <div data-iscroll> 
        <div id="contact_list_holder" name="contact_list_holder" >
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search connections..."> 
            
            </ul>
        </div>
    </div>
</div>

And lastly the styled version of the non-working one, which looks initially the same as the working one, but the footer doesn't work the same. Again, content div only (the styles are in the first one above).

<div data-role="content" >    
    <div data-iscroll class="test-iscroll" > 
        <div id="contact_list_holder" name="contact_list_holder" >
        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search connections..." class="test-ul"> 
            
            </ul>
        </div>
    </div>
</div>

Note that the issues with the footer can really only be seen in iOS.

Also, I tried adding and removing data-position="fixed" to footers with no change.

I also tried some of the styling tricks above with the dialog but that only made it worse. Running the above code you can see that the styling added to the element is overriding the dialog's default padding of 15px (with 0) and putting that back fixes the boundaries, but not the scrolling off the bottom of the page issue.

Anyway, sorry if these are kind of fringe cases, but I thought I'd pass along what I found in case it helps.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

jquery.mobile.iscrollview doesn't really support fixed headers/footers, and I don't see much need (unless you want to use special features like tap-to-hide). I've improved it's tolerance of fixed headers/footer, but, really, it's better to use inline ones, and then the plugin takes care of sizing the wrapper so that the footer winds-up in the right place. My primary target is iOS, and iOS doesn't normally have weird disappearing headers/footers.

Is there some reason your fixed info above the list has to be in the content section? I do something similar - I have a search bar above scrolling content. Isn't it really just semantics whether you choose to call it "content" or "header"? So, I decided that my search bar is just a second header, and give it an iscroll-fixed class.

The strangeness with padding is an artifact of jQuery Mobile CSS. They put 15px of padding on content. Then they negate that for listviews by putting -15px of margin on the listview, because you generally want a listview to fill the page without padding. (The list elements already have their own padding.) Well, unless you have an inset listview, in which case they don't add the negative margin, because then you *want* the padding. So, you need to keep this in mind. You don't want any padding on the wrapper, because that makes scrolling awkward. (Can't grab the padding.)

I wanted the plugin to work without any fiddling for the common case of applying data-iscroll to the content div with either a listview or an inset listview. This is probably 90% of usage. So, whatever padding is on the wrapper is removed, and added to the scroller.

It's a damned-if-you do/damned-if-you-don't situation. Either you break it for one set of users or the other. I decided to break it for the 10%. The 10% are better equipped to deal with things breaking, and, no, that's not a political commentary. ;)

You can use the removeWrapperPadding and addScrollerPadding options to override the default behavior.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Oh, man, you made my day (week/month), you gave me some ideas that are awesome for a couple of reasons specific to my app (e.g., I hated that form-based picker, but now I can make them a header navbar and it looks way better). It also worked better once I'd taken off all the fixed tags on all the pages and cleaned up some other old stuff.

Any idea why the dialog goes on forever and has the bottom items unreachable? Regular dialogs can scroll forever (or at least a ways). Regardless, I changed the one dialog where I had this issue to a regular page because it made more sense, and I had no idea why it was like that to begin with, and now it also works.

Thanks again for all the help!

lumiereph..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

I've been trying to use your plugin as a solution to prevent horizontal scrollbars (with the huge amount of white space to the right of page) after a Facebook "Post to your Wall" page has been dynamically created. This affects the whole mobile site i.e.every page. Not just the page it returns to. For example, if I hit the back button and go to the home page

I'm using the Facebook Javascript SDK. I'm on iOS 5.1 and jQM 1.1.0. This is a mobile site.

I had a similar problem when first using Photoswipe. Everything worked brilliantly, except when I returned back to the thumbnails and I had the same issue except it was happening vertically.

I solved this by with simple CSS:

#ID_OF_PAGE .ui-content

{ overflow: hidden; }

I've tried all the typical CSS tricks and the only one that kinda works is by something like this for the whole HTML. This does prevent the scrollbars and whitespace, but now all 'data-role' elements i.e. header, content, footer are now scrollable, but without the iOS bounce. Very awkward and not what I'm looking for :

html {

width: 100%;

overflow-x: hidden;

position: absolute;

top: 0;

left: 0;

}

What the above does is similar to what your plugin is capable of doing by doing this, only this does it better:

<div data-role="content" class="example-wrapper" data-iscroll>

When I close out of the Facebook "Post to your Wall" page, I return back to the JQM page and the horizontal scrollbar issue is resolved. However I have to live with the fixed header that it now creates. But the UI still has the bounce.

This however does not solve the problem with the whole site. Is there any way to do something like this? I've tried this already, but does not work.

<div data-role="page" class="example-wrapper" data-iscroll>

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Sorry, you lost me there. Is there something that you think the plugin is doing incorrectly? I can't figure that out from the above. I don't know if you think there is some problem with the plugin, or if you are trying to use it to help you fix some problem you encountered when not using the plugin. And without a picture, I have no idea what you mean by "prevent horizontal scrollbars, with the huge amount of white space to the right".

You can't use the page as a container for iScroll. You can use a <div data-role="content"> though.

I also don't understanding what you are saying about fixed headers. Nor what you mean by "the UI still has the bounce".

Can you clarify?

lumiereph..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Here's a pic of the problem I'm trying to resolve

Sorry for the confusion. This is a photo of my home page which shows the white space problem. If you keep scrolling to the right it will keep going. I don't know if you've experienced this problem or not.

Your plugin is not causing the problem. I was using your plugin to take advantage of it's ability to prevent horizontal scrollbars. I tried using iScroll alone and it didn't work. I believe that is still within the scope of this plugin.

I think you answered my question when you said you can't use iScroll as a container for a page. Really, that's the ideal solution, because it affects all pages on the site. I think I'll just have to keep hacking away.

One thing I did notice from testing is that my "Login to Facebook" button is no longer executing with your plugin. Actually, if you tap it like 10 times it finally launches the login screen. Is there some type of "prevent default" code in your plugin? I'm using it in conjunction with the Facebook JS SDK.

My button looks like so:

<div id="fb-auth" class="btn">Login to Facebook</div>

I just tested it taking your plugin out, and leaving iScroll.js in and now it works. All other "normal" <a href"#"></a> links still work though with your plugin. It's not a huge problem and could be worked around.

I'll let you know if I find some solutions and I'll post here.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

10 months ago

Please try setting the width of the wrapper using CSS.

The browser's layout engine doesn't know or care that you're using iScroll. It sees wide content inside the wrapper, and so the width of the wrapper (and, thus, the entire page, as well) is set to the width of the content.

I don't use horizontal scrolling myself, so it isn't something that has gotten much attention in the plugin. I think now it ought to have an option to automatically set the width of the wrapper, the way it currently sets the height of the wrapper. So, if you are doing horizontal scrolling, it would set the wrapper width to the width of the viewport, and take care of changing it on device rotation.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

I've been playing with this a bit because on one of my pages I have a form field in the footer that the user can enter in additional info to the page (like a new blog entry) and can also scroll through the content on the page above that. Like you mentioned somewhere, this plug-in doesn't handle the situation with inputs very well, and I see a mention on github about a possible fix for 1.3. Basically what happens is that when I click on the textarea, the entire page scrolls up and then immediately back down, hiding the textarea, then as soon as I type in the field the textarea pops back up to be visible and the rest of the page vanishes. I've tried various tricks to resize the viewport, like calling a refresh on the focus event, or setting focus as one of the refreshEvents, but they don't fix the issue. Interestingly, if I add data-position="fixed" onto the footer, it has the above behavior the first time and then every subsequent time seems to work fine (like if I hit Done to close the keyboard and then focus it again to re-open it).

I'm wondering if you've developed this code already, and if so if I could assist in testing it out, or if it's planned to be on github in the near future? I'm hoping to submit my app to Apple by the end of this week, and this glitch may be enough to get rejected. My fallback is to go back to the old iScroll setup I had, but that has a noticeable delay in scrolling to the bottom due to the lack of an event to trigger the scrollTo (I have to use a hard-coded setTimeout instead, and make it long to catch any unusual delays).

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

drmike01: I actually have a couple of pages that are set-up similar to the one you describe, and I actually have no problem with this. Since the footer is outside of the scroller, iScroll shouldn't come into play at all during input.

Actually, I have two cases. In one case, the user can enter a text message in a footer at the bottom of the page. It's the only footer on that page.

In the other case, I have a search bar at the top of a page. There are actually two headers on this page, one has some select buttons to select 3 different lists (actually, just page transitions), and then under that is a search bar on one of the pages. The search bar has the iscroll-fixed class. There's no footer on this page.

I think what you are seeing may not have anything to to with iScroll, then. Did you try without it?

The demo has a small bit of Javascript that isn't actually a part of the plugin which may be useful. See the mobileSafariFormsAssistantHack() function in demo.js. I debated putting this in the plugin, and decided that since it has nothing to do with iScroll, it doesn't belong in the plugin. I don't use this in my own application, because it doesn't seem necessary. I believe the Rhodes platform that I use takes care of this for me. If you are using PhoneGap or some other platform, though, perhaps it does not. It was necessary in the demo.

BTW, I'm interested in hearing from people who have had apps approved in the Apple App Store, especially if you are willing to allow me to link to your app page in the store. I'd like to point potential users to successful use of the plugin in approved apps.

To answer your question about the code to have iScroll get out of the way during input: it's only partially developed at this point. I've written the code to restore the page to no-iscroll but there is a focus problem I have to deal with. Once that is fixed, I will add the code that adds iScroll back to the page. I'm trying to make sure that the code doesn't do any more than necessary to get iScroll out of the way, so I don't really return the page to a virgin state (as calling destroy() does.)

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hmm, that's strange then. In mine, I have both a fixed header and footer. If I remove any scroller library (this or iScroll), and put data-position="fixed" on my header and footer, then the behavior of the headers and footers is more or less okay, although they have a number of inconsistent glitches when combined with the scrolling, which IIRC are issues with jQM 1.6.4, and why I stopped relying on that for this. This is inside PhoneGap, but so was my other working version.

When I used just iScroll, it worked perfectly for the positioning aspect of it, however I had the issue of it not scrolling to the bottom gracefully, so I switched it to this when it became available (this had other benefits too for a long list I was dealing with).

Now with this, it does a behavior where it loads fine, then when I hit the form field to type something in, the entire window slides up with the keyboard, then immediately the entire screen pops back down and the textarea disappears but the header reappears. If I start typing, the footer comes back up, but the header scrolls off the page entirely and stays off, and the page doesn't resize because I can't scroll to see the stuff at the top of that page. Oddly enough, subsequent taps in the field work in that the footer stays up and doesn't pop back down like the first time, but the header and upper content vanish and can't be brought back into view unless I close the keyboard. It's almost like it is trying to reposition the header to be at the top after the kb opens, but then doesn't resize the page correctly on the first time, and then never tries again.

I checked out the extra bit of code you point out from the demo, but it didn't seem like it would apply to my situation since it deals with an issue when the keyboard closes, whereas mine happens when it opens.

The only other thing I could think of is that I load the page dynamically and refresh the scroller afterwards, but that doesn't seem like it should matter because the issue isn't on load (which works fine, including scrolling to the bottom), but instead as soon as I focus on that field.

Yes, definitely happy to have you post a link to it, assuming I can get it to work. ;) Actually it works fine on my other pages that don't have forms, but can't get it working on this.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Are you using fixed headers/footers or inline?

The plugin works best with inline headers/footers. I've seen some problems with fixed. Could you please try inline? The plugin will size the wrapper so that they work like fixed (except for features like tap-to-hide.)

I don't like the way the fixed headers/footers work at all in any case, so I haven't paid much attention to supporting them with the plugin.

I'm thinking you might be having a problem with tap-to-hide, and/or the fade feature. IMO (feel free to disagree! ;) ) both are distracting nonsense.

If you really need to use a fixed footer, you will probably have to prevent the taps in the form from reaching the footer element, where they will be seen as an request to hide/reveal.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

They're all inline.

Interestingly, one page is longer and requires scrolling when it is loaded, and the others do not (same page, just different dynamic content). The one that requires scrolling when it is loaded will quite frequently (~50% of the time) work correctly (although header still goes off the top regardless), whereas the ones that don't need scrolling at the beginning never work correctly. I tried disabling the scroll completely and that didn't change the behavior.

My page code is below, in case you can see anything obviously wrong with it (I can't, been staring at it too long):

<div data-role="page" id="message_page" data-title="Message">
<div data-role="header" data-position="inline">
    <a href="messages_home.html" onTouchEnd="quickClick(this, event, 'none');" data-icon="arrow-l" data-theme="c" class="ui-btn-left" data-direction="reverse">  </a>
    <h1 id="name_header" ></h1>
</div>
<div data-role="content" id="message_scroll_wrapper" data-iscroll="">
    <div name="msg_holder" id="msg_holder">
      
    </div>
</div>
    <div data-role="footer" class="ui-hide-label ui-body-c msg_text_input_contain" data-position="inline">
      <form id="new_msg_form" action="" method="">
        <input type="hidden" id="msg" name="msg" value="" />
        <input type="hidden" id="other_user" name="other_user" value="" />
          <div class="ui-grid-a">
            <div class="ui-block-a msg_text_field">
              <label for="new_msg_text">New Message:</label>
              <textarea id="new_msg_text" name="new_msg_text" class="msg_text_input" placeholder="Enter message"></textarea>
            </div>
            <div class="ui-block-b msg_send_btn">
                <span class="msg_text_send_btn" id="sendBtn">
                      <input id="msgSubmitBtn" type="button" value="Send" data-role="button" data-inline="true" data-theme="b" class="mhrx-mini"/>
                  </span>
            </div>
          </div>
      </form>
</div>
</div>

Also, the code that I used to initialize the scroller after dynamically loading the content this looks like this:

var v = $("#message_scroll_wrapper").jqmData('iscrollview');
v.refresh(null, null, function afterRefreshCallback() {
       if (v.maxScrollY() < 0) {
            v.scrollTo(0, v.maxScrollY());
      }
});

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Can you try with a plain text input, rather than textarea?

I don't understand the bit about the page that has to be scrolled. Is this that page?

The plugin makes the assumption that the page doesn't have to be scrolled. It will size the wrapper so that the page is the height of the viewport. So, if you want to use a scroller in a page that itself will scroll, you need to set some options, most importantly, resizeWrapper=false.

If you are using resizeWrapper=true, and the height of your header or footer changes, you need to call resizeWrapper() yourself (and refresh the scroller, of course) when that happens. (It's done for you on orientationchange.) Of course, a textarea in your footer is going to make the height of the footer change.

So, you would need to bind to whatever event is triggered when the textarea grows or shrinks. (Dunno what it is off the top of my head.)

By default, the plugin prevents the user from scrolling the page itself. You can use the preventPageScroll option (set to false) if you want to permit the user to scroll the page.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

I just tried with text instead of textarea, unfortunately the same effect occurred.

Sorry, I didn't explain that well about the page scrolling. The only part that needs scrolling is the content div, with the fixed header/footer around that. What I meant was for a specific thread seen through this page, it had to scroll when it was loaded because the thread was so long, and for the other threads seen through this page they did not need to scroll because they were short enough to all fit. I scroll them to the bottom of the thread after they load so that the user can see the latest.

On a whim, I swapped in jQM 1.1.1 and jQuery 1.7.1 to see if that might be the culprit, but there was no difference.

So, I made a test page to see if this worked even with a very basic example, however the problem was still there, this time just using iOS Safari looking at a static web page (no PhoneGap, no dynamic load or scroller refresh). Interestingly, using the inline header and footer caused the instant pop-down of the footer, whereas changing them to be a fixed header and footer caused the footer to stay where I wanted it to. In both cases, however, the header was moved off (although the fixed one sometimes lazily reappeared at the top, not reliably though). In this case, having them set to fixed seemed to get the best result I could get, although still not optimal. Check it out and see.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Test page</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview.css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview-pull.css"/>
<script src="scripts/jquery.mobile-1.0.1/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="scripts/iscroll.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="message_page" data-title="test">
<div data-role="header" data-position="inline">
    <h1 id="name_header" >Test page</h1>
</div>
<div data-role="content" id="message_scroll_wrapper" data-iscroll="">
    <div name="msg_holder" id="msg_holder">
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
        <p>Jul 25, 2012 16:10</p><p>Test</p>
    </div>
</div>
    <div data-role="footer" class="ui-hide-label ui-body-c msg_text_input_contain" data-position="inline">
      <form id="new_msg_form" action="" method="">
              <input type="text" id="new_msg_text" name="new_msg_text" class="msg_text_input" placeholder="Enter message b"/>
      </form>
</div>
</div>
</body>
</html>

Based on this, it seems like whatever would keep the footer stuck where it needs to be isn't keeping it there the first time I pop up the keyboard, but is after that, because after using the keyboard once the footer stays in the right spot.

alexander..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hi,
Thanks for the great widget, it does exactly what I need and looks very promising, but unfortunately cant get it working so well :/
I need to have content scrollable in both directions, and zoom with pinch

<div data-role="content" data-theme="a" data-iscroll='{"hScroll":true,"vScroll":true,"zoom":true,"resizeEvents":"orientationchange"}' >

This is the call I make, but I get only vertical scroll and sketchy double-tap zoom(works from time to time...)

I have image with size 850x1100px and I want the user to be able to drag it around(scroll vertically and horisontally)

currently the double-tap zooms (sometimes) and when its on zoom, I can scroll in both directions, but still not through the whole image..

Do you have any ideas what can cause problems, maybe I'm missing something ?

Thanks in advance,

All the best,
Alexander

Where should I look for the problem

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

For horizontal scroll, make sure that you set the width of the wrapper. The plugin (currently) doesn't do this for you. By default, it does set the height of the wrapper so that it fills the space left after headers/footers.

If you don't set the width of the wrapper, it will go to the width of content, and of course there is nothing to scroll horizontally.

Setting the width of the wrapper the way the plugin does now for the height is something I mean to address in the future.

Horizontal scrolling isn't something that I do or have tested, though others have commented that they are doing so.

You might also want to check the iScroll Google Group, I seem to recall some discussion there recently about zoom issues that might be related.

https://groups.google.com/forum/?fromgroups#!forum/iscroll

alexander..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hi,
thank you very much for your reply.

I've added a resize function, that sets the width of the content_wrapper

Now the wrapper has width and height, as you see the content is bigger than the wrapper (on mobile device)
but still no horizontal scroll appear.

btw, I would be happy to hire you in order to help me get these issues sorted out since they are slowing my progress. Please let me know if this is possible.

Thank you very much :)

<script type='text/javascript'>
$(function(){
function reSize() {
$('.content_wrapper').css({'width':(($(window).width()))+'px'});
}
$(document).ready(reSize);
$(window).resize(reSize);
});
</script>

            <div data-role="content" data-theme="a"              data-iscroll='{"hScroll":true,"vScroll":true,"resizeEvents":"orientationchange"}' class="content_wrapper">
                <div style="width: 850px; height: 1103px;display: block">
                    <img src="850x.jpg" style="width: 850px; height: 1103px;">

                </div>
            </div>

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Alexander, I've sent you a private message.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hi,

Even I'm looking to create a horizontal scrolling using your iScroll widget.

My requirement is to have a horizontal scrollable content area with list of divs/columns and page should also have fixed header and footer with vertical scrolling disabled.

Could you please help me or share the steps to enable horizontal scrolling and disable vertical scrolling.

No luck trying the above code as alexander.petrov.snade

Please help and hope you dont mind making the solution open-source in true sense. ;-)

Thanks in advance.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Version 1.2.1, bugfix to work with jQuery Mobile 1.2 alpha

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hi,

I used the iScroll4 to implement the horizontal scroll in my jQuery mobile application. But still it would be great if I could use your widget to do the same.

Can you please let me know what are the steps to implement horizontal scroll just like the example in iScroll4 (horizontal-scroll).

Thanks for your help in advance.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

so what is everyone doing for the situation when the device's keyboard overlaps a text input and u can't scroll to see what you are typing because it is art the bottom on the scroll view?

i also noticed that the android text box overlay is offset from the input itself when the keyboard is active...

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

I really don't think that iScroll is appropriate for input forms on mobile devices at all. That's why my solution is going to be to have it get out of the way during input.

In the mean time, the workaround is to not use iScroll on pages with input forms.

I am, however, using it successfully with form elements in a header or footer, as when doing search, message entry, etc. Of course, in that case, iScroll isn't involved.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

ohhhh....

thing is, i have a list of contact information, where in each <li> there are address/phone/email fields that the user can edit. some users have a long list of contact info and we need to scroll it unfortunately.

what do u recommend in this case?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

On a mobile device, it's really more appropriate to have a separate page for editing a single item. This is the usual interaction model, and the one advocated by Apple, for example.

You should be able to fit a form to edit a single contact on a page.

So, you just have a scrollable list where you click on the item (or use a split-button list, if you have some other functionality from clicking on an item) to bring up an edit form.

If you're designing for tablets, of course, this becomes a grey area. Tablets *are* pretty well-suited for dealing with tables, but still it's tricky because the performance you'd like just isn't there.

For example, show me a "TV Listings" app using HTML5 that really works with acceptable performance. They all pretty-much stink.

So, it's best to avoid complicating the list. You just make already-bad performance worse. You certainly complicate the list by adding a zillion form elements.

Now, certainly, there is a need for long, scrollable forms. Just not for this, IMO. I will eventually be addressing this, first with the "get out of the way" solution, and then perhaps with one that allows iScroll to stay active during input. It would require overriding the page scroll and figuring-out where to scroll within the scroller.

I'm dubious on the latter because it's of limited functionality. What's the point of scrolling that tiny window that's left once the keyboard is up? Is it needed - or even desirable - to have the header/footer present while doing input? What purpose do they serve, given very limited screen real-estate?

So, I think it's better for iScroll to get out of the way (and optionally hide header/footer) and let the NEXT/PREV buttons work they way the device maker intended.

I do need the first solution for my own app, so this will probably happen within, say, the next month.

I am always open, of course, to contributions to the repo. Fix it, and I'll share it. ;)

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

got it thanks man

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

@watusiware

Would you be able to post a sample of the version that you have that has a form element in the footer that works? As I described in my example above, I can replicate the issue of the header/footer not staying put unless I have data-position="fixed" there.

Also, I've been playing with deploying this with PG on Android now that iOS is pretty much done. I'm using Android 2.2. In that, the pages don't scroll at all, and the debugger (from Eclipse) spits out the following errors:

08-02 11:57:47.398: D/CordovaLog(4890): Uncaught TypeError: Object #<a TouchEvent> has no method 'stopImmediatePropagation'
08-02 11:57:47.398: D/CordovaLog(4890): file:///android_asset/www/scripts/jquery.mobile.iscrollview.js: Line 155 : Uncaught TypeError: Object #<a TouchEvent> has no method 'stopImmediatePropagation'
08-02 11:57:47.398: E/Web Console(4890): Uncaught TypeError: Object #<a TouchEvent> has no method 'stopImmediatePropagation' at file:///android_asset/www/scripts/jquery.mobile.iscrollview.js:155
08-02 11:57:47.523: W/webview(4890): Miss a drag as we are waiting for WebCore's response for touch down.

This is strange, because my <head> includes jQuery, which is where that event comes from. My head is below, if interested:

<link href="jquery.mobile-1.0.1/my_custom_jqmtheme.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.0.1/jquery.mobile.structure-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview.css"/>
<link rel="stylesheet" href="styles/jquery.mobile.iscrollview-pull.css"/>
<link href="styles/my.css" rel="stylesheet" type="text/css"/>
<script src="scripts/cordova-1.7.0.js" type="text/javascript"></script>
<script src="scripts/json2.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/my_init.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="scripts/PushNotification.js" type="text/javascript"></script>
<script src="scripts/UACordovaWrapper.js" type="text/javascript"></script>
<script src="scripts/iscroll.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="scripts/my_core.js" type="text/javascript"></script>
<script src="scripts/my_messages_home.js" type="text/javascript"></script>
<script src="scripts/my_connections_home.js" type="text/javascript"></script>
<script src="scripts/my_settings_home.js" type="text/javascript"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#myapp1001"></script>

Hope this helps on the Android front. I did some Google searching to see if this is a known issue, but couldn't drum up anything. It seems unusual because the function is loaded via jQuery, and all the rest of jQM and jQuery functions work fine except this one error in the scrolling.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

I don't know why stopImmediatePropagation is turning-up undefined in the event object.

However, here's a quick workaround: simply returning false will do the same thing. So, try replacing that line with return false; and let me know what happens.

The form element in the footer is in a Rhodes app, so it's comparing apples and oranges. Did you try it in a simple demo page outside of PhoneGap?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Okay, putting in return false; at that spot totally solved it, now it scrolls fine again. Very odd.

Yes, the code I posted last week (above in this thread), if I put it in a simple page will reproduce the odd behavior in iOS with a text input field in the footer. I think I mentioned this, but changing the data-position to fixed in the footer makes the footer work fine, although I have to use an input text field and not textarea (the resizing on a textarea causes it to jump up and down several times before finally righting itself). The header, though, scrolls off and I can't see the top of the scrollable content while the keyboard is open regardless.

Interestingly, on Android, using data-position=fixed causes an issue (it forces the keyboard closed after the first time trying to type, but works fine after that). Using no data-position works well. The only issue I had was that after opening the keyboard, the background scroller didn't reposition to be at the bottom. I imagine this is fixable by capturing some sort of event. Otherwise it works like iOS does with inline data-position, and I can scroll to the top, so hopefully the iOS issue can be resolved and I can switch that to inline too.

One other somewhat unusual thing I found is that, even though I trigger 'create' on the page prior to activating the scroller and after loading my dynamic content the page seemingly wasn't fully created before the scroller did its thing, and so the height of the elements wasn't set. This caused an issue using no data-position, as initially part of my footer was scrolled off the bottom of the page, but it would reset fine as soon as I did anything. This turned out to be because the content of one of the sections in the footer was added dynamically into an empty area, and once I put some placeholder content there, which I then replaced dynamically, the footer position was fine. Admittedly, I'm on what is a relatively slow device, though, so that may be causing that issue.

EDIT: turns out this resize-before-scroll thing was happening on iOS too, it was just masked by the footer repositioning correctly to the bottom afterwards. I had put in a workaround to move the content up higher due to this issue, which I was able to remove now that I figured out this bit.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hello All,

IS THERE ANYONE WHO CAN HELP ME HERE!!!

Can you please let me know what are the steps to implement horizontal scroll just like the example in iScroll4 (horizontal-scroll).

I tried the following but still no use:

JS:

$(document).ready(function(){
var scroller = $(".iscroll-wrapper").jqmData('iscrollview');
scroller.refresh(null, function(){
$('.iscroll-content').width('4040px');
$('.iscroll-wrapper').width('4040px');
});
scroller.resizeWrapper();
});

HTML:

<div id="wrap" style="width:4040px;" data-iscroll='{"hScroll":true,"vScroll":false,"resizeEvents":"orientationchange"}' data-role="content">
<div id="panel">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ul>
</div>
</div>

Screenshot:

What is it I'm missing here.. Still horizontal scroll bar does not appear.. I could inspect all the height and width is set properly.. Please help me !!!

Thanks.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Patience, grasshopper! ;)

I expect an update in the next few days with any necessary changes, demo, and documentation. I realize that this is a pretty common need, but it isn't the 80% case the plugin was designed for. I know it's the most common unmet need now.

In the meantime:

1. $document.ready() is a no-go in jQuery Mobile. Big yellow box at the top of the page:

http://jquerymobile.com/demos/1.1.1/docs/api/events.html

2. To scroll horizontally, wrapper width needs to be page width or less. Scroller width needs to be width of content. Has to be set explicitly (at least for text), unlike vertical. It's the way HTML flow works.

I'll be adding options to make this easy so that developers don't have to do a lot of work.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hi,

Well just to keep you updated horizontal scrolling is working now, but there is a problem that the (grey) scrollbar is not visually seen on the page at the bottom. Any heads up on that would really help me as of now until there is a update.

Thanks.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Oh no, Just started working with jQuery mobile for past 1 week.

Guess I need to learn my basics first!!!

Btw thanks a lot for your help and a great widget !!

Eagerly waiting for the next update :D

:(( Patience is virtue :))

canoli

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

First, thank you for iscrollview. It works with less hassle then iscroll. However, I find it hard to get it to work with jqm on every page, not just the first. Without a page refresh or via a link with rel="external" I can't get the scroller to work. What's the proper code to get this working?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

I find it hard to get it to work with jqm on every page, not just the first. Without a page refresh or via a link with rel="external" I can't get the scroller to work. What's the proper code to get this working?

All you need to do is link the resources in the proper order, and add data-iscroll to the content <div> of each page. (Of course, there are other possibilities, but this is the easiest and most simple case.)

Oh, and make sure your headers and footers are using data-inline="true".

You should be able to get this to work on a 5-page site in under 10 minutes. That's if you type slowly and are a bad speller.

Did you try the demo, and follow how it is set-up? There are 5 pages in the demo, and they all work fine. I only link rel="external" for the button that switches between JQM 1.0.1 and JQM 1.1.1. All the other links (on the menu bar at the bottom) are not rel="external".

I suspect your code has other problems. It would be useful to post the content of <head>.

canoli

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

thanks for your quick reply. You were right, it is easy and I should have spotted what I was doing wrong, but I guess I had been staring to the screen to long...

I didn't included the links to the script in the head on the first page (where there isn't a scrolling div) to the pages where there are scrolling divs. After I did include the .js in that page, it worked like a charm. Thanks again!

BTW: Horizontal and vertical scrolling works fine on samsung galaxy apollo with android 2.3.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hey, sorry for dropping the ball on horizontal scrolling.

Yes, it turns out that horizontal scrolling has always worked. It just needs a bit of documentation and an example. I hadn't had a need, but a client came along who did, so it got figured-out ;)

I will try to get to that in the next day or two. I have a backlog of stuff I've been doing for people that I want to get into the repo.

The Reader's Digest version:

- Make sure to set the hScroll and hScrollBar options true.

- Add CSS to make .iscroll-scroller display:block or display:inline-block. This is probably what most people are missing. HTML layout just works differently horizontally and vertically, especially if dealing with text!

If you use inline-block, then it will pick up the dimensions of contained elements. If you use block, you will need to explicitly give width and height in the CSS. If you use inline-block, though, you need to learn the special rules for alignment of horizontal layouts using inline-block.

I'll be adding documentation and examples for horizontal scroll and zoom, as well as a great new feature called "state classes":

----

Bascially, by default it will add classes to the wrapper to indicate the scroller's current state. scrolling, recently-scrolling, at-top, at-bottom, above-top, below-bottom, zoomed, etc. etc. Well, those are the ones I've thought of so far.

Sure you can do this yourself, but it's a pain. You need to capture some events and keep track of things. It's a lot easier just to check $wrapper.hasClass("scrolling")!

This serves two purposes: it makes is real easy to determine the state of the scroller. And it makes it possible to apply CSS to any element based on the state of the scroller. You should be able to do some really cool stuff just by writing CSS.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

UPD: Small typo: hScrollBar should be hScrollbar

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Brilliant! It works perfectly... Waiting for the next great update!!

Thanks.

canoli

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

hi, me again!

I got a question about iscrollview+jqm+phonegap. Some info first. I've made an app with horizontal scrolling, the horizontal scroll area is 2000 pixels wide and links to pages are arranged in that scrollable area (it's like a timetable).

As a webapp (mobile website): When I click on any of those links (which link to pages) within the apple iphone simulator (comes with xcode) and on my iphone itself a page opens, I can press the back button and the page that was opened earlier opens at the same spot (the same amount of pixels scrolled) when I visited before clicking on the link to a page.

As an app (.ipa): Sadly, above isn't the case when I package the app as an .ipa. When clicking the back button the page opens at the beginning of the page, not at the spot where you clicked on the link to a page.

Can you tell what is causing this behaviour, or even better how to fix it?

Iscrollview is working fine on Samung Galaxy S2 and S3 also btw. Tested it last weekend.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

The iscrollview plugin will maintain your scroll position across pageviews, as long as the page stays in the DOM. So, you need to use data-dom-cache on the page <div>. Otherwise, when you navigate away, depending on where you navigated, it might need to be re-loaded, and of course then the scroll position will not be preserved.

Of course, then, you will need to explicitly delete the page if you ever want to. (But usually in this kind of case, you just want it there all the time.)

JQM only keeps the first page visited, and the current and previous pages in the DOM normally.

Note that if you navigate using data-rel="external", or data-ajax="false", then of course it cannot maintain the scroll position, because now you've unloaded jQuery Mobile, and will start fresh when you navigate back.

So, maybe you followed a different navigation path, or else your navigation works a bit differently on PhoneGap vs webapp.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

9 months ago

Hi,

I'm facing a strange issue, If a click any button when the scrolling is active (i.e.) when the scrolling animation is happening, I get a blank screen.

The button event is actually changing the horizontal scroll to vertical scroll view and that will eventually change the look and feel of the the elements that is being scrolled.

FYI: I'm refreshing the scroller element properly and this issue does not occur when there is no scrolling!

UPD: It is the issue with my code and I found that the elements is scrolled out of view when the button is clicked - So is there any event that will notify when the scroll is in progress? So that I can prevent the button click ... Also still wondering why this does not happen when the scroll is not in motion ?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

struggling a bit here....

when using iscrollview w/ phonegap 1.9 and jqm, i get:

phonegap.js: Line 113 : Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

it looks like it's something to do w/ the addEventListener but cant figure it out...

any ideas???

UPDATE: adding try/catch blocks in all the _bind* or _*Bind methods fixed this issue for me

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

i've noticed that lists scroll extremely well on iOS and Chrome desktop, but really struggle on the Android platform (Evo 3D ICS). Anyone find anything good to help w/ this?

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

I wonder if the translateZ(0) trick for iOS causes some unintended negative side-effect on Android?

iscrollview itself doesn't use this, but the demo does use it in demo.css. If you are using this, you might want to try commenting-out this rule. Just change @media all to @media DISABLED:

@media all {
.iscroll-content li {
-webkit-transform: translateZ(0);
}

This is unnecessary on Android. On iOS, it hints the browser to use hardware acceleration on the selected elements. (Of course, this needs to be tailored to the content you are scrolling. For the demo, it is scrolling <li>s, since it is all listviews.)

I don't have any Android devices, so testing by me on Android has been pretty limited. I depend on others to report any Android problems.

If somebody has an Android device they don't need, it would be put to good use. ;) There's pretty extensive performance logging built-in to the library, which could be used to study and diagnose Android performance.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

i'm not using your css. just the js in my own jquery mobile site/app...

removing data-inset="true" on the ul seems to help quite a bit, but there is still that initial delay when you go to grab and drag. once the motion is started, it's not bad (much slower than native scroll but usable), but there is a delay to start the scroll.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

jemeric, it is initial delay only the first time you grab and drag, or every time?

Does it make a difference once you have scrolled down completely to the bottom? (On iOS, this is a symptom that hardware acceleration wasn't used as you scroll down the list the first time. After you get all the way to the bottom, it is fine. This is eliminated by using the CSS trick, but it also adds some delay up-front. It avoids stutters as you scroll down through the list the first time.)

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

it's every time, even if i go to the bottom... and i guess it's that stutter u mentioned that i am seeing while it's in motion...

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

8 months ago

Version 1.2.5

=============

- Changed demo to use fixed/persistent header and footer.

- Insure that demo gets the current versions of .js and .css from /lib by using relative symlinks.

- Use data-position="fixed" persistent header in demo. The use of persistent header/footer for other than Navbars is poorly documented in JQM. It works great in 1.1.1, but 1.0.1 will always transition the header with the page.

- Use data-position="fixed" footer in demo. This is needed for correct operation of persistent toolbar. This works great in JQM 1.1.1, but there seems to be a slight problem still in 1.0.1,where sometimes you will see the footer slide with the page.

- Fixed Issue #19, syntax error in calculateBarsHeight. This affected projects that use a persistent toolbar.

- Get correct viewport height. The jQuery documentation incorrectly states that viewport height = window height. This is not always the case, as the window height can be set by code, and the viewport height can't. In fact, jQuery Mobile sets the window height to 99.99% of the viewport height. Probably does not make a practical difference in most cases, but it is better to do it correctly, in case a developer decides to go mucking with window height. The viewport is technically the parent of window.

steacha

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

7 months ago

By looking at the sample code, it seems multiple scroll lists are supported within one page, but from my tests it doesn't work: only the first element marked with 'data-iscroll' will show up and work perfectly, while the second one is completely hidden. How would I go about fixing this? (I'm using the latest version from github)

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

7 months ago

only the first element marked with 'data-iscroll' will show up and work perfectly, while the second one is completely hidden.

The plugin is only able to calculate the wrapper height for one scroller. It takes the height of the screen and subtracts headers and footers, along with any other element(s) you designate. What's left is given to the scroller.

If you have more than one scroller, you have to set their height yourself.

See the extensive options. You can disable default behaviors and take over yourself if you need to do something custom. The plugin was designed to make it easy for the common cases.

steacha

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

7 months ago

Thanks for the prompt response.

As it is my first time playing with it, could you point me as to where the extensive options are documented?

The odd thing is that when looking at the debugger, the 2nd scroller actually does have a height, but it's not 'expanded' (probably because of the reason you give above). Attempting to manually set the heights of the scrollers via CSS doesn't seem to work.

Any further assistance you can provide me with this is much appreciated.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

7 months ago

See the Options section of the documentation, in the readme at the bottom of the page:

https://github.com/watusi/jquery-mobile-iscrollview

For all but one scroller on the page, you will need to set:

wrapperClass
scrollerClass
scrollerContentClass
resizeWrapper false

wrapperClass defaults to iscroll-wrapper, scrollerClass default to iscroll-scroller. scrollerContentClass defaults to iscroll-content. You will probably want unique class names for all but one of your scrollers on the same page. (Maybe the plugin should number them...)

You can only have resizeWrapper set true for one scroller on the page, because it sets the height to all available height. Obviously, you can only use "all available height" for one scroller!

You can either use CSS to set the size of all of your wrappers and set resizeWrapper false for all of them, or else you can let one size automatically, and set the size of the others yourself. If you do the latter, also add the class iscroll-fixed to each of those wrappers so that they will be omitted from the available height for the one wrapper that is auto-sized.

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

I've noticed something new and unusual starting with the latest release of Firefox (although I couldn't tell you what version of FF it used to work on without an issue, I don't pay attention to the versions that closely, but it was about a month ago). This version of FF is 16.0.1. I've been using this plugin with a <ul> that I have as the only content of a page. On Firefox, the <ul> is fixed to match the width of a roughly iOS-type screen, and the <div> that gets assigned the class iscroll-scroller has a width set to 311. On Chrome this doesn't occur, and this plug-in works as expected. Removing the plug-in corrects the behavior completely. In Firebug I can't see any CSS style that's assigned to it that gives it that width, it just is that way with no real explanation that I can find.

Sorry, I wish I could be more helpful in this report, but I honestly can't find anything in Firebug that would explain why it's set that way, and don't know enough about the internal of the JS to try and debug it. I'm using jQM 1.2.0 and jQuery 1.8.2. I'm probably using a slightly older version of this script (1.2).

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

Thanks. I see this with the demo. I haven't updated the demo for 1.2, but this occurs with 1.1.1 and 1.0.1 as well.

I get somewhat different results. Firebug shows me that the .iscroll-scroller width is 453 in my case. It doesn't seem to change with variations in height/width of the window.

I note that there is a min-height of 441 st on the div itself, this is the

As you found, there is no CSS that is setting this. The Computed style shows a width of 452.933px with no CSS source shown, so it would seem that some code set the width.

However, there is no code in my plugin that sets the width. I took a look at iScroll itself, and there also is no code there that sets the width of this element. (Only the width of the scrollbar is set.)

I can see in the DOM that the offsetWidth property is set to 453, so *something* set this.

So, this is a mystery. I'd appreciate any insight anyone else can provide!

P.S. Even stranger still, I just tried Firefox 16.0.1 with a site I've been working on that uses iScroll extensively. (As in: on every page.) The results are inconsistent.

On the site's home page, the scroller width is 330px.

However, on interior content pages, the width is the width of the browser. So, perhaps I can glean something from the differences between these pages.

Scroll-wheel scrolling is broken as well.

I think perhaps Mozilla has gotten overly-agressive rolling out new versions.

P.P.S. Firefox 16.0.2 was *just now* released. Doesn't help...

And one more thing... this is really bizarre. The widths are different for different demo pages. Take a look at the "short pull" demo page.

frequent

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

If your width is off in Firefox, I can maybe help.

This has been bugging me for a while and is a real pain to detect. The problem is, the width of the scrollbar in Firefox "lags & leaks" into width calculations (in my case everything is off by 17px).

For example if I fix my multiview menu to 250px and want to set the main column to what's left, if my screen is 1000px wide, the main column will get 733px... no matter if there are scrollbars or not.

You see the problem if you check the body/html width in Firebug and compare to

$('body').css('width')
$('html').css('width')

Both calculated values will differ by the scrollbar-width to the value reported by Firebug.

So in iscrollview, if you page is 5000px your page will have a (page-)scrollbar, which - when you reset the page to screen height (and make the content scrollable) - disappears from the screen, but not from caluclations that are done on using screen width...

You can fix it by using:

// window (CORRECT):
window.innerWidth ~ e.g. 924
// body (FALSE):
document.body.clientWidth ~ e.g. 907

It took forever to find a javascript/jquery selector that outputs the wrong width (907).... The values can be used with resizing browser windows, aswell.

I'm fixing it by comparing both values and making the difference my fireFoxCorrection, which I'm adding back to the false element(s) like so:

el.css({ 'width': '-='+fireFoxCorrection+'px' });

Of course you also need to check whether page height > screen height (not in iScrollview), because then your page should have scrollbars and you should not correct by 17px.

Hope this helps. Let me know if you want the full script.

http://stackoverflow.com/questions/11587007/ios-jquery-scrollview-plugin-does-not-scroll-y-on-an-iframe

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

Frequent: this isn't related to scrollbars. The narrow width is fixed - it doesn't change when you change the browser width (see attached image).

I discovered there is an easy fix, though:

.iscroll-scroller {

width: 100%

}

Attachments

Screen Shot 2012-10-27 at 11.00.17 AM.png
Size : 49.49 KB Download : 659

frequent

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

Cool! Easy fixes always sound good.

israel_ri..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

Hi.

I have a vimeo and youtube iframes into my blog page. I use the scrollview, but scroll on the iframe is broken.

Do the iscrollview have solution about the iframes issue?

You can see questions about same problem

here:

and here:

https://groups.google.com/forum/?fromgroups#!topic/phonegap/ilSa52ibvLc

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

scrollview is a different plugin than is being discussed here. It was an experiment that is no longer supported in recent JQM releases. (And, indeed, was *never* supported, since it was an experiment.)

israel_ri..

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

6 months ago

Ø scrollview is a different plugin than is being discussed here.

It is very clear, but my question was different:

Do the iscrollview have solution about the iframes issue?

dmac

Re: Announcing jquery-mobile-iscrollview, a new wrapper for iscroll4

5 months ago

Hi, there i have an issue with iscrollview, it may be a bug. I hope this is the correct place to ask?

I am using:

PhoneGap/cordova v1.50

JQuery: v1.7.1.

JQuery Mobile v1.1.1.

JQuery-mobile-iscrollview, v1.2.5

Code paste: http://pastebin.com/qqY5LmVQ

I have a page listed with data-role="listview"... its contains many items.

When you scroll down to the bottom of the list, sometimes it scrolls down way past the last item on the list, and the page displays page BG, and it gets "stuck" (i.e. you cant grab the page to drag back up)

Please see screen shots attached (in sequence going down). Is this a known bug, or something new? Code in on the paste-bin link above.

Any info appreciated.

Thanks,

Darren.