2013-07-15 5 views
0

Я использую хром на данный момент ... Я хочу, чтобы изотоп обычно работал, прежде чем решать специфические проблемы браузера (например, проблема flexbox в ffox).jquery isotope не запускается

Так что я звоню изотоп, как это:

<head> 
<!-- isotope --> 
<script src="../javascript/isotope-master/jquery.isotope.min.js"></script> 
<script type="text/javascript"> 
    var $container = $('.content'); 
    $container.isotope({ 
    // options 
    itemSelector : '.entry', 
    }); 
</script> 
</head> 

затем позже я иметь <div class="content"> с <article class="entry"> внутри него.

chrome inspector сообщает мне, что isotope.js загружается без ошибок, но НИЧЕГО не означает, что на странице ничего не происходит.

ОБНОВЛЕНИЕ: Основываясь на ответах, я решил заложить основы в кодепин. Он включает JQuery и изотоп через cdnjs.com: http://codepen.io/monsto/pen/qlKLg

Мои вопросы ...

  1. Что я пропустил в настройках? я явно что-то пропустил.
  2. Независимо от того, что я пропустил, если указано, где я пропустил это в документах?
  3. Есть ли тест или обратный вызов или тому подобное, где я могу сделать изотоп, выплевывать какой-то ACK на страницу? Я имею в виду, только потому, что это загрузка, не означает, что это стреляет.

UPDATE Оказывается, что у меня есть серьезный недостаток в понимании того, что именно нужно сделать, чтобы установить изотоп. даже если следовать примерам, это не работает (я думаю, что я особенный). Вопросы № 1 и № 2 в приведенном выше списке наиболее важны.

+1

Пробовали ли вы вызов сценария в конце тела? – Chad

ответ

0

Прежде всего, вы определяете $container перед загрузкой страницы, что предотвратит присоединение изотопа к элементу; для устранения этого, выполните следующие действия.

$(function() { 
    var $container = $('.content'); 
    // ... 
}); 

Вы можете увидеть упорядоченность ожидаемый изотопом в их примере здесь: https://github.com/desandro/isotope/blob/master/_posts/demos/2010-12-12-basic.html

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

.isotope, .isotope .isotope-item { 
    -webkit-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
      transition-property:   transform, opacity; 
} 

[В Документах http://isotope.metafizzy.co/docs/animating.html#content]

+0

Я пробовал несколько перестановок назначения селектора (в том числе «$ (function() {», как вы полагаете, этот код просто оказался тем, который был оставлен до того, как я сделал это сообщение, сделав его $ (function), поскольку вы скажем, все ли изотоп требует включения и т. д. в конце страницы? Это ... разные. Не то, что я бы сказал, что это уникально или несовместимо, это просто необычно и неожиданно. – monsto

+0

@monsto jQuery требует элемент существует до того, как вы запросите его, это проблема вашего кода. Если вы попытались отложить запрос до загрузки страницы, и проблема не исчезла, вы можете посмотреть мой код CSS. – matt3141

+0

Конечно, я это понимаю. «Не понимаю, является ли различие между тем, почему изотоп не работает, но вложенный (http://suprb.com/apps/nested/) работает с включением сценария и параметрами, определенными в . Вложенные файлы работают одинаково с установкой. .. определить оба t и селектор. обновление оп с дополнительной информацией. – monsto