Jquery Isotope implementation: not animating

Question

it was all going well, implementing isotope at:

http://rgbdrinks.squarespace.com/

Then I got ahead of myself, tried to alter the container CSS and couldn't retrace my steps.

I'd be hugely grateful for any help at all.

Best wishes,

Andrew

Here's the code:

    <div id="container">
    <div class="item"><span class="full-image-inline ssNonEditable"><span><img style="width:   150px;" src="/picture/drink%20pour%203.jpg?pictureId=18133348&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962041640" alt="" /></span></span></div>
    <div class="item"><span class="full-image-inline ssNonEditable"><span><img style="width: 150px;" src="/picture/martini%20glass%20splash.jpg?pictureId=18133349&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962058097" alt="" /></span></span></div>
    <div class="item"><span class="full-image-inline ssNonEditable"><span><img style="width: 150px;" src="/picture/tablecloth.jpg?pictureId=18133350&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962092184" alt="" /></span></span></div>
<div class="item"><div id="squarespace-slideshow-wrapper-1370943850" rel="51b6f18ae4b0877f36bb6468" class="ss-slideshow-v2"></div></div>
</div>

<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/jquery-1.7.1.min.js"></script>
<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/jquery.isotope.min.js"></script>  
<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/fake-element.js"></script>

<script>
$('#container').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'fitRows'
});
</script>

The div doesn't resize with the browser window, so there is no animation of the elements. — Jack, Jun 12 '13 at 08:25
please click the check mark to accept the answer below if it solves your problem. :) — Stanley, Jun 12 '13 at 14:53
Oh actually, I have another question live if you would be able to have a look at that too? — Jack, Jun 14 '13 at 19:17

score 0 · Accepted Answer · answered Jun 12 '13 at 09:30

0

You set a fixed width (1024px) for #canvasWrapper and #contentWrapper. Try to set the width in percentage instead of fixed width

#canvasWrapper {
  width: 100%;
}

#contentWrapper{
  width: 100%;
}

answered Jun 12 '13 at 09:30

Stanley

5,057
4
34
44

Jquery Isotope implementation: not animating

1 Answers1