0

I try to implement tinyscrollbar (tinyscrollbar.js) into jquery mobile with data-role=page. On the first page it works perfectly fine. but on the second page, the bar is missing. until i clicked on inspect element. I tried tinyscrollbar_update(), update(0), slideToggle().promise()... non works. They all give me different kind of errors.

looks like this

<div class="scrollbar1">
 <div class="scrollbar" style="height: 200px;">
     <div class="track" style="height: 200px;">
         <div class="thumb" style="top: 0px; height: 32.6530612244898px;">
             <div class="end"></div>
         </div>
     </div>
 </div>
 <div class="viewport">
     <div class="overview">//text</div>
 </div>


<div id="footerNavigation">
    <a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-theme="b">Back</a>
    <a href="#theNextPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">Next</a>
</div>

i copied the exact same code as above to my second page code:

<div id="theNextPage" data-role="page"><!--scrollbar code--></div>

and my javascript file:

$(document).ready(function() {
    $('.scrollbar1').tinyscrollbar();
});

anybody has any idea how is that so? Any way to solve it?

1 Answers1

0

I have found out away!

change the class into id. class="scrollbar1" >> id="scrollbar1"

next page: class="scrollbar2" >> id="scrollbar2"

$(document).ready(function() {
                $('#scrollbar1').tinyscrollbar();
                $('#scrollbar2').tinyscrollbar();
});


$(document).on("pageshow", "#theNextPage", function () {
    var $scrollbar2 = $('#scrollbar2');
    $scrollbar2.tinyscrollbar();
    var scrollbar1 = $scrollbar2.data("plugin_tinyscrollbar")
    $scrollbar2.update(0);
});

like this would be better

user3627074
  • 1