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.
jquery-isotope
1,672
questions
96
votes
2
answers
52k
views
Differences between Isotope and Masonry jQuery plugins [closed]
I recently discovered the Masonry and Isotope JQuery plugins. They seem to be functionally almost identical and both appear to have the same author. The only obvious difference I can see is the ...
- 186k
57
votes
1
answer
7k
views
Isotope v2 filtering with Infinite Scroll - Filter not finding all items and Window not resizing on filter
Head's up!
There's a pending feature-request issue on Isotope's GitHub repo that you should add a "đź‘Ť" reaction to if you're interested in seeing official docs and demos for this (how to ...
- 2,039
49
votes
4
answers
15k
views
How to implement Isotope with Pagination
I am trying to implement isotope with pagination on my WordPress site (which obviously is a problem for most people). I've come up with a scenario which may work if I can figure a few things out.
On ...
- 942
22
votes
2
answers
14k
views
jQuery isotope centering [duplicate]
Possible Duplicate:
How to center DIV in DIV?
Please take a look at the image below:
How can I make the grey squares horizontally centered inside the red container div? This is all made with ...
user1130217
19
votes
3
answers
46k
views
Angular-ui modal - pass data into modal
I am trying to pass some model data into a modal window when it is opened. When the user clicks on an element I want to have the modal window open and display more detailed information relating to ...
- 1,038
18
votes
3
answers
30k
views
Combining jQuery Isotope and Lazy Load
Have started a project using jQuery Isotope. Initially integrated with Infinite scroll, but thought it was a little clunky.
Was hoping to replace Infinite Scroll with Lazy Load, and wondered if ...
- 736
17
votes
6
answers
38k
views
Lightweight alternative to isotope.js [closed]
I'm using isotope.js purely because of its animations for adding/removing elements.
I love the effect of items animating to fill the position of removed elements simultaneously as the removed ...
- 9,025
16
votes
1
answer
39k
views
$elem.hasClass is not a function
I found this jsFiddle http://jsfiddle.net/Yvk9q/9/ that use isotope for bringing the element I want at the beginning.
I tried to copy that coda on my page but it doesn't work!
I really have no idea ...
user3057089
16
votes
2
answers
14k
views
Using Isotope with AngularJS (ng-repeat)
I'm trying to use angular to load div's to supply to isotope for layouting. For some reason, I can't use ng-repeat to create the div's. When I do something like, it works fine:
[agg.html]
<div ...
- 3,207
15
votes
8
answers
18k
views
React.js and Isotope.js
I'm checking out React.js and trying to figure out how this library can work together with Isotope.js.
The documentation of React says that it plays nicely with other libraries, but using it with ...
- 1,373
15
votes
3
answers
328
views
Isotope & javascript - elements aren't clickable anymore after adding a new one
I'm trying to make a table of images loaded from a json (not a real json, more like a javascript array) and every time the json changes (when I append a new image to the json file with some script, I ...
- 415
14
votes
7
answers
25k
views
jQuery isotope on first load doesn't work, How do I wait for all resources/images to be loaded?
I've got something I've put together using jQuery isotope here.. http://jsbin.com/eziqeq/6/edit
It seems to work in general but on first load, of a new tab, the Isotope plugin is setting the height ...
- 175
14
votes
1
answer
4k
views
jQuery Isotope search filter
Im using the following snippet to facilitate a live search on my Isotope implementation.
It works great, but im wondering if there is a way to limit the scope of what it searches for.
Our isotope ...
- 1,314
13
votes
2
answers
14k
views
Isotope: reset all combination filters
I have an isotope combination filter setup with a number of data-filter-group's, each with a rest/show all list item:
<li><a href="#" data-filter="*">Show all</a></li>
Is a ...
user366006
13
votes
2
answers
2k
views
Centering elements in isotope
Hello everyone and I hope you're doing well. I am using Isotope and below you can see the JavaScript that I have written. I find it impossible to center li elements if they are the Isotope elements. ...
- 517
11
votes
2
answers
17k
views
Jquery Isotope : How to fill empty gaps?
I've tried basically every single hint / tip / advice to achieve that, but still, I got these empty ugly spaces while using Isotope.
Here's a demo showing the problem I'm experiencing.
You see ...
- 331
11
votes
2
answers
17k
views
Lazy Load + Isotope
I've spent considerable amount of time trying to get isotope and lazy loading working together.
The issue: lazy loading works if the user scrolls down, however if the user uses the filters, the items ...
- 3,174
11
votes
2
answers
2k
views
jQuery Isotope - sort data by "group"
Using the Isotope plugin, I am trying to achieve a sorting system where, by clicking an item, groups are formed by positioning items of the same type after the clicked item.
Isotope's sort/filter ...
- 130
10
votes
3
answers
4k
views
jQuery Isotope RTL
I'm using this code to run Isotope with RTL support
$.Isotope.prototype._positionAbs = function( x, y ) {
return { right: x, top: y };
};
$('.portfolio-isotope').each(function() {
var ...
- 2,270
10
votes
5
answers
6k
views
Is there a way to target the first and last element in each row using jQuery isotope?
I have an masonry isotope grid that has n number of rows with two column sizes: 160px by 160px and 320px by 320px and I'd like to assign different styles to the first and last element of each row. My ...
- 2,740
10
votes
3
answers
25k
views
jQuery Isotope — Centered and Fluid/Responsive
I am asking a question about Isotope
It is a great plugin for jQuery.
I have been playing with it for a while now, but I don't know enough about javascript to combine two of the Isotope techniques, ...
- 4,748
10
votes
2
answers
3k
views
Filters + Search with Isotopes Breaks Search?
I am using Isotopes (v1) and have created a search field following an example in a Pen.
Initially it works, however, if I filter the Isotope gallery then the search field stops working.
I believe the ...
- 46k
9
votes
3
answers
15k
views
jquery Isotope option for auto height on element
So I'm using the isotope masonrylayout
$('section').isotope({itemSelector:'article',layoutMode:'masonry',transformsEnabled: false, animationEngine: 'jquery',masonry:{columnWidth:8}});
The problem is ...
- 9,896
9
votes
1
answer
9k
views
React components lifecycle, state and redux
I would like to use redux to store the state of my whole react application, however I am stuck with a particular case:
what to do with redux when the component needs a local state, modified by ...
- 7,831
9
votes
4
answers
5k
views
Large Isotope Gallery is Very Slow
I have an Isotope gallery (version 2) with almost 400 elements. A typical gallery item looks like this:
<div class="element hybrid a" data-category="hybrid">
<p class=&...
- 46k
9
votes
1
answer
5k
views
isotope - 'no results' message? [closed]
I'm using the Isotope JS plugin (v2.0.1) from Metafizzy to filter a library of publications, and I am using more than one filter (e.g. publisher and industry). Is there a way to check if my ...
- 771
9
votes
1
answer
2k
views
How to edit / remove `show all` view in isotope library?
There are two others topics about this, but they don't help me.
I have this html:
<div class="portfolio_inner_area">
<div class="portfolio_filter">
...
- 4,029
9
votes
3
answers
5k
views
how to deal with large data sets with jquery isotope
I am planning on using the great isotope plugin for displaying a list of contacts and then allowing them to be filtered. The issue I have is that it works great for a small data set but i'm not sure ...
- 6,302
9
votes
3
answers
13k
views
How to center items inside isotope container?
I have an isotope grid with a non fixed width and I dont know how to center the items inside the isotope container.
.box{
width: 40px;
height: 40px;
background-color: #e74c3c;
margin: 0 auto;
}
...
- 313
9
votes
1
answer
2k
views
ScrollReveal.js — Reveal All items on Click or Event?
Is there a way to reveal all items with scroll reveal with a click event? Perhaps a reveal all function?
Problem:
I am using scroll reveal as well as Isotope. The sorting functionality of isotope ...
- 1,514
8
votes
3
answers
10k
views
Isotope folded (elements overlap)
I have been reading stack overflow for a solution but can't find it.
(full size image at https://i.sstatic.net/n0hd0.png)
When I load the page it looks like that
Here is the site (beta)
http://e-...
- 896
8
votes
2
answers
3k
views
Problem with poor font rendering with CSS3 transitions, jQuery, & Google Fonts
In Firefox, there is no problem. Here's an image:
http://cl.ly/3R0L1q3P1r11040e3T1i
In Safari, the text is rendering poorly:
http://cl.ly/0a1101341r2E1D2d1W46
In IE7 & IE8, it's much worse, ...
- 143
8
votes
2
answers
960
views
Why is typing in a textarea in Firefox causing the screen to scroll?
I am experiencing an incredibly bizarre issue with the isotope plugin in Firefox only. I have a textarea in each of my isotope elements and when I scroll down to the bottom and type in one of the ...
- 2,324
8
votes
1
answer
1k
views
Two methods of looping through Ajax requests for jQuery Then When - which to use?
I've got a deceptively simple blog project in the works, where I'm trying to bring together Isotope Jquery (for layout/filtering/sorting), Infinite Scroll, and dynamic loading of all blog excerpts via ...
- 2,039
7
votes
5
answers
8k
views
Callback for jquery plugin Isotope
I'm using isotope ( http://isotope.metafizzy.co ) with expandable items, and i would like to use ScrollTo so that i can automatically scroll to the newly expanded item..
I first tried to use the ...
- 852
7
votes
3
answers
7k
views
Masonry: remove gutter from last column
Been working with the new version of Masonry which seems to work much smoother, especially for the fluid/responsive build I am doing.
One issue I have encountered, however - I am not sure how to ...
- 3,403
7
votes
2
answers
8k
views
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')...
- 3,054
7
votes
4
answers
2k
views
Using Masonry, jQuery, and PHP to make an album cover gallery
I read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something ...
- 577
7
votes
2
answers
4k
views
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 ...
- 83
7
votes
2
answers
5k
views
Use Isotope library in a fixed-height container?
I am using Isotope for a project. We bought a commercial license.
I need to get the isotope tiles in a fixed-size container (height is especially critical) to work within a larger layout.
I tried ...
- 14.8k
7
votes
3
answers
8k
views
Isotope + Lazyload: image size
Two things to keep in mind before I expose my problem:
1. I'm not a programmer, therefore I have NO IDEA of what I'm doing
2. Talk to me like I'm stupid, and be very very patient (see 1.)
Alright, ...
- 131
7
votes
2
answers
3k
views
Modernizr causes errors with jQuery Isotope
I'm trying to add Modernizr to this page: http://www.alternativeradio.org/pages/test. Modernizr works fine and does its job on other pages of this site. But on this page, which uses jQuery Isotope, ...
- 692
7
votes
6
answers
2k
views
Hairline gaps between items in isotope-packery on window resize
I am having a small issue with my isotope-packery layouts, where a very thin 1px or less line is appearing between certain items at some window sizes. Is there a way to eliminate this hairline gap?
...
- 69
7
votes
3
answers
8k
views
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 ...
- 1,574
7
votes
2
answers
2k
views
isotope reorder after search not working
I've integrated a jquery search plugin to search through isotope elements, the plugin uses regular expression to sort content, in real-time, based on the search input.
Isotope elements are ...
- 1,841
7
votes
1
answer
8k
views
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
$('#...
- 179
7
votes
2
answers
2k
views
Reapplying jquery-match-height after isotope grid is filtered
I am using jquery-match-height to match the heights of an inner div inside the grid items of an isotope layout, and this is working perfectly when the isotope grid loads.
However when I filter the ...
- 5,221
7
votes
2
answers
21k
views
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 ...
- 3,054
7
votes
1
answer
4k
views
jQuery Isotope Possible Chrome Bug?
I'm using jQuery Isotope to fill in the spaces on a multi-width multi-height grid (equal proportions).
The grid is sorted using ui-sortable with a button to toggle back to Isotope after sorting. ...
- 3,444
7
votes
0
answers
3k
views
jQuery Isotope - Not working within a responsive/fluid grid [closed]
I am in the process of building a photoblog which utilises the brilliant Isotope plugin by David DeSandro but I am curently having some difficulty getting the plugin to work as intended within a ...
- 111