JScrollPane горизонтальная прокрутка, не работает?

Question

[Gor321]

Здравствуйте! Помогите пожалуйста решить проблему.
На сайте есть такой раздел.

Использую обычные табы для переключения .
Нужно было сделать горизонтальную кроссбраузерную полосу прокрутки, использовал JScrollPane.
Проблема заключается в том, что JScrollPane работает только на первой вкладке, добавляются все его классы и блок самой прокрутки. В остальных вкладках он не работает и не подключается вообще. Пробовал давать другие названия вкладкам и вызывать еще раз JScrollPane, при таком варианте классы подключались, но не все, не было блока с самой прокруткой, и самого блока с контентом не видно, задается автоматически высота 0. В чем может быть проблема, подскажите, сбился с толку?

<ul class="catalog-tabs">
	<div class="catalog-cap">КАТАЛОГ ТОВАРОВ</div>
	<li class="catalog-tab active"><div>До 25 тысяч рублей</div></li>
	<li class="catalog-tab"><div>От 25 до 50 тысяч рублей</div></li>
</ul>
<div class="catalog-content active">
	<div class="catolog-items">
               <div class=""catolog-item"></div>
                <div class=""catolog-item"></div>
                <div class=""catolog-item"></div>
       </div>
</div>
<div class="catalog-content">
	<div class="catolog-items">
               <div class=""catolog-item"></div>
                <div class=""catolog-item"></div>
                <div class=""catolog-item"></div>
       </div>
</div>

//////////////

$(function(){ 
	$('.catolog-items').jScrollPane(); 
});

Answer 1

[Exploding]

Проблема в том, что он не может определить размеры элементов и соответственно создать свои скроллбары, т.к. элементы скрыты.
Инициируйте плагин прокрутки только на тех элементах, которые видны. Например, у табов ваших должно быть что-то типа afterOpen события, вот в нем и будет ваше решение проблемы.

Comments

[Gor321]

Exploding, можете подсказать как это сделать, буду очень признателен.
Вот код моих табов, что нужно добавить, чтобы все заработало? Не очень силен в js.

$('.catalog-tabs').each(function() {
   $(this).find('.catalog-tab').each(function(i) {
      $(this).click(function(){
	$(this).addClass('active').siblings().removeClass('active')
	.closest('.catalog-wrap').find('.catalog- content').removeClass('active').eq(i).addClass('active');
	 });
     });
});

[Exploding]

Gor321, Зачем столько циклов то? Какие-то странные табы у вас там, да и разметка не соответствует js. И ошибок, что в разметке (удвоение кавычек в catalog-item), что в js...
Вот вам js (проверять лень было, но должно все работать):

$('ul.catalog-tabs > li.catalog-tab').on("click", function(){
	var i = $(this).index();
	$(".catalog-tab.active, .catalog-content.active").removeClass("active");
	$(this).addClass("active");
	$('.catalog-wrap .catalog-content:eq('+i+')').addClass("active");
	$('.catalog-content.active .catolog-items').jScrollPane();
});

И вот вам судя по всему такой должен был быть html:

<ul class="catalog-tabs">
	<div class="catalog-cap">КАТАЛОГ ТОВАРОВ</div>
	<li class="catalog-tab active"><div>До 25 тысяч рублей</div></li>
	<li class="catalog-tab"><div>От 25 до 50 тысяч рублей</div></li>
</ul>
<div class="catalog-wrap">
	<div class="catalog-content active">
		<div class="catolog-items">
			<div class="catolog-item"></div>
			<div class="catolog-item"></div>
			<div class="catolog-item"></div>
		</div>
	</div>
	<div class="catalog-content">
		<div class="catolog-items">
			<div class="catolog-item"></div>
			<div class="catolog-item"></div>
			<div class="catolog-item"></div>
		</div>
	</div>
</div>

Идея понятна, а работоспособность ежели что - подшаманите уже там