using iscroll with jquery mobile binding issue

Question

Im currently pulling my hair out trying to get iscroll 4 working with jQuery Mobile.

It all works fine if i disable JQM ajax default navigation but I would like to retain this.

My issue is I cant work out how to successfully call/bind iscroll so it works with the pages that need them. I have tried pageinit() and pagecreate() to no avail.

A basic example of this can be found here: http://bit.ly/ngXkNR

Any pointers much appreciated.

A.

Code would be helpful. Do you refresh() the iScroll on page2? — dotchuZ, Oct 11 '11 at 12:18
The jQuery Mobile docs* suggest you should be using their `pageinit` event but I can't get it to work with your code *http://jquerymobile.com/demos/1.0rc1/docs/api/events.html — Deebster, Oct 11 '11 at 12:42

score 7 · Answer 1 · answered Nov 25 '11 at 10:16

Thanks Jasper, I changed your method a bit, so that you can call iScroll on any wrapper identified with a class. Also I unload and destroy all iScroll instances on the pagehide event - i dont need the refresh method for my needs:

// iScroll variable
var myScroll = [];

$(document).delegate('[data-role="page"]', 'pageshow', function () {

    var $page = $(this);

    // setup iScroll
    $($page.find('.iscroll_wrapper')).each(function(index) {

        var scroller_id = $(this).get(0);

        myScroll.push(
            new iScroll(scroller_id, {
                snap       : true,
                momentum   : false,
                hScrollbar : false
            }));
    });

});

$(document).delegate('[data-role="page"]', 'pagehide', function () {

    // unset and delete iScroll
    for (x in myScroll)
    {
        myScroll[x].destroy();
        myScroll[x] = null;
        myScroll.splice(x, 1);
    }

});

score 6 · Answer 2 · edited May 23 '17 at 10:29

6

Follow the example I created for you four days ago ( using iscroll with jquery mobile )... You are binding to an event that only fires on the initial page load and you want to bind to a jQuery Mobile event that fires whenever a new page is added to the DOM.

Change:

var myScroll;
document.addEventListener('DOMContentLoaded', loaded, false);

To:

var myScroll = [];
$(document).delegate('[data-role="page"]', 'pagecreate', function () {
        myScroll[this.id] = new iScroll(this.id + '_wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false
     });
});

Which will require renaming the wrapper div on each page to _wrapper. Which is necessary anyway because each element with an ID needs a unique ID in the DOM.

Link: using iscroll with jquery mobile

--UPDATE--

I have created an example of using iScroll carousels on multiple pages. Notice how I include the custom JavaScript and CSS on each page so if the user refreshes the page (on any page) they will not receive any errors because of missing code.

Here is the link to the working example: http://apexeleven.com/stackoverflow/iScroll/default.html

edited May 23 '17 at 10:29

Community

1
1

answered Oct 11 '11 at 16:16

Jasper

75,717
14
151
146

Hi Jasper. Really really appreciate your help. I have changed the things you mentioned above (I think I followed it right) but doesn't seem to work as expected as can be seen here http://bit.ly/ngXkNR – Adi Oct 14 '11 at 09:05
I checked-out your link and my initial impression was that you might want to do some research into how jQuery Mobile manages the DOM via AJAX navigation. Since multiple pages can be in the DOM at one time, each page needs its id's to be unique (two pages cannot have a div with the id of 'scroller') however you can change those identifiers to classes since classes do not have to be unique. I'll try to give some more specific pointers on your code when I have more time. – Jasper Oct 14 '11 at 18:40
Thanks Jasper. If someone can get me a working iscroll4 with jquery mobile (default ajax naviagation) I'd be willing to pay $$$ for it. The site has a carousel on almost every page and the client really wants to keep the ajax/page transition effect. – Adi Oct 21 '11 at 10:28
Check-out the example I posted in the update to my answer: http://apexeleven.com/stackoverflow/iScroll/default.html – Jasper Oct 21 '11 at 18:31
Hi Jasper. Many thanks for this. The issue I have is that I cant have a predefined/unique ID per scroll/page. Is there no way to do something similar just by looking for a class to scroll? – Adi Nov 02 '11 at 15:20
I believe you have to use an ID to initialize iScroll however you could give the elements IDs at the time you initialize with an `$.each()` loop. `var num = 0; $.each($('.iscroll-class'), function (index, value) { value.id = 'iscroll_id_' + num++; })`. This will loop through all the elements with the `iscroll-class` class and give them ids, you could initialize iScroll in the same loop if you wanted to. In jQuery Mobile you generally give each pseudo-page a unique ID, why not just use that unique ID and then append something on the end like "home_iscroll" for the ID you want to scroll? – Jasper Nov 02 '11 at 15:48

using iscroll with jquery mobile binding issue

2 Answers2