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:

1662 questions
6
votes
2 answers

How to get isotope to avoid gaps with variable size tiles

Is there a way to get isotope to order the grid in the way that there are no gaps? I see the elements changing places in few of the demos but can't achieve the effect myself. Like here: http://isotope.metafizzy.co/demos/layout-modes.html Here's my…
crappish
  • 2,688
  • 3
  • 28
  • 42
5
votes
3 answers

jQuery isotope: filter on page load based on get variable

I am working with the jQuery isotope plugin and would like to display only items from a particular group when the page loads. Currently all of the items are displaying: http://aproposstudio.com/category/work/ For example, on the link above, is there…
superUntitled
  • 22,351
  • 30
  • 83
  • 110
5
votes
1 answer

Is there a way to make isotope fill all the white space for a fixed width div

Is there a way to make isotope fill all the white spaces on a row? The container has a fixed width and 3 different types of boxes (3 widths and a fixed height). I see 3 possible solutions: Make isotope look further down the list and make the…
orbitory
  • 1,090
  • 5
  • 16
  • 40
5
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
  • 883
  • 2
  • 8
  • 17
5
votes
4 answers

Google Analytics Setting Up A PageView On Hash Change

I'm trying to get a home page that has a bunch of content under Isotope to show each hash change as a pageview in Google Analytics. Originally, I was going to do this as events, but it really should be pageviews. So I setup the modified…
Keefer
  • 2,269
  • 7
  • 33
  • 50
5
votes
3 answers

jQuery Isotope: Hiding items initially

So I have items that can have multiple classes for filtering. Something like this:
An item that displays initially.
An…
Corey
  • 2,453
  • 4
  • 35
  • 63
5
votes
1 answer

Using isotope with requirejs and jquery

I've read the documentation about Isotope supporting RequireJs but I've inherited a site that uses RequireJS which is set up in a slightly different way, and I'm struggling to get my head around how to get Isotope and RequireJS to work together. …
Dan
  • 5,836
  • 22
  • 86
  • 140
5
votes
2 answers

Uncaught TypeError: Cannot read property 'LayoutMode' of undefined

HI i am making my project using Isotope.js where i have to show my tiles in the horizontal manner, So i am following code var winDow = $(window); // Needed variables var $container=$('.portfolio-box, .blog-box'); var…
Jot Dhaliwal
  • 1,470
  • 4
  • 26
  • 47
5
votes
1 answer

Isotope blurred elements in google chrome

I'm using isotope in Google Chrome and all items contains: -webkit-transform: translate3d(properties); and every even element[2,4,6,8,10,12,14...] is blurred in chrome, in firefox everything is ok Here are properties of first elements: position:…
Marek Szmalc
  • 783
  • 1
  • 7
  • 15
5
votes
1 answer

Dynamic HTML not displaying correctly with Isotope

Synopsis of problem When the screen loads it loads an empty div that jquery will later make individual calls to a web service and then dumps the resulting HTML in. Elements are then selected/deselected to be included in the calculation and results…
PseudoNinja
  • 2,846
  • 1
  • 27
  • 37
5
votes
2 answers

Height issue in Chrome with jquery Isotope in responsive layout with Bootstrap 3

I'm using the Isotope plugin to filter my product listing. I also use Bootstrap 3 for the general layout, the page should be responsive so the column widths are percentage-based. I want equal height thumbnail images and equal width, a simple grid.…
jtheman
  • 7,421
  • 3
  • 28
  • 39
5
votes
1 answer

ajax filtering and infinite scroll (php & isotope)

I am using the isotope plugin (http://isotope.metafizzy.co/) with the infinite ajax scroll plugin (https://github.com/webcreate/infinite-ajax-scroll). The infinite scroll works great with the isotope filtering, however, I want to load more items…
LeeTee
  • 6,401
  • 16
  • 79
  • 139
5
votes
1 answer

Bootstrap isotope and lazyload fetch/load images via json

Normal isotope usage for ajax fetching is working. see working jsfiddle. isotope with lazyload via ajax fetch not working. see problem jsfiddle. Problem: lazyload does not trigger and keeps showing grey image. javaScript for lazyload setup…
django
  • 2,809
  • 5
  • 47
  • 80
5
votes
1 answer

Isotope.js dynamically changing sort data values

I'm trying to dynamically change the sort data values on Isotope items, but Isotope seems to cache the initial order values and only use that on the 'reLayout' call. I have a page of items that, when clicked, will expand to 100% of the container…
johntayl
  • 140
  • 2
  • 8
5
votes
1 answer

fallback for jquery isotope if javascript is disabled?

Is there a fallback for jQuery isotope if JavaScript is disabled? Suppose if I m using there fitColumns property, is there a fallback to that layout style if JavaScript is disabled, like what u have in d new myspace. the initial posts, which…
arjun
  • 1,594
  • 16
  • 33