About a year ago, I made a post about using jScrollPane for customizing scrollbars with CSS. Recently I did a project that required this feature to be implemented in various ways. One of these implementations required these custom scrollbars to be applied within Tabbed content.

I was using the Quicktab module for Drupal7, which creates tabbed content based on various criteria. We were using views to list out content, but we wanted it displayed in a fixed-height tab. Those tabs would have these custom scrollbars to allow the user to view all the content without breaking the page layout.

It didn't take long to figure out how to apply these scrollbars. I simply had to display the hidden content, apply the scrollbar, and hide it again. But the trick to this was about the approach of how I did this.

At first I used a simple .show() to the hidden tabs, applied the jscrollpane, and then a simple .hide(). The problem with this was that Quicktabs uses a class to show and hide the content. So after I used the .hide(), the hidden tabs would not display again (the jquery .hide() command actually places the style inline, so it overrides the CSS that is hiding the content).

My next thought was to remove the style attribute. Instead of using .hide(), I would use .attr('style', '') - thus removing the style="display:none" from the div to allow the CSS to show it again. Some of you may already be seeing the error of my ways. But this seemed to make sense at the time.

The problem with this approach is that it had the same issue as .hide() in IE.

I realized that my 'solution' was shoddy. Re-reading what the problem of the .hide() issue told me the answer -- Quicktabs uses Classes to show and hide the content.

Instead of using the .show() command, I just had to remove the quicktab-hide class. So using .removeClass('quicktabs-hide'), applying the jscrollpane, and then .addClass('quicktabs-hide') solves the problem in all browsers.

Here was the final code that I used.

     // QUICKTABS --- these require a different approach.

     // Display hidden quicktab content so scrollbar can be applied

     $('#quicktabs_tabpage_front_quick_tab_1').removeClass('quicktabs-hide');

 

     //Apply quicktab scrollbars here

     $('#quicktabs-front_quick_tab .view-products-browsing').jScrollPane({showArrows: true, verticalDragMinHeight: 21, verticalDragMaxHeight: 21});

 

     // Return hidden quicktab content to original state

     $('#quicktabs_tabpage_front_quick_tab_1').addClass('quicktabs-hide');

This was definitely one of those scenarios where I was making it more difficult than it had to be. The simplest solution is usually the best.