Пустой дополнительный <li>в горизонтальной jCarousel в Chrome и Safari - PullRequest
Новая
       41

Пустой дополнительный <li>в горизонтальной jCarousel в Chrome и Safari

3 голосов
/ 17 октября 2011

Chrome и Safari (движок Webkit) добавляют 2 дополнительных <li> в список <ul> с классом 'jcarousle-item-placeholder'.Как я могу удалить это?jCarousel в FF, IE и Opera в порядке.

Спасибо за помощь.

Ответы [ 6 ]

4 голосов
/ 27 июля 2012

В моем случае я добавлял приведенный ниже код дважды 

<script type="text/javascript">

       jQuery(document).ready(function () {
           jQuery('#mycarousel').jcarousel();
       });

</script>

Я удалил один блок, и он работал для меня.

2 голосов
/ 27 октября 2011

Изменение $(document).ready на $(window).load в файле js, который я использую для вызова jcarousel, сработало для меня.

К сожалению, это решение влияет на способ загрузки javascript, но лучше, чем два пустых li.

Ссылку на разницу между $(document).ready и $(window).load можно найти здесь здесь в stackoverflow

1 голос
/ 12 февраля 2012

Я видел, как эта проблема возникает в Safari, когда jcarousel вызывается дважды на одном и том же ul - если вы работаете с CMS, это может быть легко сделать, так как jcarousel может быть вызван функцией модуля (например, jcarousel_add() с Jcarousel модуль Drupal), файл JS, включенный в ваш собственный код модуля, в файл шаблона и т. Д. Стоит исключить это как возможность, комментируя вызов, с которым вы работаете

0 голосов
/ 09 июля 2013

Убедитесь, что ваш тег имеет определенные атрибуты высоты и ширины, например 

<img src="images/test.png" height="100" width="100" alt="test" />

У меня были похожие проблемы с несколькими классами jcarousel-item-placeholder, появляющимися в list-items, где я не определял ширину в своем теге. Я полагаю, что DOM был готов, но изображения еще не были загружены, поскольку событие загрузки окна не произошло. Без объявления ширины изображения jcarousel не может правильно рассчитать ширину до тех пор, пока окно не будет загружено, и в этом сценарии кажется, что он вставляет элементы-заполнители.

0 голосов
/ 18 января 2013

Я нашел быстрое и грязное решение проблемы, добавив css "display: none" к любому <li> с классом jcarousel-item-placeholder.

  1. Перейдите к файлу jcarousel.min.js

  2. Ищите (строка 249 для меня): if(h.length===0){ h=this.create(e).addClass(this.className("jcarousel-item-placeholder"))

  3. Сразу после этого без пробелов добавить: .css({ "display":"none"}).attr("jcarouselindex",c);

  4. Проверьте, что Chrome, Safari, IE и FF все должны работать как положено, два пустых <li class='...jcarousel-item-placeholder...'></li> должны исчезнуть.

Раздел кода из моего jcarousel.min.js: 

Line 248...
if(h.length===0){
h=this.create(e).addClass(this.className("jcarousel-item-placeholder"))

//Code to add start
.css({
"display":"none"
}).attr("jcarouselindex",c);
//Code to add end

if(j.length===0)this.list.prepend(h);else j[d?"before":"after"](h);
if(this.first!==null&&this.options.wrap=="circular"&&this.options.size!==null&&(e<=0||e>this.options.size))j=this.get(this.index(e)),j.length&&(h=this.add(e,j.clone(!0)))
}
j=h;
0 голосов
/ 20 июля 2012

У меня тоже была эта проблема, и в итоге один из моих закрывающих тегов li был случайно написан как <li> вместо правильного </li>, что заставило браузер отображать дополнительные пустые теги li

...