CODEWITHSUNDEEP
dynamiciscroll4
user994531
user994531

Reputation: 81

making iscroll to work when loading a div dynamically

can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?

I can get it to work but I can't control the height of the scroll for the new content.

I'm new to all this and have no clue were to start.

here's what I'm working on:

http://homepage.mac.com/jjco/test/index7.html

when the page is loaded you see the scroll bar where there's no content... clicking on print/damm (shows the height I originally set for this content) clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should. obviously, I don't want the scroll to be there when it's not necessary.

any help would be greatly appreciated.

Upvotes: 8

Views: 11479

Answers (5)

ryuutatsuo
ryuutatsuo

Reputation: 4006

try this, when you insert your new data into iScroll do these steps 

//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer

Upvotes: 3

Trang Le
Trang Le

Reputation: 81

Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental
You can enable and use it.

Upvotes: -1

Kiryl Anokhin
Kiryl Anokhin

Reputation: 459

To watch height changes:

setInterval(function () {
    var newScrollerHeight = $scroller.innerHeight();

    if (newScrollerHeight !== prevScrollerHeight) {
         prevScrollerHeight = newScrollerHeight;
         myScroll.refresh();
    }
}, 500);

Upvotes: 0

John Snau
John Snau

Reputation: 341

I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =

here is code sample:

    var myScroll;

    function createIScroll(){
    myScroll = new iScroll('wrapper');
    }

    function iScrollRefresh(){
      setTimeout(function(){
         myScroll.refresh(); 
      }, 500);
    }
$ajax(){ 
//receiving data
}
function someFunction(){
  //dynamic content is created
  iScrollRefresh();
}

My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.

Upvotes: 3

Martin Carlsson
Martin Carlsson

Reputation: 306

It's better to use the refresh() method in iScroll, which will recalculate the height.

myScroll.refresh();

Upvotes: 14

Related Questions