CODEWITHSUNDEEP
jqueryajaxmobileloadingiscroll
Adrien Ballet
Adrien Ballet

Reputation: 25

iScroll not executing with jQuery Mobile

I need to implement iScroll in my jQuery Mobile pages. I need it to scroll a large table horizontally. Since the first beta of iScroll 5 has been released, I'd like to use this version, which include a horizontal scrolling mode.

Here's the global syntax of the code I'm supposed to use :

<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script src="/JAVASCRIPT/jquery-1.9.1.min.js"></script>
        <script src="/JAVASCRIPT/jquery.mobile-1.3.0.min.js"></script>
        <script src="/JAVASCRIPT/iscroll.js"></script>
        <script type="text/javascript">
            var myScroll;

            function loaded () {
                myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false });
                }
        </script>
    <head>

    <body onload="loaded()">
        <div data-role="page">
        <div data-role="content" id="content">
            <div id="wrapper">
                <div id="scroller">
                    <table>
                    </table>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>

The problem is that jQuery Mobile uses AJAX to load the content. And because the page with the table isn't the first page, my javascript isn't executed. The whole site is supposed to be an iPhone webapp, so I can't just skip the ajax navigation for this page, otherwise the iPhone loads this page out of the webapp, in Safari. The script works perfectly in safari, but nothing moves in my webapp!

I need an explanation on how to load these few lines in the page, please :

<script type="text/javascript">
    var myScroll;

    function loaded () {
        myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false });
    }
</script>

I've already searched a lot, I found something about binding the script with the pagecreate event, but I couldn't make it work.

There's a special adaptation of iScroll for jQuery Mobile, but it was made for iScroll 4... You are my only hope!

English isn't my first language, so please ask me if you didn't understand something.

Thanks in advance for your help!

Upvotes: 0

Views: 1864

Answers (1)

Marco Magrini
Marco Magrini

Reputation: 749

Try something like:

$(document).on('pageshow', '.mypage', function() {
        var myPageScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false });
});

Add 'mypage' class to your page

Upvotes: 1

Related Questions