CODEWITHSUNDEEP
jqueryjquery-mobileiscroll4iscrollreferenceerror
shoujo_sm
shoujo_sm

Reputation: 3203

iScroll - Uncaught ReferenceError: myScroll is not defined in index and Stale touch event ACTION_DOWN received from webcore

I use iScroll in my levels page but somehow my editor complain ReferenceError in my index page (another page) which I didnt use iScroll. I search 'myScroll' in my index but there is no such word in my index. Because of the error, my iScroll that work in the browser does not work in the Android emulator.

09-04 08:31:06.249: E/Web Console(942): Uncaught ReferenceError: myScroll is not defined at file:///android_asset/www/index.html:1

If I swipe in the emulator, it produces

09-04 15:58:57.318: W/webview(3045): Stale touch event ACTION_DOWN received from webcore; ignoring

index.html (I didnt use iScroll)

<!DOCTYPE html>
<html>
<head>

<title>App Name</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>        
<div id="mainContainer" data-role="page" >
<div data-role="content">
    <div id="homeLinks">
    <img id="icon" src="css/images/icon.png">
    <p><a href="#level" data-role="button" data-theme="a">level</a></p>

    </div>   
  </div>        
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
</body>
</html>

level page (page I used iScroll)

<div data-role="page" data-add-back-btn="true" >
<header data-role="header">  
    <a href="settings.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>  
    <h1>Study Levels</h1>  
</header>
<div id="level1" data-role="content">
    <div id="wrapper">
        <div id="scroller">
             <ul id="thelist">
                  <li><img src="css/images/level1.png"/></li>
                  <li><img src="css/images/level2.png"/></li>
                  <li>zz</li>
            </ul>
        </div>
    </div>

</div>      

<footer data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div id="nav">
      <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">&larr; prev</div>
      <ul id="indicator">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next &rarr;</div>
    </div>
</footer>   


<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script src="js/ender.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" charset="utf-8">
         $(document).ready(function () {

        this.myScroll = $('#wrapper').iScroll({
        snap: true,
        momentum: false,
       hScrollbar: false,
        onScrollEnd: function () {
          document.querySelector('#indicator > li.active').className = '';
          document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
        })
    })
 </script>
</body>

Upvotes: 0

Views: 7610

Answers (2)

Varinder
Varinder

Reputation: 2664

----Update------

Having another look, $ in $('#wrapper').iScroll... is from ender not jQuery and i believe thats causing a conflict.

So you might wanna create a closure, something like this:

  (function($){
      $(document).ready(function() {
           this.myScroll = $('#wrapper').iScroll({
           //custom options here 
           });
      });
  })(ender);

And because 'this' inside enders document.ready function points to window object,

you can simply pass inline event handeler like this:

 <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false"> stuff </div>

Hope it helps :)

Upvotes: 1

ThoKra
ThoKra

Reputation: 3029

You have bound the myScroll variable to the document. So either you have to us it by calling document.myScroll, or you can bind it to the window by replacing this with window (Or just remove it) so it becomes:

window.myScroll = $('#wrapper') ...

and then you can call it as a regular variable.

Upvotes: 0

Related Questions