My iScroll only really works once page is resized (How do I ...)

[Jerome Mrozak]

Its been answered before, but with different circumstances.  I have a web page which I aspire to view on a smartphone.  In it I have a DIV that uses iScroll:

<div id="results" class="view">
  <div id="wrapper">
    <div id="scroller">
      <ul id="searchResults"></ul>
    </div>
  </div>
</div>

<script>
$(document).ready() {
  myScroll = new iScroll("wrapper");
}
</script>

I load the #searchResults with items then call myScroll.refresh().  The items display in the UL, and iScroll works -- sortof.  The right-side scrollbar isn't set up right (it appears tiny, as though it thought there were a million rows) and I can scroll right off of the bottom of the list.

I notice that if I resize the browser that iScroll wakes up.  I'm trying now to accomplish one of several things.

*  Does calling refresh again make the iScroll come alive?  Maybe I don't have it cooked right...
*  Is there a way of calling the browser resize to kick iScroll awake?  I tried $(document).resize(), etc., to no effect.
*  Can I resize the scroller and make things work?  I reset the scroller to an arbitrary value:      document.getElementById('wrapper').style.height = "300px";   and iScroll comes alive at the declared height.  But I can't make it go back again with another .style.height call.  I make the call but iScroll doesn't resize again, even if I call refresh() again as well.

What do I need to do to get iScroll working correctly here?

Thanks,

[Kerri Shotts]

Try:

 - calling refresh in a timeout (i.e., setTimeout ( function() { o.refresh();, 350 ); )

 - the scroller might be getting the events nuked. Try destroying it and re-creating it (with a timeout). [a bigger issue for DIVs loading AJAX content, but still, something to try if the above fails.]

I have found that when loading content dynamically, the browser needs a few ms to figure out the height and as such calling refresh() immediately only results in a failed attempt. Adding the timeout gives the browser time to sort out the DOM and be ready in time for your refresh() request.

[paL]

I tried destroying and setting a timeout, but its not working for me. I still need to resize to start working.

var myScroll;

function loaded() {

myScroll = new iScroll('wrapper');

myScroll = new iScroll('panelStatus');

myScroll = new iScroll('panelCancel');

myScroll = new iScroll('wrapper2');

myScroll.destroy();

myScroll = null;

setTimeout(function () {

myScroll = new iScroll('wrapper3', {

snap: true,

momentum: false,

hScrollbar: false,

onScrollEnd: function () {

document.querySelector('#indicator > li.select').className = '';

document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'select';

}

});}, 1000);

}

window.addEventListener('load', loaded, false);

[Kerri Shotts]

First, give each new iScroll a different name. That'll go loads to helping you out. Right now you're essentially overwriting portions of the previous scroller with new info, so I'm frankly amazed that things are working at all based on the above snippet.

Try that first (like myScroll1...5) and see how it goes.

[paL]

Here's my new code, but it doesn't work (I also tried destroying myScroll1, 2, 3, and 4. 

It scroll vertically before resize for some reason. 

var myScroll1, myScroll2, myScroll3, myScroll4, myScroll5;

function loaded() {

myScroll1 = new iScroll('wrapper');

myScroll2 = new iScroll('panelStatus');

myScroll3 = new iScroll('panelCancel');

myScroll4 = new iScroll('wrapper2');

setTimeout(function () {

myScroll5 = new iScroll('wrapper3', {

[paL]

I figured out what is wrong with my code. Its related to CSS positioning of my web app. 

#page > div {

  display:none;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

}

The position has to be relative. Not sure how to fix this yet, since I need this to be absolute for pages to change.