I'm using Metafizzy's Isotope, and when I test it in IE 9, the elements goes in one column, instead of 4 per row.
It works in all other browsers, even IE8.
Here's the Isotope code I'm using:
var $container_gd = $('#gd .program-content').isotope({
itemSelector : '.student-gd',
layoutMode: 'fitRows',
getSortData: {
name: '[data-name]'
},
sortBy: 'name'
});
I also have filtering buttons, and those work fine, it's just the layout that's broken.
Here's the codepen: http://codepen.io/anon/pen/vtgwK
Any ideas how it could be fixed?
I posted the question at the Isotope GitHub repository, and I got my answer there. I had set a margin auto to the items that are being sorted, and IE9 counted the centering as part of the width of the item. Setting the margin to 0 fixed the issue.
Related
I have been attempting to create a Tumblr layout with 3 columns using Masonry and ImagesLoaded. However, I have issues with the photosets overlapping. I'm also using PXU Photoset.
Problem:
During the first seconds, the blog looks broken: http://s11.postimg.org/ry4fa614j/Overlapping.jpg
Then, it fixes into sorted columns: http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg
Also, the overlapping happens only with the photosets posts. Any other type of post (including those with only 1 image) work fine.
My Code:
So far, this is the code that works the best for me, but produces the problem I said before:
var $container = $('#threeCol');
$container.masonry({
itemSelector: ".post",
transitionDuration: 0
});
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '0px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'}, function () {
$container.imagesLoaded(function(){
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
},
function() {
$('#threeCol').masonry({
appendedContent: $(this)
});
});
}).resize();
$('.post img').imagesLoaded(function() {
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
}).resize();
});
});
});
In here, threeCol is my container and post is each individual post that I want to fit in the grid.
Also, I am not using InfiniteScroll.
Goal:
I would like for the content to load fast and not look broken on the first seconds of loading.
I have already tried:
Since I've been dealing with this problem for days, I have already attempted several things.
$(window).load(...);
This doesn't work at all with my current code. And when it works, it is extremely slow, and user-experience is bad.
Regarding other posts with solutions, I have tried a lot of them, including:
Masonry JS Overlapping Items
Tumblr Masonry with PXU Photoset Issue
Using masonry with imagesloaded
Masonry overlapping issue
Masonry Overlapping (Imbalance2 Bug)
And others on GitHub and links I can't find again.
Thanks for reading my question, and any help will be very welcome!
EDIT:
My question is different from several before, because my issues are photosets (which are groups of two or more images that go on the same post, therefore, are part of the same grid element) instead of individual images. I also do not know how many images are part of each photoset, and I do not know their sizes either.
Photosets are a type of post inside of Tumblr.
I am working on this site http://www.mtgmusic.no/
What i want there is to only show 25 posts and rearrange the whole post divs(.dcsns-li) by calling isotope again.
This is my code:
jQuery(window).load(function(){
var nPosts = jQuery(".dcsns-li").length;
console.log(nPosts);
var deletePost = nPosts - 25;
jQuery('body').find(".dcsns-li").slice(-nPosts,-deletePost).remove();
var $container = $('.stream');
$container.isotope({
// options
itemSelector: '.dcsns-li',
layoutMode: 'fitRows'
});
});
The problem with this code is i am getting an inconsistent alignment of those divs. Sometimes the divs are gathering on the left side, they are lining on the left(this occasionally happens, weird eh?)
I am also getting big gaps on those divs
Is there any way to fix this one or any work around?
Your help will be greatly appreciated!
Thanks! :)
to avoid gaps use masonry layout
$container.isotope({ layoutMode: 'masonry' });
see layout mode documentation
EDIT: The script is triggered and performing correctly when the window is being resized. Thanks a lot Сър Георги Демирев!
I've been pondering over a problem for a long while and I just can't seem to get a grip on it. On a photography portfolio site I use iDangero.us Swiper for a slideshow and JQuery Isotope for a thumbnail gallery.
Now, it works fine on Firefox and Chrome on Linux and Windows 7 alike.
However, on IE, Safari and Opera the grid items are showing in a vertical line, rather than a grid.
In order to locate the error I stripped the code from everything until I found out that Isotope stops this behaviour when I remove the Swiper part of the code.
The parent divs show to have 0 px height. Changing these to a fixed height (e.g. 1000px or 100%) doesn't change anything.
Here's the original site: http://anthron.octans.uberspace.de/meta.php
Here's a minimal example that still produces the error:
http://anthron.octans.uberspace.de/meta.debug.php
And the minimal source code: http://pastebin.com/H6t9bbNC
EDIT: Here's an implementation of Сър Георги Демирев's suggestion:
http://anthron.octans.uberspace.de/meta.debug.2.php
It works now, however the margin-right after the grid items are gone and return only after window resize. However one step further now.
I'm very grateful for any suggestion, I'm quite clueless about this one...
I had a similar problem recently and the fact that images are stacked one under another probably means that the script is not loading. However, if you resize the browser window a little bit, the script is triggered and images are places the way they should.
Wrap this code
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
in (document).ready function like this:
$(document).ready(function () {
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
});
I am trying to build a horizontal version of JQuery Masonry using JQuery Isotope. I want my result to look something like this:
Layout-modes (CLICK THE masonryHorizontal OPTION).
As per the sites instructions:
Masonry Horizontal
my script looks like:
$('#isotopecontainer').isotope({
itemSelector : '.item',
masonry : {
columnWidth : 270
}
});
However, 2 things are happening:
1) when the page loads the height of the #isotopecontainer div is set at 60px so you only see the tops of the .item divs.
2) if you resize the browser the #isotopecontainer div expands but the .item divs do not line up like the example.
Can anyone help point me in the right direction at all? My demo site is here.
Thanks.
You're demo site is working in Firefox.
Although, you're right, in Chrome it's not. The problem is fairly simple. You need to set width and height attributes on your images. Or else, Chrome load them as 0px height (which made container with default height of line-height value) until they get the file. Firefox isn't acting this way and waits for knowing the images size before creating the layout.
Hope this help!
You need to add layoutMode: 'masonryHorizontal' or else it won't work. Like this:
$('#isotopecontainer').isotope({
itemSelector : '.item',
layoutMode: 'masonryHorizontal',
masonry : {
columnWidth : 270
}
});
#isotophecontainer has overflow: hidden. Removing this shows all of the images for me in Chrome.
I am using Isotope for a home page menu layout.
This is my current layout: cellsByColumn and the settings for it follows:
cellsByColumn : {
columnWidth : 50,
rowHeight : 50
}
This works well, except for one problem. The sorting is top to bottom. Is there any way to make the sorting left to right?
Best regards,
Tony.