CODEWITHSUNDEEP
jquerytinyscrollbar
Gidon
Gidon

Reputation: 3490

dynamic height tinyscrollbar

I'm really stuck on this one...

I'm using the tinyscrollbar.js plugin on a div. Inside that div I have a viewport that contains a paragraph and a button that toggles that paragraphs height between 500px and 1000px. How can I dynamically update the tinyscrollbar to notice the new height and correct itself? (please imagine that there are nine other "box_content review" div's)

I tried using the tinyscrollbar_update method that the website suggests but it doesn't seem to work. Does anyone have an idea?

Thanks

HTML - 

<div id="scrollbar3">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
    <div class="overview">
    <div class="box_content review">
    <h5 class="reviewTitle">Review title: D90 is the best camera</h5>
    <img src="../../images/gen_rating_5.png" />
    <div class="topCont">
    <img src="../../images/profile.png" />
    <p class="pros">Pros - LightWeight, Quality, Performance, Durable, Reliable  </p>
    <p class="cons">Cons - Expensive, Interchangable Parts </p>
    </div>
    <p class="reviewContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book... &nbsp <span><i><a class="readMore">read more</a></i></span></p>
</div>
</div>
</div>
</div>

Jquery - 

$('#scrollbar3').tinyscrollbar({ sizethumb: 45 });
    $(".readMore").toggle(function(){
        $(this).parent().parent().parent().animate({height:530},400);
        $('#scrollbar3').tinyscrollbar_update();
    },function(){
        $(this).parent().parent().parent().animate({height:76},400);
        $('#scrollbar3').tinyscrollbar_update();
    });

Upvotes: 0

Views: 1597

Answers (2)

andyace
andyace

Reputation: 119

The animation has not finished when you update tinyscrollbar. Use the complete callback function to update tinyscrollbar when the animation has finished.

$(this).parent().parent().parent().animate(
    { height:530 }, 
    400, 
    function() {
        $('#scrollbar3').tinyscrollbar_update();
    }
);

Upvotes: 1

Gidon
Gidon

Reputation: 3490

Ok, so what I did in the end was to add the content before hand and give the parent div a overflow:hidden and a fixed height to 'hide' the content. Then onclick I'm changing the height to "auto".

Upvotes: 1

Related Questions