CODEWITHSUNDEEP
jquerynicescroll
Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

nicescroll, need to resize automatically when div changes it size

I have <article> tag, which contains lot of text and it's usually showed with a jquery nicescroll beside, but if it contains an element which can change height 'some collapsable element) of the <article> tag and nicescroll doesn't want to reload.

my code:

<article class="item">
  <div class="reference">some text</div>
  <a href="#long-2" data-toggle="collapse" class="reference-long arr_down"></a>
  <div id="long-2" class="collapse">some text</div>
</div>

if I click on a, the article becomes bigger but I need to reload the nice scroll, when the collapsed item is clossed again, I need do the same.

jquery, which works just sometimes and doesn't work in the Safari browser:

$(document).ready(
function() {
$("article").niceScroll({cursorcolor:"#fff",autohidemode:false, zindex: 999});
}
);
$(function() {  
$('.reference-long').click(function(){
    $("article").getNiceScroll().remove();
    $("article").niceScroll({cursorcolor:"#fff",autohidemode:false, zindex: 999});
  });
});

Upvotes: 2

Views: 14132

Answers (2)

Wale
Wale

Reputation: 109

this is the solution

$("article").getNiceScroll().resize();

but note that if you are using any animation, you must allow the animation to be completed before calling the .resize() function.

Example:

$('.reference-long').click(function(){
    $("#long-2").slideToggle(function(){
        $("article").getNiceScroll().resize();
    });
});

Upvotes: 1

Arjun
Arjun

Reputation: 2227

Use resize() function instead of remove()

$("article").getNiceScroll().resize();

Upvotes: 14

Related Questions