CODEWITHSUNDEEP
javascriptjqueryhtmlscrollbarhide
Jack Hillard
Jack Hillard

Reputation: 606

nicescroll not scrolling when hidden div is shown

I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.

Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content. Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.

I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code" 

<script>
  $(document).ready(function() {    
    $("#right").niceScroll();
  });
</script>

into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.

The show/hide functions looks like this:

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}

with the actual div section of the page looking like this:

 <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">-Show Stuff</a>
                <div id="example" class="more">
                    <p>
                    "Stuff here"
                    </p>
                    <p><a href="#" id="example-hide" class="hideLink" 
                    onclick="showHide('example');return false;">-Hide Stuff-</a></p>
                </div>

Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)

Any ideas?

Upvotes: 1

Views: 3213

Answers (2)

ohrlando
ohrlando

Reputation: 136

I don't know what it is the correct solution but works fine after my div shows up and I call method:

$("#myHiddenDiv").getNiceScroll().onResize();

Upvotes: 1

Plippie
Plippie

Reputation: 2886

First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:

// cache container:
var $right = $('#right');

// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();

// resize nicescroll
$right.getNiceScroll().show().resize();

}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();

// also hide nicescroll:
$right.getNiceScroll.hide();

});

Upvotes: 0

Related Questions