jscrollbar doesn't show when calling a hidden div

Question

I have content in a hidden div that contains a list box with a vertical scroll bar. When a link is clicked the div becomes visible along with the list box and the default scroll bar.

The challenge is that jscrollpane is declared on the div that contains the list box not the default scroll bar.

Within the same page I have an event that if the browser window is re-sized the jscrollpane is reinitialize for the browser horizontal scroll. If the browser is re-sized the correct jscrollpane is then displayed for both horizontal and vertical.

I am trying to get the jscrollpane to load when the initial div state is changed from hidden to visible. I know the jscrollpane works because it will trigger on the re-size.

What do I need to do to get it to work on the initial change state of the div from hidden to visible? What event should I look for? I have tried the following and more..

$(document).onload(function () {
                 $(function () {
                     jScrollPane = $('.scroll-pane').jScrollPane({ showArrows: true, arrowScrollOnHover: true });
                 });
             });

Also

$(document).ready(function () {
                 $(function () {
                     jScrollPane = $('.scroll-pane').jScrollPane({ showArrows: true, arrowScrollOnHover: true });
                 });
             });

Resize code that corrects all jscrollpane

   $(window).resize(function () {
     if (this.resizeTO) clearTimeout(this.resizeTO);
     this.resizeTO = setTimeout(function () {
         $(this).trigger('resizeEnd');
     }, 500);
 });

 $(window).bind('resizeEnd', function () {
    
     $(function () {
        jScrollPane = $('.scroll-pane').jScrollPane({ showArrows: true, arrowScrollOnHover: true });
     });
    var newHeight = $(window).height();
   
 });

Code to show hidden DIV

function showDiv(elemId, userDivId) {
var elem = document.getElementById(elemId);
var calcedPos = (window.outerWidth - mouseXpos);
var userDetailWidth = $(".UserDetail").width();
if (calcedPos >= (userDetailWidth + 100)) {
    $(elem).animate({ width: 'show' }, 210);
}

document.getElementById(elemId).style.visibility = 'visible';
document.getElementById(elemId).style.display = 'block';

$('.user-list-container').css('background-color', 'inherit');
document.getElementById(userDivId).style.backgroundColor = '#e6e6e6';

$('.spacer-container').height(100);

vph = $(window).height();
cvph = vph - 730;
$('.spacer-container').css({ 'height': cvph + 'px' });

}

Answer 1

Just issue a resize to the window after you make the div visible..

$(window).trigger('resize');