CODEWITHSUNDEEP
iscroll
user1762289
user1762289

Reputation: 94

iscroll dom changes

I have iScroll working OK. I have added a jQuery font sizer plugin into 3 scrollable divs containing text. Upon using the "A+" to increase text size I get the "rubber band" effect [which I expected]
I am aware of MASTERING THE REFRESH() METHOD however I do not know how to implement this correctly.

My iscroll code is

var scroll1, scroll2, scroll3,
scrollNav;

function loaded() {
 setTimeout(function () {
    scrollNav = new iScroll('transition1', { useTransition:true });
    scroll1 = new iScroll('scrollpage01', { useTransition:true });
    scroll2 = new iScroll('scrollpage02', { useTransition:true });
    scroll3 = new iScroll('scrollpage03', { useTransition:true });
   }, 250);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

A sample of one of the divs with text is

<article id="scrollpage01">
<div id="contentScroller">
    <div class="box">
         <a class="jfontsize-button" id="jfontsize-m" href="#">A-</a>
         <a class="jfontsize-button" id="jfontsize-d" href="#">A</a>
         <a class="jfontsize-button" id="jfontsize-p" href="#">A+</a>

        <p class="some-class-name">Lorem ipsum dolor sit amet, ....blah blah blah.... suspendisse potenti.
        </p>

        <script type="text/javascript" language="javascript">
            $('.some-class-name').jfontsize({
                btnMinusClasseId: '#jfontsize-m',
                btnDefaultClasseId: '#jfontsize-d',
                btnPlusClasseId: '#jfontsize-p'
            });
        </script>
    </div>
</div>
</article>

Now how/where can I add

setTimeout(function() { scroll1.refresh(); }, 0);

Upvotes: 0

Views: 1511

Answers (2)

Amit
Amit

Reputation: 847

You can also call refresh() function whenever your Dom changes or height of Dom changes. 

setTimeout(function() { scroll1.refresh(); }, 200);

Make sure that call refresh() function after iScroll loaded in Dom. Also after dom change fully then only call refresh() function with setTimeout.

Upvotes: 0

user1762289
user1762289

Reputation: 94

Oh how simple it can be.... USE the full iscroll.js and not lite and add checkDOMChanges: true

<script type="text/javascript">
    var scroll1, scroll2, scroll3,
    scrollNav;

    function loaded() {
     setTimeout(function () {
       // scrollNav = new iScroll('navWrapper');
        scrollNav = new iScroll('transition1', { useTransition:true });
        scroll1 = new iScroll('scrollpage01', { useTransition:true, checkDOMChanges: true });
        scroll2 = new iScroll('scrollpage02', { useTransition:true, checkDOMChanges: true });
        scroll3 = new iScroll('scrollpage03', { useTransition:true, checkDOMChanges: true });
       }, 250);
    }

   document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
   document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Upvotes: 1

Related Questions