Looking to enhance my jqueryUI tabs by incorporating a smooth scroll bar within each tab. I've experimented with various scrollable plugins such as jQuery custom content scroller, TinyScrollbar, and now areaaperta NiceScroll. However, I continue to encounter the same issue - the scrollbar only functions within one tab.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs" style="width:900px; font-size:100%;">
<ul>
<li><a href="#tabs-1" >FIRST</a></li>
<li><a href="#tabs-2">SECOND</a></li>
<li><a href="#tabs-3">THIRD</a></li>
</ul>
<div id="tabs-1">
<div id="thisdiv">
<p><b>FIRST SCROLLABLE PARAGRAPH</b>...</p></div></div>
<div id="tabs-2"><div id="thisdiv2">
<p><b>SECOND SCROLLABLE PARAGRAPH</b>...</p>
</div></div>
<div id="tabs-3">
<p>THIRD TAB </p>
</div>
</div>
<script>
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
$("#thisdiv2").niceScroll({cursorcolor:"#00F"}); }
);
</script>
Explore this jsfiddle link which demonstrates the seamless integration between UItabs and two scrollbars of the niceScroll plugin: http://jsfiddle.net/Fluc/EhcqX/4/
Furthermore, I attempted to utilize the same divs with scroll bars within each tab, which you can view at this link: http://jsfiddle.net/Fluc/cJPT3/2/
It's evident that the scrollable feature only functions within the first tab, despite trying various scrollable plugins. I'm not a jquery expert, but it seems like the issue might be related to the display property being set somewhere.
Any assistance on this matter would be greatly appreciated!