metafizzy / isotope Goto Github PK
View Code? Open in Web Editor NEW:revolving_hearts: Filter & sort magical layouts
Home Page: https://isotope.metafizzy.co
:revolving_hearts: Filter & sort magical layouts
Home Page: https://isotope.metafizzy.co
Hi,
In this sample with FF 4.0 : http://www.team-w.ch/de/teamw_team3.php after one filtering operation, the QTip popup renders always at the same position.
Another Site found in your "using:isotope Bookmarks" : http://www.presencemultimedia.co.uk/work/ seems to have the same issue with the shadowbox plug-in.
Thanks for your help
Similiar to jQuery UI, the option
method allows you to get and set options. This method should be added to the methods page
There's no easy way to prepend items to the beginning of the collection
$('#container')
.prepend( $newItems )
.isotope( 'addItems', $newItems )
.isotope( 'reLayout');
will only add them to the end.
This will not work if you use another version of Modernizr, before this line, which test other things. I don't have a fix for this, unless to write it in your documentation. Too bad :(
Looks like jQuery UI widget bridge doesn't have internal support for passing in a callback in the plugin's arguments.
Docs either need to be revised, or callbacks should be supported.
Request from Chris Armstrong
when adding items to isotope, is it possible to have them fade in and come from the bottom (instead of the top left)?
Is there anyway that I can use search to submit key-words to filter results?
thanks in advance
Is there any way to create an exception for an element in sorting? Lets say I sort elements based on number but I want always the first element to stay first when sorting asc or desc.
if i will not use any class="number" only for this element when the rest have, for some reason all the sorting goes crazy.
Thanks
I'd love to be able to pass or recalculate column widths when a resize is triggered specifically with the masonry layout. It would be handy for doing smart columns that shink/grow a little to fill the container on resize.
I'm working with an ajax call for new elements with images inside, I'm calling 'remove' and then 'insert' with callback 'reLayout'. The problem is that 'reLayout' is called before the images are loaded so it doesn't respect their sizes.
Where would you add the imagesLoaded hook for this to properly work?
Thanks!
Hi,
I was wondering if it is possible to center all the items within the container, instead of them being left aligned.
If it is - i would buy a support license for your help. I'm afraid that maybe it is not.
Here is my fiddle: http://jsfiddle.net/yv7m3/
You made a fiddle to center the container, but not the item elements inside: http://jsfiddle.net/desandro/P6JGY/6/
You also suggested a great site, but i'm not sure how to pick up what they have done: "ish.tv is also a great example of how to center masonry layouts."
Thanks for your time.
I am noting an issue with using Isotope with Qtip 2 as well as with Yoxview. As an issue previously reported with Qtip 2, tooltips show up always in the upper left (it seems over the first .item). I am also seeing this when opening a lightbox with Yoxview, it originates from the upper left rather than from the thumbnail actually clicked, as it should. I fixed the tooltip issue in my case by positioning the modal tip "my: center, at: center". You can see the Yoxview issue here:
http://jalbumskins.com/lightbox/
Sorting algorithm is limited to one set of data.
In the Elements Complete demo, Sort by number then by category. Within each category, the items elements should be sorted by number. Ideally you should be able to rely on the previous sort order to 'carry over' on the next sort.
On the elements complete demo, rapidly click Number (asc) and then Weight (asc) and repeat. If this is done rapidly enough, the eventual sort order will fluctuate. Most of the time K and Ar will exchange places like you would expect, but after enough rapid clicking, Ni and Co will move as well.
This may or may not be related to https://github.com/desandro/isotope/issues#issue/1
It'd be nice for Isotope to change hash tags so that users can save their state in a URL. Similiar to jQuery BBQ
When I have different filters applied to isotope it seems to loose one of the earlier filters. For example, if I have one filter on 'countries' with values india, china and another filter on category with values 'men', 'women' and 'children'. If I have india filter on and go on to apply different values for category, I get to see values from both india and china. It doesn't restrict the values to india.
See http://dropshado.ws/post/4085720152/css-transforms-breaking-flash
To do: build an option that disables CSS transforms, so the layout logic will use top/left absolute position, like the original Masonry.
Instead of having to click a separate interactive button labeled "show all", it would be nice to be able to use a single interactive button to toggle the filter on/off. I'm not sure what the best way to go about doing this now would be?
I modified some of the layouts to store the position of the item so that I could fake renumbering ordered lists that were sorted. Would be nice to have this included.
Here's an example:
_straightDownLayout : function( $elems ) {
var instance = this;
$elems.each( function( i ){
var $this = $(this),
y = instance.straightDown.y + instance.posTop;
instance._pushPosition( $this, instance.posLeft, y );
instance.straightDown.y += $this.outerHeight(true);
$this.data('position', i); // used to renumber ordered lists
});
return this;
},
I want to be able to on page load insert all items without animation. Then any subsequent additions, i want to animate them in. This does not seem possible at the moment. The issue is that animating in many objects on page load is very slow in Internet Explorer. I'd like to insert the first batch without animation.
It seems that you can only append content and have it animate into the layout. Can we have an option to prepend so items come in animated from the top?
For right-to-left languages like Hebrew, Arabic. Currently Isotope only supports left-to-right layouts.
is there any way that an element in the container to be visible no matter which filter is active without using all the filter keywords?
After calling the isotope 'destroy' method, the container is not restored to its prior state/styling; in particular it get 'height:auto; width:auto' in its element.style, which may clobber other desired CSS.
Example: http://jsfiddle.net/bqK23/8/
On initial run, isotope hasn't been applied; the container has the desired size. Applying isotope by clicking the 'isotope-init' link leaves the container the desired size (and adds overflow-hidden, which is fine). But then clicking the 'destroy' link to remove isotope leaves the container differently-sized, automatically based on its contents, clobbering the desired specified sizing.
hello, I am facesing a very odd problem with isotope and the mansonry layout, as you can see in this link: http://jsfiddle.net/dimios/28TCQ/1/
I used to use mansonry script where everhing was simple, there was no need to set the height of the elements inside the container, only the width. With isotope when I have the same width and height for all the elements everything works fine. But now I want the elements to share only the same width and the height to be free and maybe uniq for every element. I can find what I am doing so wrong and I have these problem, as you can see the the thrid elements is inside the second element, in this case not even the filter work for some elements.
Please any help to understand from anyone will be rellly apriciated.
cheers
Does this function really need to be in the jQuery object ?
hello, i am using this
$container.isotope({
itemSelector: '.element',
masonry : {
columnWidth : 260
},
filter: '.menu, .about'
});
Currently, as far as I've been able to figure out, there is no good way to do the above. Another value next to the original-order in isotope-sort-data would be convenient, or even a way to loop through the nodes in order.
Hi,
Using css-transform: translate renders YouTube videos black/blank in all but beta/dev Chrome 11, as far as I can tell: http://jsfiddle.net/oskarrough/4vRzd/4/
Is there any way of hacking through this in order to keep the positioning and the video?
Also look over helpful links in additional resources.
The following issues feature folks who didn't read the issues agreement.
It would be great to be able to sort data by multiple sets of data, for example:
$('#container').isotope({
sortBy : { {'rating', 'ASC'}, {'time', 'DESC'} },
//Sets default sort direction if nothing is set specifically
sortAscending : false
});
As for a live example, the page here shows the scenario. Data is sorted by rating and then by time. When a user is logged in and an item is added, it should go after rated items, but earliest in the time sorting.
I'm seeing some odd gaps in a tiled layout using the masonry layoutMode. I'm not sure if this is a bug (my guess is that it's not, in which case this is more of a feature request), but it does look very strange.
What I've got is a fixed number of columns. When you click on one tile, it expands to the width of 4 tiles and height of 2. When you click on tiles in particular columns, there isn't enough room in the row to accommodate the expanded tile. So it's deposited in the next row with the result that there are 1 or more empty spots in the previous row.
At http://jsfiddle.net/fwonkas/Ag5XX/7/ , click on letters like C, D, H, I, M, N, etc. to see the gaps.
If this is intended behavior, is there a layout mode that will take both vertical and horizontal gaps in mind when flowing the layout?
Is there built-in way to use horizontal layouts without setting container height?
If columnWidth is specified then number of columns can be calculated with which items can evenly fill each column. When an item changes height, it should expand in-place, pushing items below it down, without redistributing items across columns.
I tried masonry layout but when an item changes height, items got redistributed across columns confusingly.
If you dig through the source, you'll find hooks that that each of the layout modes utilize. These methods are (with foo
being the name of the layout mode):
_fooReset
_fooLayout
_fooGetContainerSize
_fooResize
Documentation for developing your own custom layout mode should be added.
There are also several helper methods that should be discussed:
_getSegments
_pushPosition
From Pull Request 21 by kirbysayshi:
isotope overwrote my manual setting of -moz-transform: rotate(10deg) ...
It might be nice to separate these hooks from isotope. Adding them to the global jQuery object without telling people is slightly dangerous. One solution is to use jQuery.sub() internally.
So this issue has two parts:
Currently, there's no method update the sorting data on an item element after the plugin is initialized.
Let's say that a parameter is updated via AJAX or jQuery, there needs to be a way to make that change in the sorting data so that Isotope can sort with the new data.
I am playing around with the masonry layout on my personal website http://www.vinzenzweber.com/dev and would simply like to align the columns in the center of the page. Is this some simple CSS issue I can't figure out or do I really have to do some javascript work to get that done?
Thanks for your help!
When filtering / sorting, the transitions are not working in Chrome or Safari unless the following CSS is included somewhere:
.isotope-item { -webkit-transition-duration:0.8s;}
Thought this might save someone some troubleshooting time.
Setting the animationEngine
option after the initialization does not update any of the corresponding logic.
See also this comment from @sroucheray
Please reply if you'd like to see this issue resolved.
You can see what's going on at these two pages:
http://www.marktauriello.com/portfolio
http://www.marktauriello.com/winter2084
(BTW, I'll totally purchase a license for this, I just want to make sure that I can actually use the plugin to get the desired results first.)
So, I borrowed the script from the flexible layout example you posted a while back, and have been trying all types of configurations to get it to work with both filtering and the imagesLoaded plugin.
Right now I've left everything at it's most functional state.
A rundown of the problems I've encountered:
Am I overdoing it with what I'm trying to get Isotope to do?
Why don't you use a global closure for all your code ? This getStyleProperty function goes to the global scope and it's not really a good thing. I assume you don't use it anywhere but in the current file. Tell me if I'm wrong :)
Currently, the callback is executed after the script runs, but before transitions or animations have been completed. Ideally, the callback would be triggered after the transition and the animation have completed.
After removing items from a container/DOM with the isotope 'remove' method, they still have isotope-styling, such as class 'isotope-item' and element.style absolute-positioning. This makes it a tad harder to reinsert them elsewhere. Easy enough to clean up manually, but it'd be nice if 'remove' either undid all isotope-styling, or if an item-specific analogue of 'destroy' was available.
Resizable is only read once when the initial window resize event is binded. I would like to send {resizable:false} to isotope at a later time to temporarily disable the resize event and then send {resizable:true} to isotope to re-enable the resize.
In the Elements Complete demo, click on the Sort > category (asc), and then click it again. Isotope erroneously re-orders the item elements, even though their data matches and nothing has really changed.
To make things like timed callbacks easier, an event would be great. Then clients can bind their callbacks to the Isotope event event as opposed to smartresize
$('#container').bind('isotopeReLayout', function(){
// hot shiz here...
});
When filtering, sometimes IE8 does not apply zero opacity to certain content within item elements, typically Flash embeds or components like Cyclers that have their own opacity applied.
First of all – I'm pretty sure this is not an isotope bug, but a Safari issue.
I'm interested if anyone can reproduce this and if this is a known issue (I googled a lot, actually – but came up with nothing); I figured posting it here is better than not posting it at all.
Over the weekend I finally had some time to fiddle around with isotope and ran into some strange Safari-issue where once the isotope-items have been "relayouted", scrolling the viewport causes weird distortions of the elements.
To reproduce:
Edit: just did another test and found out that
position: fixed
appliedThis all happens for Safari 5.0.5 (5533.21.1), Mac OS X 10.5.8 – but not in Chrome or Firefox 4 (and of course not in IE).
Setting transformsEnabled
to false
(as described here: http://isotope.metafizzy.co/docs/options.html#transformsenabled) fixes the problem in my local project.
When an item's height (and perhaps width) is set as a percentage of the relevant container, the initial isotope-layout doesn't seem to take into account its actual display height. Interestingly, isotope eventually catches up after forcing several window resizes.
See for example:
(This is derived from the 'highlighting first item' blog example with just 3 changes: (1) layoutMode is straightDown; (2) new .proportionate class sets a 20% height; (3) the second element listed is given the proportionate class.)
Not that the initial layout has items overlapping as if the second item has little if any of its true height. But, if you resize the window, the layout almost fixes... and another resize or two causes it to catch up completely. (This is the case even if the resize is horizontal, and doesn't affect the actual 20% height.)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.