Questions tagged [jquery-isotope]

Isotope is a client-side jQuery plugin that allows masonry-style grid and table layouts, along with data sorting and filtering, to enable dynamic relayout of elements on a page.

Isotope has similarities to Masonry and Packery; in fact, it utilizes both and adds sorting and filtering capabilities.

This library is distributed with two distinct licenses: open source (GPLv3) and commercial.

Useful Links:

1675 questions
7
votes
2 answers

Isotope fitColumns layout causes the container to go blank

See http://jsfiddle.net/cUcFd/5/ -- note that if you change the layoutMode to 'masonry' or 'fitRows' it works fine. But with 'fitColumns' it's simply blank, and all the blocks disappear. There seem to be requirements as to what styles are set on the…
enn
  • 83
  • 1
  • 4
7
votes
1 answer

Issues with isotope appending

I am using isotope to build a smooth grid gallery. Currently I am having issues with the append feature: http://isotope.metafizzy.co/docs/methods.html#appended If I call the append like this $('#loadMore').click(function(){ val='
Chris Samson
  • 159
  • 1
  • 12
6
votes
1 answer

Outer Padding and Margins with Masonry / Isotope

I have been struggling with Isotope for a while now. After a few different sittings, I can't seem to figure this one out. isotope.metafizzy.co/index.html I'll illustrate my problem with images, but here is the explanation. As you can see on my…
davecave
  • 4,314
  • 5
  • 23
  • 32
6
votes
2 answers

Match words in any order in Isotope (using input value)

I'm using Isotope.js with vanilla javascript. Inside my items, I have put a div with a display:none to hide keywords for each item. For example, the item Orange has the keywords 'color' and 'fruit'. So if someone types in any of those three words…
6
votes
1 answer

Unable to import isotope plugin---"$(container).isotope is not a function"

I've had zero luck with getting the Metafizzy Isotope plugin working. The Network tab shows that it's not coming through. I installed isotope-layout and required it in my main-file.js, but the code fails to recognize $(container).isotope. The part…
Tsardines
  • 632
  • 2
  • 6
  • 14
6
votes
3 answers

jQuery: infinite scroll and the back button

OK so I know this causes problems with everyone, and it's causing problems with me too. I'm using the infinite scroll plugin on a client's site, in combination with the isotope plugin to load in their products sequentially, the problem is though as…
user1374796
  • 1,446
  • 13
  • 43
  • 73
6
votes
2 answers

Isotope not working with imagesLoaded?

I'm using jQuery Isotope to create a horizontal layout, aligning DIVs with 100% height next to each other and center images inside each DIV vertically. So for, I'm calling Isotope like this and everything works fine in Chrome…
R4ttlesnake
  • 1,481
  • 2
  • 16
  • 26
6
votes
1 answer

Issue in Chrome with Bootstrap 3 columns when using Jquery Isotope (but fine in Safari!)

I have spent days trying to solve this and I'm at my wits' end. If anyone has any insight, I would be very, very grateful. I am working on a site and using both Bootstrap 3 and Jquery Isotope. I am using Bootstrap 3's grid to arrange divs in four…
6
votes
3 answers

Masonry / Isotope / Packery Images Loaded + Web Fonts

I am using Packery.js [ http://packery.metafizzy.co/ ] on a site and am having a few layout issues on page load. I have looked at the documentation for Masonry, Isotope, and Packery (all very similar plugins, all developed by David DeSandro) and it…
beefchimi
  • 1,222
  • 2
  • 15
  • 34
6
votes
1 answer

jQuery Isotope - Multiple Instances on the same page

I've been working with the Isotope plugin for jQuery, and I've run into some problems with our homepage which requires two isotope instances. Both of them have different types of items and they are kept in their own containers, but when I click a…
Ben Wilson
  • 83
  • 1
  • 4
6
votes
1 answer

Isotope not working with ajax loaded content

I have a select-box that contains 4 options, selecting each of which will result in removing all the present .item divs and loading new .items and then realigning them using isotope. $('.menu-select').change(function(){ var…
soundswaste
  • 2,634
  • 3
  • 19
  • 39
6
votes
2 answers

jQuery isotope checkbox filter, if all uncheck show no item

This is regarding input checkbox for filtering jQuery isotope itemselector. Refer to demo here, checkboxes are checked when the page is load. However I stumble upon the problem when all is unchecked by user, it will just show all .items instead of…
Mars Mellow
  • 228
  • 2
  • 13
6
votes
2 answers

Resize bootstrap div to fit content

I am using twitter bootstrap to make 2 divs placed side-by-side. Each div has medium and large images inside it, arranged using jquery isotope. The problem is that when there are not enough images in a div, the div width remains same and there's a…
soundswaste
  • 2,634
  • 3
  • 19
  • 39
6
votes
5 answers

jquery isotope plugin container height will not grow with isotope-item (same with masonry)

I have an isotope-item that will grow in height when somebody comments inside of it. When it grows, how do I tell the main isotope container to grow with it? Right now what is happening is, as the isotope-item grows, the isotope container maintains…
botbot
  • 6,848
  • 12
  • 53
  • 93
6
votes
1 answer

isotope & Infinite Scroll with manual triggering

I'm using Isotope plugin with Infinite Scroll plugin. With the default settings Infinite Scroll automatically triggers loading new elements which is fine, however, I would rather have a button "Load more images". I'm only missing a small piece of…
Antonio
  • 203
  • 3
  • 10