javascript document.ready not always working, iscroll !

Question

Hello we are building a mobile web.app using iScroll for scrolling. The problem is that the iScroll scroller sometimes has problems working when the page loads at first.

This is the code, we added (document).ready to solve the problem, and it is doing it so mostly, but once in a while it doesn't seem to work.

Our guess is that the scroller isn't working when the height of the wrapper (scrollable area) loads to slow, that's why we added the document.ready with the results stated as above. https://stackoverflow.com/

<script type="text/javascript">

var myScroll;
$(document).ready(function loaded() {
    myScroll = new iScroll('wrapper');
});

$(document).ready.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

$(document).ready.addEventListener('DOMContentLoaded', loaded, false);

</script>`

We'd appreciate some help !

Thank you

addEventListener is not supported by IE I thought... You may want to look into bind() instead. Also, all of your binds should be inside of the ready function. — dqhendricks, Mar 22 '11 at 17:05
somebody retag and add iscroll tag. I tried adding but there is no iscroll tag, iscroll4 is there. — Sandeepan Nath, Jul 25 '11 at 06:34

score 1 · Answer 1 · answered Mar 22 '11 at 17:03

1

$(document).ready(); should not be called the way you have it after the first call.

$(document).ready.addEventListener

Also it looks like the third call to it is trying to overwrite it.

Try doing the following.

var myScroll;
$(document).ready(function {
    myScroll = new iScroll('wrapper');
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
});

answered Mar 22 '11 at 17:03

Nalum

4,143
5
38
55

1

Thanks for the reply, but we have tried all of these variations above and none our fixing the problem. It seems to be loading incorrectly about 1/5 times. What happens is that iScroll just stops working because the page loads to slow. – Hans Mar 23 '11 at 11:03

score 1 · Answer 2 · answered Mar 22 '11 at 18:48

1

ready is a method that takes a function as parameter and executes it when the document is ..well ready. so you should :

$(document).ready(function(){
    //do stuff here
});

answered Mar 22 '11 at 18:48

gion_13

41,171
10
96
108

or, much shorter in jQuery: $(function(){ //do stuff here}); – Design by Adrian May 03 '12 at 11:40

score 1 · Answer 3 · edited Mar 23 '11 at 13:49

1

<script type="text/javascript">
    var myScroll;
    setTimeout(function() {
        myScroll = new iScroll('wrapper');
    }, 200);
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Is the solution we came up with for all people using iScroll and in the same situation

edited Mar 23 '11 at 13:49

Nalum

4,143
5
38
55

answered Mar 23 '11 at 12:11

Hans

43
1
5

score 0 · Answer 4 · answered May 03 '12 at 11:55

Assuming you are using jQuery, what you need to do is initiating iScroll after the document is loaded. Prefer not using inline JavaScript, but if you really, really have to, in the < head > tag, write:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function(){

$(document).bind('touchmove', function(e){
    e.preventDefault();
});
new iScroll('wrapper');
});

</script>

Thus nothing will happen until the DOM is loaded, you will cancel out all other touchmove events, then add iScroll functionality to your div "wrapper".

The wrapper div needs a set height and width. The first div inside wrapper does not, but if it doesn't have a set height, it needs to float, so the browser can calculate it's height dynamically.

score 0 · Answer 5 · answered Apr 03 '13 at 15:21

An old thread, but I thought I might throw in my 2 cents since the I'm working on this now, and since .bind() has been deprecated in favor of .on(), and other fun stuff:

var myScroll;
var myScrollObjectID = "wrapper";
$(document).ready(function() {

    setTimeout(function() {
        myScroll = new iScroll(myScrollObjectID);
        console.log("iScroll object set: ", myScroll, myScrollObjectID);
    }, 200);

    $("#" + myScrollObjectID).on("touchmove", function(e){
          e.preventDefault();
          var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
          console.log('document->touchmove', e, touch);

    });  
    console.log("jQuery->document->ready");
});

Sure, binding "#wrapper" means I may still have to deal with touchmove events in the header and footer not controlled by the iScroll object, but if that's the case, then I'll capture the event on "body" since all three divs 'should' bubble-up into the body object.

javascript document.ready not always working, iscroll !

5 Answers5