cubiq / iscroll Goto Github PK

Hi,
i'am trying to use iScroll on iOs (4.2). The touch event does not work and you can not click on links or buttons. It 's a iScroll configuration problem? It's a iOS 4.2 problem? What am I doing wrong?

I just want to start off -- been using iScroll3 for a long time, and really love the direction iScroll4 is going. We've noticed a couple of issues with the latest iScroll4 and an image gallery carousel (snap: true, zoomable: true), with multiple items on iOS4.2 on device/simulator.

1. Zooming in works, but lets you zoom past the current image and you see the adjacent image(s). It seems as if when you're zooming in/out, you should not be able to zoom past the current item...
2. Once zoomed in, panning about "snaps" in quadrants, which appear to be multiples of the original display height/width
3. can't really swipe back and forth between the images in the carousel any more
4. Sometimes on the first pinch/zoom, if you pinch/zoom somewhere outside of the exact center, the image will translate inversely offset to that. That is to say, if you imaginarily break up the screen into four quadrants, top left, top right, bottom left, bottom right, and you start the zoom in the bottom right, it'll move the image a corresponding offset to the top left.

Hey Matteo, I've fixed select elements on iOS.

have a look at my changes here: https://github.com/aaroninfidel/iscroll on iscroll.edit.js

maybe you can come up with a way to fix it for android.

I'm about to throw my android out the window, so I need to calm down and see if I can fix it tomorrow.

--- src/html/jslib/iscroll/iscroll.js   (revision 1197)
+++ src/html/jslib/iscroll/iscroll.js   (working copy)
@@ -357,7 +357,7 @@
                                if (that.pullUpToRefresh && newY < that.maxScrollY - that.offsetTop) {
                                        that.pullUpEl.className = 'iScrollPullUp flip';
                                        that.pullUpLabel.innerText = that.options.pullUpLabel[1];
-                               } else if (that.pullDownToRefresh && that.pullUpEl.className.match('flip')) {
+                               } else if (that.pullUpToRefresh && that.pullUpEl.className.match('flip')) {

If the scroller element has a margin, it is ignored and you cannot scroll to the bottom. I fixed the problem by adding the following code in refresh() and _checkSize().

add:
var marginY = that.scroller.offsetParent.scrollHeight - that.scroller.offsetHeight;

edit:
that.scrollerH = m.round((that.scroller.offsetHeight + marginY - that.offsetBottom - that.offsetTop) * that.scale);

PS.: Sorry I don't know github enough to create a patch but it's an easy fix.

iScroll v4.1.4
HTC Aria Android 2.1

On Android2.1 the swipe seems to be lost after the first swipe. The buttons work initially and then fail to function. Moving the page slightly up or down sometimes allows the button clicks to start functioning again.
Sample
http://www.supercal.com/scroll/

This is under the jQTouch context.

I transition to a page that is being dynamically generated. I create a horizontal scroller with the snap option set to true. I bind an event to refresh the scroller on orientation change and window size change. While I am viewing the page, I can rotate the device and change the window size no problem and my refresh function works like a charm. I then transition to another page in the app and then rotate the device, which attempts to refresh the scroller again that is not currently "in focus" if you will. The app locks up and safari crashes.

If I turn off the snap option, the refresh function works just fine.

this site:
http://objectstories.pam.org/collection/

on my iphone (either launched from the home screen or in regular safari), the iscroll performance is amazing.

on my ipad (1st gen, 32gig, ios 4.3.1), it's a total pig. not sure why there's such a difference, as they're (somewhat) similar devices.

We are using iScroll lite (v4.1.1) and are calling the .destroy() method, then setting iscroll to null and then calling the loaded method again to reinitialize iScroll.

However, we keep on running into this error TypeError: Result of expression 'that[dir + 'ScrollbarWrapper'].parentNode' [null] is not an object.

Any thoughts as to why this might be happening?

Calling
myscroll.scrollTo(0, 0, '100ms');

The scrollbar stay visible.

The resize event handler is fired even after an iScroll instance is destroyed. This also results in the iScroll object never being garbage-collected.

example:

// first add console.log('resize'); to the _resize() method of iScroll at line 214

window.onload = function ()
{
    var div = document.createElement('div');
    div.id = 'myDiv';
    var ul = document.createElement('ul');
    div.appendChild(ul);
    document.body.appendChild(div);

    var scroll = new iScroll('myDiv');
    scroll.destroy();
    scroll = null;
}

Then check console to see that the _resize method is still being executed when the browser window is resized

I'm loading pages into a jQT app. After I refresh the iscroll object the scroll bar is the entire window height, not the height of the wrapper. I know it's late in the beta cycle, but I thought you might have squished this bug in this version. You can find an example here: http://web.me.com/djpinter1/iPhone/jqtouch/demos/untitledfolder/index.html

Tested on beta-4, calling destroy on a pull down to refresh causes an error:
"m.pullDownEl.parentNode' [null] is not an object"

if ($('#historyLi a').hasClass('selected')){
    if (historyScroller != null){
        historyScroller.destroy();
        historyScroller = null;
    }
    if($('#historyPopupScroller').length){
        historyScroller = new iScroll('historyContainer',{
            checkDOMChanges: true, 
            pullToRefresh: 'down',
            onPullDown: function () {
                $('#getHistory').click();
            }
        });
    }
}

Keep up the great work.

I am using iScroll with gestures.js. I am assignment 2-finger swipe to something else.

Below is a tested patch.

====== iscroll.js line: 298 ==========
        that.pointX = point.pageX;
        that.pointY = point.pageY;
        
        that.startTime = e.timeStamp;

        if (that.options.onScrollStart) that.options.onScrollStart.call(that);

+       if (hasTouch && e.touches.length < 1) {
+           that.scrolling = false;
+           that.resetPosition();
+       }
+
        // Registering/unregistering of events is done to preserve resources on Android
        setTimeout(function () {

important onZoomEnd event is missing. It will be included in iScroll 4.0 final

When you goto a url with a hash like #page-1 the rest of the content above can't be scrolled and the content below can go past the container.

Thank you for fixing the refresh in 4.1.2, but now I don't get scroll bars. The scrolling works but scroll bars do not appear

Hot off the press :-)

Tested using Opera Mobile 11 Emulator (remote debug via Opera Dragonfly)

Uncaught exception: ReferenceError: Undefined variable: that

Error thrown at line 876, column 2 in () in iscroll.js:
that._unbind(MOVE_EV);
called from line 755, column 3 in () in iscroll.js:
that.disable();
called from line 117, column 2 in (el, options) in iscroll.js:
that.refresh();

If I am on a Zoom iScroll, and I double tap the image on android (cuz android web doesn't have multi-touch JS events) the image moves to the upper left hand corner and as I pan around, it randomly changes size (going from the 2x to 1x and back) and position.

If you stop the scroller by tapping in the list, he will click on the element beneath that.
But by adding 'that.moved = true;' on line 313 and line 320. This is solved.

https://github.com/shimondoodkin/Really-Good-Jokes/commit/752de859dec3cb4b6d5c02b44c58a009befc4fe8

How i can enable global page zoom?

Calls to refresh() are no longer working after upgrading from 4.0 to latest (4.1.1)

Scenario:
Several "pages" that can be hidden and shown. They are initialized as iScroll objects on DOM ready.
When a page comes into view, refresh is called so the iScrolling works.

Thanks

I have something like that:

#scroll
  #elements
    .element
      textarea

iScroll applied to

#scroll

The example works perfectly by itself. So, it is, technically, not a iScroll bug.

But, when the document get large, the offsetHeight is initialized at "0". (might be related to delay processing by long CSS file.)

Added a "0" timeout worked around the problem.

Index: iscroll.js
===================================================================
--- iscroll.js  (revision 1210)
+++ iscroll.js  (working copy)
@@ -83,10 +83,12 @@
                div.innerHTML = '<span class="iScrollPullDownIcon"></span><span class="iScrollPullDownLabel">' + that.options.pullDownLabel[0] + '</span>\n';
                that.scroller.insertBefore(div, that.scroller.children[0]);
                that.options.bounce = true;
-               that.offsetBottom = div.offsetHeight;
-               that.scroller.style.marginTop = -that.offsetBottom + 'px';
                that.pullDownEl = div;
                that.pullDownLabel = div.getElementsByTagName('span')[1];
+               setTimeout(function() {
+                       that.offsetBottom = div.offsetHeight;
+                       that.scroller.style.marginTop = -that.offsetBottom + 'px';
+               }, 0);
        }

        if (that.pullUpToRefresh) {
@@ -95,10 +97,12 @@
                div.innerHTML = '<span class="iScrollPullUpIcon"></span><span class="iScrollPullUpLabel">' + that.options.pullUpLabel[0] + '</span>\n';
                that.scroller.appendChild(div);
                that.options.bounce = true;
-               that.offsetTop = div.offsetHeight;
-               that.scroller.style.marginBottom = -that.offsetTop + 'px';
                that.pullUpEl = div;
                that.pullUpLabel = div.getElementsByTagName('span')[1];
+               setTimeout(function() {
+                       that.offsetTop = div.offsetHeight;
+                       that.scroller.style.marginBottom = -that.offsetTop + 'px';
+               }, 0);
        }

Hi,

first, I want to thanks you all for this nice lib.

But I got a problem. I hope this is the good place to ask.

I got a DIV Container which got a TABLE tableData and a DIV selectedFrame.
I use the selectedFrame to highlight the selected row. and the table is too long for the terminal.

without iScroll, the selectedFrame follow the scroll of my table, and the frame stick with the row (Chrome).
But with iScroll (on Android 2.3.4), the selectedFrame does not change it's position.

By JS :

• I change the selectedFrame DIV to match the clicked row.
• I also change some horizontal size / padding by JS. Then I call myScroll.refresh().

I create the iScroll like this

    if (_this.scroller) {
        _this.scroller.destroy();
        _this.scroller = null;
    }
          _this.scroller = new iScroll('TableContainer',{ hScrollbar: false, vScrollbar: true , snap: 'tr'});

and my CSS look like this:

#TableContainer{
padding: 0;
margin-left:5px;
margin-right:5px;
-webkit-border-radius: 5px;
position:relative; /necessary for SelectedFrame position while scrolling/
overflow-y:scroll;
}

// the table elem
#TableData{
border-collapse:collapse;
padding:0px;
width:100%;
}

#SelectedFrame{
display:none;
position:absolute;
z-index:80;/on top of the table, unders iScroll/
border-radius: 5px;
border:3px solid red;
}

I saw the event onScrollStart, but I will like the DIV to follow the scroll, not just "jump" at the end of it.
I also saw the OnScroll event is not ready yet.

Any idea How I can do this?

Loda

EDIT: Sorry, I move the question to group.

I have created a web app using iScroll. When I launch it in safari, and add it to the homescreen so that I can use it as a fullscreen web app, all links open in Safari as opposed to within the app.

Is this a "feature" or am I doing something wrong? Is there an attribute which I need to add in order to force the links to open in the same place and not launch Safari?

I'm not sure if your going to do desktop support in this build, but if you are... I'm getting an error when I click on elements of touches.length.

Safari / MobileSafari (iOS Simulator) freezes with iScroll 4 (the CPU spikes, computer locks up for a few seconds). It doesn't occur on the same page using iScroll 3.

These are the options I'm using:

var myScroll = new iScroll('scroller', {
    snap: true,
    momentum: false,
    hScrollbar: false
});

Sorry for the lack of detail but I'm not sure how to debug it.

Hi, I've implemented iscroll fairly well on this site: (http://noahabrams.com/m.timeline.html) - (please forgive the enormous amount of images you have to load). All of the navigation works except "Bio" the last

When using iScroll in IE9, the scrollbar doesn't move up or down when the user scrolls, it only does the "rubber band" effect when scrolling to the start or end of the div. Also, the carousel example doesn't move at all, we can only see the page dots on the right changing.
To reproduce the bug, simply open any of the examples included with iScroll in IE9.

have discharged these methods in version 4.1?

I have a project I am working on, and have tried to make it more 'sveldt', even to the point of making pages invisible when they are not in view, but I have hit a wall.

This project has a horizontal scroll of pages, and each page has a vertical scroll area. Eventually there will be images in the vertical scroll areas which can be clicked to make enlarged, but I turned that off because I seem to be leaking memory like a sieve. It crashes every time you go past a certain number of pages, but I have no way of figuring out what is causing it.

On the desktop, when you visit this same page, every scroll to another page will increase the memory of safari by 3M. It won't crash on the desktop, but this is the only way I can figure out what is happening.

Forgive me for not posting any code, but you can see the results of this project here:
http://straathof.acadnet.ca/reblend5/index1.html

I've made it so you can go through the code here.
http://straathof.acadnet.ca/reblend5/

I have another script for resizing everything on orientation change or browser window resizing, but I don't think that is what is causing the problem. I had an earlier version working which used an older version of iscroll (I modified it so I had two versions, one for vertical and one for horizontal) but it didn't crash, so I suspect it is something with iscroll4. You can see that version here: http://straathof.acadnet.ca/blendstuff/portfolio1/ The major differences between these two is reconfiguring the css, using jquery 1.5.2 and using iscroll4.

Thought you might like to know about how it is misbehaving. I've wasted quite some time on this and will be going back a few versions to figure out how I can get this current project up and running (it was to have been a magazine for school, but is now two weeks overdue)

I apologize in advance for my lack of knowledge, just wondering how I would terminate iScroll temporarily while mousedown on another element?

iScroll intercepts click events and replaces them with with fake click events so that wrapped elements can still handle them. Unfortunately, it fires its fake click event via setTimeout(), which causes event handlers to run outside the scope of a user action, thus preventing media playback and download functionality on iOS >= 4.2. This breaks the tap-to-play functionality of my application's scrolling pane of video buttons.

The problem exists in iScroll Beta 4 / git 0398d2a, but not iScroll Lite and not iScroll 3. The offending code lies within iScroll's _end() function.

In order to fix it, iScroll must allow wrapped controls to receive their user input events (even fake ones) while the original event handler is still running. That means not calling dispatchEvent() from within a setTimeout() callback.

For reference, see the User Control of Downloads Over Cellular Networks section of Apple's documentation. There is a fair bit of related discussion around the net, for example: here.

The event.wheelDelta data returns different values depending on the browser you're using... resulting in different scroll speed.

Specifically:
Safari mousewheel event.wheelDelta has values starting at +/- 120 (like Internet Explorer)
Chrome mousewheel event.wheelDelta has values starting at +/- 3 (like Firefox/Opera)

I don't know the best way to normalize these values for similar performance.

How do you feel about changing the math based on userAgent strings?

Hello

I use https://github.com/sebarmeli/JAIL jQuery Asynchronous Image Loader . That's cool & works well.. but not with iScroll.. Cause it wait for ordinary Scroll Events to show images and no possible to bind custom events..

Is any way to make iScroll generate default Scroll Event, when iScrolling ? or may be different solutions... Can't get any yet..

Thank you

This is in iOS:

when the scrollbar hits the top or bottom of the screen it losses the rounded edges at that end. I would expect them to stay like they do natively.

I have a carousel that is rendered off page in a div and then slid in with a css animation. Since updating to iscroll4, this causes the browser to crash with an out of memory error.

I managed to fix this my creating the iscroll in a setTimeout block.

setTimeout(function () {
new iScroll('productDetailsWrapper', {
snap:true,
momentum:false,
hScrollbar:false,
onScrollEnd: function () {
blocks = $('#productDetailsNav > span.point').size();
$('#productDetailsNav > span.point.active').removeClass('active');
$('#productDetailsNav > span.point:nth-child(' + (this.currPageX +1 > blocks ? blocks : this.currPageX+1) + ')').addClass('active');
}
});
})

I'll see if I can put together an example

You cannot select a value from a SELECT html field

iScroll still misses an onScroll event. Not "mission critical" but it will be probably included in v4.0 final.

I don't know why... but since the beta build the performance on android has dramatically decreased.

If this is fixed that'd be great!!

Given that we now have touch-capable devices like Opera Mobile (on Android), and Firefox Mobile (nightlies) supporting touch events (to varying degrees) as well as CSS transformations, I think it is a good time to suggest adding support for cross-browser CSS Transforms to iScroll?

Especially now that touch events have become an offical spec, we will soon start to see lots more (non-webkit) browsers be capable of utilizing this lib :)

When I click an element managed by iScroll, it calls the onScrollStart callback but never calls onScrollEnd.

My application sets a recurring timeout in onScrollStart and clear it in onScrollEnd, to repeatedly update some UI components while scrolling. Without the onScrollEnd call, the updates continue endlessly.

The problem exists in iScroll Beta 4 / git 0398d2a.

say you have a list with only 1 list item in it. Nativly, iOS would let you scroll this list by tapping below the list item (anywhere in the scroll section) and moving your finger. In iScroll this currently have no effect. It would be great if this could match native.

When I'm using my app offline iScroll stops working...

any ideas?

Curious if there is a workaround known for dealing with iframes within scrollable content?

Everything works fine on page, but when touching the iframe normal scroll behavior takes over including moving the viewport and off-document scrolling with the gray background.

For implementations where iScroll is being used for carousels having an event and data object to know when the snapTo has completed and also which direction the user scrolled to would be awesome. This is useful for updating any paging information that maybe displayed in the UI, but outside the scroller. (Think of the dots that often appear under carousels)

My initial thoughts are to augment the onScrollEnd callback to pass an additional data parameter letting the user know which direction the user scrolled in. This could "LEFT", "RIGHT", "UP" or "DOWN". I am in the process of adding this now, but wanted to see if:

a. This functionality already existed and I am just missing it.
b. If other users would find this useful.

If people / @cubiq find this useful I will supply a pull request.

• Jesse

On an app I'm working on I'm dynamically loading data into the page as search results and the list grows/shrinks based on the results that are returned back. I'm using the myScroll.refresh() function and it works fine on iPhone but on android the size of the scroller div doesn't update properly, however it does keep its boundaries properly.

Some minor low priority oddities for you:

1.) If I use an absolutely positioned footer at the bottom of the screen, below my iScroll area - scrollToElement cannot scroll to show the very last element in the list. It is still hidden by the footer.

2.) If I specify a scroll time of, say 200ms when using scrollToElement, the scroll animation only occurs after a touchmove event has been performed on the iScroll area. If I want to call scrollToElement a second time, without any further interaction occurring, the scrolling area jumps straight to the element and does not animate.

You can test these oddities in a beta version of an app I'm tinkering with here:

http://web.mac.com/a.gibson/client/storageapp/

(note - this URL may not be active after the next few weeks as is only temporary)

UPDATE - forgot to mention, I am testing on iOS here. Still need to test on Android properly.