Меню
Что нового?

бутстрап таб конфликтует с каруселью

mstdmstd

Новичок
Всем привет,
На странице бутстрапа используются таб(с 3мя закладками - http://getbootstrap.com/javascript/#tabs) и карусель(http://bootsnipp.com/snippets/featured/responsive-moving-box-carousel) и каким-то образом на закладках перед первой закладкой появляется область, которая выделяется как область active.
Оба компонента текущую страницу(закладку) определяют через класс active
На этой ссылке
ref
На закладках ниже заголовка"Useful Information"
над пунктом "About Us" появился белый блок
В firebug я вижу код:
HTML: 
<li class="active" role="presentation">
  <a class="" href="#images_carousel" data-slide="next"></a>
  <a data-toggle="tab" role="tab" aria-controls="tab_about_us" href="#tab_about_us">
    About Us
  </a>
</li>
Хотя изначально код таба :
HTML: 
        <div id="div_information_info" >
            <div class="hostel_title" id="tabs_useful_information">Useful Information</div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tab_about_us" aria-controls="tab_about_us" role="tab" data-toggle="tab">
                            About Us
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#tab_cancellation_policy" aria-controls="tab_cancellation_policy" role="tab" data-toggle="tab">
                            Cancellation Policy
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#tab_must_read_information" aria-controls="tab_must_read_information" role="tab" data-toggle="tab">
                            Must Read Information
                        </a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab_about_us">
                        <article class="hostel_long_text">{{ Hostel.about_us|nl2br|stripslashes | raw}}</article>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_cancellation_policy">
                        <article class="hostel_long_text">{{ Hostel.cancellation_policy|nl2br|stripslashes | raw }}</article>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_must_read_information">
                        <article class="hostel_long_text">{{ Hostel.must_read_information|nl2br|stripslashes | raw }}</article>
                    </div>
                </div>

        </div>
Каким-то образом туда пристроилась строка
HTML: 
<a class="" href="#images_carousel" data-slide="next"></a>
Если не отобрабражать карусель с картинками - то табы отображаются нормально

Так инициализиреутся карусель
Код: 
        $('#images_carousel').carousel({
            interval: 6000
        })
Как это побороть и есть ли возможность определить разные классы для активных элементов разных компонентов, которые обычно active ?


Спасибо !
 

mstdmstd

Новичок
И причем тут stripslashes? Может, этот фильтр тут и не нужен, ну так ведь проблема не в нем ...
 
fixxxer

fixxxer

К.О.
Партнер клуба
mstdmstd написал(а):
ведь проблема не в нем ...
Нажмите для раскрытия...
Вероятность того, что кто-то тут сталкивался с ровно такой проблемой в ровно такой комбинации, равна примерно нулю.
Значит надо брать и отлаживать код. Чужой код отлаживается ровно так же как свой.
 

mstdmstd

Новичок
fixxxer написал(а):
Вероятность того, что кто-то тут сталкивался с ровно такой проблемой в ровно такой комбинации, равна примерно нулю.
Значит надо брать и отлаживать код. Чужой код отлаживается ровно так же как свой.
Нажмите для раскрытия...
Да.
А еще вопрос был вопрос : есть ли возможность определить разные классы для активных элементов разных компонентов, которые обычно active ?
работая с плагинами / компонентами бутстрапа, я уже сталкивался, что активный элемент определяется классом active, И в доке не описано как переопеделить этот класс.
Возможно, есть такая возможность, Похоже что решение где-то рядом...
 

mstdmstd

Новичок
1) Отлаживать чужой код это да
У меня в проектое подклюен bootstrap.min.js

Я открыл bootstrap.js
И в определении табуляции строки
Код: 
    if ($this.parent('li').hasClass('active')) return

    var $previous = $ul.find('.active:last a')
В определении карусели:
Код: 
  Carousel.prototype.to = function (pos) {
    var that        = this
    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))

...
    if ($next.hasClass('active')) return (this.sliding = false)
То есть оба компонента отсылаются к одному классу active и вариант решения редактировать этот файл - что не лучшее решение, имхо.
Также просмотрев код этого файла я вижу что класс active также используется плагином ScrollSpy, то есть использование на одной странице 2 плагинов может привести к ошибкам

2) Я попробовал после инициализации компонентов спрятать этот ненужный мне код:
Для этого я присвои id самому табу и всем заголовкам закладок


HTML: 
            <div class="hostel_title" id="tabs_useful_information">Useful Information</div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist" id="ul_tabs">
                    <li role="presentation" class="active" id="li_tab_about_us">
                        <a href="#tab_about_us" aria-controls="tab_about_us" role="tab" data-toggle="tab">
                            About Us
                        </a>
                    </li>
                    <li role="presentation" id="li_tab_cancellation_policy">
                        <a href="#tab_cancellation_policy" aria-controls="tab_cancellation_policy" role="tab" data-toggle="tab">
                            Cancellation Policy
                        </a>
                    </li>
                    <li role="presentation" id="li_tab_must_read_information">
                        <a href="#tab_must_read_information" aria-controls="tab_must_read_information" role="tab" data-toggle="tab">
                            Must Read Information
                        </a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab_about_us">
                        <article class="hostel_long_text">{{ Hostel.about_us|nl2br | raw}}</article>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_cancellation_policy">
                        <article class="hostel_long_text">{{ Hostel.cancellation_policy|nl2br | raw }}</article>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_must_read_information">
                        <article class="hostel_long_text">{{ Hostel.must_read_information|nl2br | raw }}</article>
                    </div>
                </div>
и делаю :

Код: 
        var ul_tabs= $('#ul_tabs');

        var children=ul_tabs.children(); // Все элементы таба

        children.each(function(idx, val){
            alert( "idx::"+var_dump(idx) )
            alert( "val.innerHTML::"+var_dump(val.innerHTML) + "  :  "+var_dump(val))

            if ( jQuery.trim(val.innerHTML) == "" ) {  // Это искомый мой элемент - я хочу спрятать его !!!
                alert( "+++++idx::"+var_dump(idx) )
                alert( "+++++val::"+var_dump(val) ) // Это вывод на экран нужного элемента(его спойлер ниже)
                alert( "+++++val.nextElementSibling ::"+var_dump(val.nextElementSibling ) )
                alert( "+++++val.children ::"+var_dump(val.children ) )
                alert( "+++++val.firstChild ::"+var_dump(val.firstChild ) )
                alert( "+++++val.lastChild  ::"+var_dump(val.lastChild  ) )
                val.style.display= "none" // ЭТОТ КОД ОШИБКИ НЕ ВЫДАЕТ - то мой элемент не прячется

                val.css("display","none") // эта строка выдает ошибку TypeError: val.css is not a functionval.css("display","none")
Непонятно. почему валит ошибку val.css и почему не срабатывает val.style.display= "none" и как и переменной в цикле val получить валидный обьект?

Код нужного элемента :
http://pastebin.com/EJtVSGg4
 

mstdmstd

Новичок
Методом тыка решение нашел в том, чтобы создать первый фиктивный таб :
HTML: 
                <ul class="nav nav-tabs" role="tablist" id="ul_tabs">
                    <li role="presentation" class="active" id="li_tab_empty">
                        <a href="#tab_empty" aria-controls="tab_empty" role="tab" data-toggle="tab"></a>
                    </li>
                    <li role="presentation" class="active" id="li_tab_about_us">
                        <a href="#tab_about_us" aria-controls="tab_about_us" role="tab" data-toggle="tab">
                            About Us
                        </a>
                    </li>
И по загрузке страницы прятать именно этот фиктивный таб :
Код: 
        var ul_tabs= $('#ul_tabs');
        var childs=ul_tabs.children();
        for (var i = 0; i <= childs.length - 1; i++) {
            if ( i == 1 ) {
                childs[i].style.display = "none"
            }
        }
Если прятать имеено создаваемый ненужный мне таб:
Код: 
            if ( i == 0 ) {
то не работает...
Из имеющихся в моем Ubuntu браузерах нормально работает в Chromium, Firefox, Opera
В Konqueror не работает( да и не сильно надо )

Кому не сложно и кто под виндой проверьте пожалуйста в IE
http://dev4.softreactor.com//hostel/victoria/melbourne-region/inner-city/standard-hostel
таб под тестом "Useful Information" должен нормально отображаться без пустых блоков cлева и миганий при загрузке...
 
fixxxer

fixxxer

К.О.
Партнер клуба
mstdmstd написал(а):
Кому не сложно и кто под виндой проверьте пожалуйста в IE
Нажмите для раскрытия...
browserstack.com

Если чо - там первый месяц бесплатно, если попросит карту - можно вбить киви-виртуалку с балансом 1 рубль. Набор браузеров на триалке ограничен, но для проверить в ие - хватит.
 
Войдите или зарегистрируйтесь для ответа.
Сверху