Close

March 14, 2014

Solving jScrollPane Issues with jQuery Slideup

We ran into a problem where a jScrollPane was not showing up on a longer div, when it was slide up using jQuery’s “slideDown”/”slideUp”.

After much debugging, we discovered that jScrollPane was actually being applied, however it was NOT calculating the actual DIV height correctly.

The solution was to resize the element after it had been slid up and then create the actual jScrollPane element.

//....
            $(this).toggleClass('active').next().slideDown('fast', function() {
 
                //just opened safety info, re-init the bar
                if(thisID=='our_main_trigger'){
                    //trigger a resize to make sure everything is set
                    $(window).trigger('resize');
                    //get our incorrect height.
                    jaspcon=$('.mobile-content').height();
                    //padding for our mobile resize.  Height is misreported..jpanel got confused
                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
                    jaspcon=$('.mobile-content').height(h-150);
                    //NOW create the jScrollPane
                    $('.scroll-pane-mob-ini').show().jScrollPane({
                       autoReinitialise:true,		
                        verticalDragMinHeight: 23,
                        verticalDragMaxHeight: 23,
                        horizontalDragMinWidth: 11,
                        horizontalDragMaxWidth: 11
                    });
 
 
                }
            });

Contact Us for any of your web application development needs.

Recent Posts