Вкладка (tab) не отображает элементы

[rus]

Всем доброго дня.

на сайте есть две вкладки: "Лидеры продаж" и "Новинки".

первая вкладка работает и все нормально отображает, если кликнуть на вторую, стиль в принципе меняется у нее и всего блока под ней, но в инспекторе он все-равно серого (типа не активный) цвета, хотя по стилям вроде как все гуд, за исключением ширины и высоты.

я склонен (чисто интуитивно) подозревать, что дело в скрипте самой карусели (/bitrix/templates/store_minimal_gray/jcarousellite.js), которая высчитывает ширину, высоту и пр. стили и применяет их к элементам, но вот как это связать с другим скриптом (/bitrix/templates/store_minimal_gray/tabs.js), который реагирует на клик по вкладке?

[Great Rash]

http://www.gmarwaha.com/jquery/jcarousellite/#doc

Судя по всему никак, в доках нет ни слова о API, т.е. заставить карусель перерисоваться после открытия таба не получится.

[lexxcode]

Эта карусеька не может размеры элементов корректно взять, пока находится в скрытом блоке. Сделай одноразовую инициализацию карусели, в тот момент, когда у тебя активируется вкладка, то есть видимой становится. Например, можно вкладкам добавить класс показывающий ее открытость. Там где открыто, инициализировать карусель сразу, а, потом уже при переходе, на другую, запускать другие карусельки, которые были в скрытом блоке.

Как-то так, во всяком случае я боролся с такой проблемой.

[rus]

Эта карусеька не может размеры элементов корректно взять, пока находится в скрытом блоке. Сделай одноразовую инициализацию карусели, в тот момент, когда у тебя активируется вкладка, то есть видимой становится. Например, можно вкладкам добавить класс показывающий ее открытость. Там где открыто, инициализировать карусель сразу, а, потом уже при переходе, на другую, запускать другие карусельки, которые были в скрытом блоке.

Как-то так, во всяком случае я боролся с такой проблемой.

с логической точки зрения вроде бы подход верный, но как это реализовать?

в css табов (/bitrix/templates/store_minimal_gray/tabs.css) есть класс visible для блоков который отвечает за показ блока и применив его для блока с классом box при загрузке страницы показываются обо блока, потом при переключении по вкладкам уже все работает нормально.

но как вот избежать при загрузке страницы показа обоих блоков, надо что бы только один показывался, другой был скрыт.

[lexxcode]

Еще как вариант инициализировать табы ПОСЛЕ слайдера http://alexriz.kodingen.com/sld/

[Great Rash]

Можно замутить класс .hidden, который будет прятать ненужный таб вот так:

.hidden {
  position: absolute;
  left: -9999px;
}

В таком случае скрипт его обработает. Когда надо показать таб, снимаем класс и вуаля.

[mishka]

Как подсказал выше Great Rash, надо прятать/показывать блоки не через display: block/none, а через абсолют.

Убери со стилей:

.box.visible {

display: block;

}

.box {

-moz-border-bottom-colors: none;

-moz-border-image: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

background: none repeat scroll 0 0 #EFEFEF;

border-color: #F87417;

border-style: solid;

border-width: 0 1px 1px;

display: none;

float: left;

overflow: hidden;

padding: 5px 12px;

width: 725px;

}

.visible пусть будет как есть. А вот .hidden скрывай абсолютом.

[rus]

попробовал, чет ничего не вышло, может не так делаю?

по умолчанию, первая вкладка отвечает за активный блок и его классами являются box и visible

я задал второму блоку, который был просто box еще один класс hidden и теперь нужно этот класс убрать когда я переключаюсь на вторую вкладку и оставить только box.

(function($) {
$(function() {

	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
		$(this).addClass('current').siblings().removeClass('current')
			.parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
	})

})
})(jQuery)

как?

или может я не правильно мыслю?

[Great Rash]

http://jsfiddle.net/nCCn2/

[mishka]

.tabs div.visible {position: static;}

Это не обязательно. Так как у него может быть relative а не static.

Главное прописать стили для класса .hidden { position: absolute; left: -32700px; top: -32700px; }

И теперь нам класс visible не нужен вообще.

Нам главное скрывать неактивные табы.

Показывать прятать тоже лучше не через fadeIn/fadeOut, а через

animate({opacity: ...}, {complete: function(){ $(this).addClass('hide') }})

[Great Rash]

Дописал бы мой фиддл.

[rus]

Great Rash попробовал твой вариант в "бою", но чет отказывается работать.

почему? jq - подключен, что еще надо?

[Great Rash]

Ну откуда ж я знаю Не видя кода. Да и мой вариант сыроват, прямо скажем. Я б его сам использовать не стал. Я так, дал направление так сказать

У mishka более правильный ход мыслей.

Перенеси часть своего боевого кода в jsfiddle.

[rus]

http://рестр.рф/ - вот тут, собсно переносить даже ничего не надо, я взял твой код и вставил на сайт.

вот на jsfiddle: http://jsfiddle.net/rus333/vtJmg/3/ - все работает, на сайте не хочет...

UPD: скопировал с сайта и еще раз изменил html код: http://jsfiddle.net/rus333/vtJmg/6/

[Great Rash]

На странице это единственные <li>? Если нет, то работать не будет. В jQuery есть такое понятие как "контекст поиска". Поменяй в коде

$('li').each(function(i) {

на

$('li', '.tabs_catalog_top_new').each(function(i) {

А то получается, что скрипт навешивает обработчики вообще всем <li> на странице. И индексы дивов не совпадают с индексами списка.

[rus]

cделал - нет результата

да что ж такое то а!!!

[Great Rash]

Ну выведи алерт на клик. Посмотри чо будет если вывести alert(i);

[rus]

$('li', '.tabs_catalog_top_new').each(function(i) {
  var _this = $(this);  
  _this.click(function(e) {
alert(i); 
    $('div', '.box_catalog_top_new')
    .removeClass('visible')
    .css({
      opacity: 0    
    })
    .eq(i)
    .addClass('visible')
    .animate({
      opacity: 1    
    });
  });
});

ничего не выводит

а может быть такое что версия JQ не подходит?

* jQuery JavaScript Library v1.3.2

[Great Rash]

Да нет, в той версии все это уже было. На фидле можно в меню слева версию сменить. А если закоментировать весь код на странице, кроме табов, будет работать?

[rus]

Да нет, в той версии все это уже было. На фидле можно в меню слева версию сменить. А если закоментировать весь код на странице, кроме табов, будет работать?

удалил содержимое блоков вывода контента, оставил только слова: текст1 и текст2, локально безо всякого "мусора" проверил - нет результата, а на jsfiddle работает...

jquery.min.js - * jQuery JavaScript Library v1.4.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="js" lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.min.js" type="text/javascript" language="javascript"></script>
<style type="text/css">
.tabs_catalog_top_new li {
	float: left;
	padding: 3px 5px;
}
.tabs_catalog_top_new, .tabs_catalog_top_new li {
	overflow: hidden;
	border: 1px solid;
}

.box_catalog_top_new {
	border: red 1px solid;
	padding: 5px;
}
.box_catalog_top_new div {
	background: pink;
	padding: 5px;
	position: absolute;
	left: -9999px;
	opacity: 0;
	filter: alpha(opacity=0);
}
.box_catalog_top_new div.visible {
	position: static;
}
</style>
<script type="text/javascript">
$('li', '.tabs_catalog_top_new').each(function(i) {
  var _this = $(this);  
  _this.click(function(e) {
alert(i); 
    $('div', '.box_catalog_top_new')
    .removeClass('visible')
    .css({
      opacity: 0    
    })
    .eq(i)
    .addClass('visible')
    .animate({
      opacity: 1    
    });
  });
});
</script>
</head>
<body>
<ul class="tabs_catalog_top_new">
	<li>Лидеры продаж</li>
	<li>Новинки</li>
</ul>
<div class="box_catalog_top_new">
<div>
текст1
</div>
<div>
текст2
</div>
</div>
</body>
</html>

[Great Rash]

Тьфу блин... а в $(document).ready кто будет заворачивать? Ясен пень не работает, код еще не знает что в DOM есть эти элементы. А на jsfiddle DOMContentLoaded автоматом стоит.

[rus]

1) обернул, хоть какой-то эффект появился.

2) при первом заходе на страницу первая вкладка по идее сразу должна отображать ее активный блок, а не отображает. как это сделать?

3) при клике по первому табу - все-равно показывается не весь блок, а только заголовок, то есть карусель по прежнему скрыта.

4) при клике по второму табу - вообще ничего не показывается.

[rus]

О чудо! Получилось!!!

Только вот все же вопрос остался: как сделать что бы при загрузке страницы всегда показывался блок который у первой вкладке?

css+opacity этому блоку?

[lexxcode]

Ну так например включить первый таб (добавить в ready):

$('.box_catalog_top_new .box_content').eq(0).addClass('visible').css({opacity : 1});

А чем не подошел мой вариант (так для справки)?

[s0rr0w]

Смотрю я на все это и улыбаюсь... На Великом и Могучем jQuery вчетвером не могут примитивную задачу решить.

И это еще не решалась задача автоматической догрузки контента у табов.

[rus]

Смотрю я на все это и улыбаюсь...

от улыбки...

Ну так например включить первый таб (добавить в ready):

$('.box_catalog_top_new .box_content').eq(0).addClass('visible').css({opacity : 1});

А чем не подошел мой вариант (так для справки)?

эмм..., да не то что бы принципиально не рассматривал, просто понимания нету некоторых вещей в js, он же вроде как C-подобный, а я больше склонен думать на php

Спасибо.

Great Rash - спасибо.