jquery-isotope

Isotope not working with imagesLoaded?

爱⌒轻易说出口 提交于 2019-12-01 16:24:13
问题 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 (locally): $(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.itemwrap', layoutMode: 'horizontal', horizontal: { verticalAlignment: 0.5 } }); }); As the images take time to load, they tend to mess up the Isotope layout, so I'm trying to

Use Isotope with objects loaded in with XML and jQuery. Is this possible?

断了今生、忘了曾经 提交于 2019-12-01 13:07:41
I have objects I am loading in with XML and jQuery and trying to hook on to Isotope, but is seems it's a no go. Is this possible? I've tried many different solutions but can't seem to find one that works. This is what I have. I've tried a callback function in isotope, but still no luck.. I am calling in my class with the XML and the result is this in firebug: item yellow, item red , item blue , etc. var $container = $('#container'); var $checkboxes = $('#filters a'); $container.isotope({ itemSelector: '.item', transformsEnabled: false, animationOptions: { duration: 4000, easing: 'easeInOutQuad

How to make sure there is no empty gaps with divs and isotope

一笑奈何 提交于 2019-12-01 12:07:26
问题 I'm trying to create a grid layout at http://www.gablabelle.com/. I have multiple divs floating with isotope and I wonder why there is some empty spaces and why the floating divs are not filling the gaps. Same problem as here: How to avoid gaps using Isotope with Masonry layout Many thanks for your time and help. 回答1: If your items are in a certain order which you don't want to "destroy" by calling the shuffle method, this will be inevitable. Then, even when shuffling, you can't guarantee the

CSS: Set divs horizontally in 2 rows

折月煮酒 提交于 2019-12-01 09:23:55
Lets say I have <div class="cont"> <div class="single">1</div> <div class="single">2</div> <div class="single">3</div> <div class="single">4</div> <div class="single">5</div> <div class="single">6</div> <div class="single">7</div> </div> What I want to have is to plase the .single divs in 2 rows like bricks horizontaly from left to right this simple way: 1st div will be in left top corner, 2nd will be placed below 1st, 3rd will be placed next to 1st, 4th will be placed below 3rd and so on like: 1 3 5 7 9 2 4 6 8 All the divs has the same size. I've tried with masonry.js and its working like a

css nth-child(2n+1) repaint css after filtering out list items

自作多情 提交于 2019-12-01 09:03:30
I have a list of 20+ items. The background-color changes using the :nth-child(2n+1) selector. (ie. even item black, odd item white). When I click a button to filter out specific items using the jQuery Isotope plugin it adds a .isotope-hidden class to the items I want to filter out, which changes the position of the list item to 0,0 and opacity to 0. When this happens the remaining items are left with the original black/white background-colors, which are now no longer in order. Does anyone know a way to "repaint' the css using the :nth-child(2n+1) selector on the items that do not contain the

css nth-child(2n+1) repaint css after filtering out list items

青春壹個敷衍的年華 提交于 2019-12-01 05:43:42
问题 I have a list of 20+ items. The background-color changes using the :nth-child(2n+1) selector. (ie. even item black, odd item white). When I click a button to filter out specific items using the jQuery Isotope plugin it adds a .isotope-hidden class to the items I want to filter out, which changes the position of the list item to 0,0 and opacity to 0. When this happens the remaining items are left with the original black/white background-colors, which are now no longer in order. Does anyone

jQuery isotope on first load doesn't work, How do I wait for all resources/images to be loaded?

◇◆丶佛笑我妖孽 提交于 2019-12-01 03:25:21
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 of the wrapper element to 0. If I refresh the page it does work and sets the height of the parent element based on the the items found inside. Any help would be greatly appreciated. I can't think why off this first load this isn't working and on subsequent reloads it is.. unless its perhaps something to do with caching the images it loads? EDIT-- This is a caching issue in Webkit browsers as it

jQuery Isotope Filter from Different Page Wordpress

自闭症网瘾萝莉.ら 提交于 2019-12-01 01:37:44
I'm trying to filter from an entirely different page, to where my Isotope is. Currently, I am calling isotope sucessfully with: $(function() { // cache container var $container = $('.isotope-container'); var $defaultfilter = $('.feature-this'); $('.isotope-container').isotope({ filter: '.feature-this', masonry: { columnWidth: 326, resizesContainer: false } }); // filter items when filter link is clicked $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); // set selected menu items var $optionSets = $('.option

jQuery isotope on first load doesn't work, How do I wait for all resources/images to be loaded?

Deadly 提交于 2019-12-01 01:05:34
问题 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 of the wrapper element to 0. If I refresh the page it does work and sets the height of the parent element based on the the items found inside. Any help would be greatly appreciated. I can't think why off this first load this isn't working and on subsequent reloads it is.. unless its perhaps

jQuery Isotope filter to no items?

荒凉一梦 提交于 2019-11-30 22:51:17
I'm using isotope to filter a list with multiple filters where it is possible that based on a combination of certain filters no items will be displayed. In this case I want to display a message to the user that based on their filter parameters, no results exist. How would I go about that and does isotope have something built in to handle this? Here is a jsfiddle example. should be displayed if no items match filter set... http://jsfiddle.net/cssguru/e4vA3/ $(function(){ var $container = $('#container'), $checkboxes = $('#filters input'); $container.isotope({ itemSelector: '.item' });