0

I'm using chrome for now... I want to get isotope generally working before dealing with browser specific issues (flexbox problem in ffox, for example).

So I'm calling isotope like this:

<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>

then later on i have <div class="content"> with <article class="entry"> inside it.

chrome inspector is telling me that isotope.js is loading without error, yet NOTHING i mean NOTHING happens on the page.

UPDATE: Based on responses, I decided to plunk the basics into codepen. It is including jquery and isotope via cdnjs.com: http://codepen.io/monsto/pen/qlKLg

My questions are...

  1. What did I miss in the setup? clearly i missed something.
  2. Whatever I missed, if pointed out, where did I miss that in the docs?
  3. Is there a test or callback or the like where I can make isotope spit out some kinda ACK to the page? I mean, just because it's loading doesn't necc mean it's firing.

UPDATE It appears that I have a severe deficiency in understanding what exactly needs to be done to install isotope. even when following the examples, it doesn't work (I guess I'm special). Questions #1 and #2 in the list above are most important.

monsto
  • 1,178
  • 1
  • 13
  • 26

1 Answers1

0

First of all, you are defining $container prior to loading of the page, which would prevent isotope from attaching to the element; to resolve this, do the following.

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

You can see the ordering expected by isotope in their example here: https://github.com/desandro/isotope/blob/master/_posts/demos/2010-12-12-basic.html

Now additionally, I have had issues with CSS3 transitions not being setup, which can be done with the following.

.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;
}

[In the docs: http://isotope.metafizzy.co/docs/animating.html#content]

matt3141
  • 4,303
  • 1
  • 19
  • 24
  • I've tried several permutations of assigning the selector (including "$(function(){" as you suggest; that code just happened to be the one that was left before I made this post. making it $(function) as you say. All that aside, does isotope require it's inclusion etc at the end of the page? That's . . . different. Not that I'd say it's unique or non-compliant, it's just uncommon and unexpected. – monsto Jul 15 '13 at 22:56
  • @monsto jQuery requires an element exist before you query for it; that's the issue your code runs into. If you have tried delaying the query until page load and the issue persists, you may want to look at my CSS code. – matt3141 Jul 15 '13 at 23:20
  • Sure I understand that. What I don't understand is the distinction between why isotope does not work, yet nested (http://suprb.com/apps/nested/) does work with the script inclusion and options defined in . Nested works the same with regard to setup... define both parent element and the selector to affect. updating the op with additional info. – monsto Jul 16 '13 at 00:25
  • @monsto Show me code that works that way. I don't see how that's possible. – matt3141 Jul 16 '13 at 00:44
  • Based on your last comment, I dug back into the page that used Nested. What I found was that when changing over to isotope, I'd left out a line from it's setup: `window.jQuery || document.write(' – monsto Jul 16 '13 at 01:33
  • If nothing else, tho, I have time to make it work right. right now I just wanted it to work – monsto Jul 16 '13 at 01:33