I'm using isotope at http://www.gablabelle.com but I can't figure out what's wrong after reviewing my script file or maybe it's a bug?
When resizing the window the layout is not good. But if I make a relayout using the top right button, the layout gets in order. What's wrong?
Please take a look at this video: http://www.visualise.ca/files/videos/isotope02.mov
jQuery
$(window).smartresize(function(){
var $windowSize = $(window).width();
if ($windowSize > 1199) {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 300,
gutterWidth: 30
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 30);
}, 500);
}
});
});
} else if ($windowSize < 1200 && $windowSize > 979) {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 240,
gutterWidth: 20
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 20);
}, 500);
}
});
});
} else if ($windowSize < 768) {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
resizable: false,
masonry: {
columnWidth: $windowSize / 2,
gutterWidth: 1
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 30);
}, 500);
}
});
});
} else {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 186,
gutterWidth: 20
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 20);
}, 500);
}
});
});
};
}).smartresize();
CSS
@media (max-width: 767px) {
article.post {
margin: 0 0 1px;
}
article.small img,
article.articles img,
article.long img,
article.tall img ,
article.big img {
width: 100%;
border-left: solid 1px #161616;
border-right: solid 1px #161616;
}
article.small,
article.articles,
article.long,
article.tall,
article.big {
width: 50%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
article.post {
margin: 0 0 20px 20px;
}
article.small,
article.small img,
article.articles,
article.articles img {
width: 166px;
height: 166px;
}
article.long,
article.long img {
width: 352px;
height: 166px;
}
article.tall,
article.tall img {
width: 166px;
height: 352px;
}
article.big,
article.big img {
width: 352px;
height: 352px;
}
}
@media (min-width: 980px) and (max-width: 1199px) {
article.post {
margin: 0 0 20px 20px;
}
article.small,
article.small img,
article.articles,
article.articles img {
width: 220px;
height: 220px;
}
article.long,
article.long img {
width: 460px;
height: 220px;
}
article.tall,
article.tall img {
width: 220px;
height: 460px;
}
article.big,
article.big img {
width: 460px;
height: 460px;
}
}
@media (min-width: 1200px) {
article.post {
margin: 0 0 30px 30px;
}
article.small,
article.small img,
article.articles,
article.articles img {
width: 270px;
height: 270px;
}
article.long,
article.long img {
width: 570px;
height: 270px;
}
article.tall,
article.tall img {
width: 270px;
height: 570px;
}
article.big,
article.big img {
width: 570px;
height: 570px;
}
}
/**** Start: Recommended Isotope styles ****/
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
-webkit-transition-delay: 0s, 0.8s, 0s;
-moz-transition-delay: 0s, 0.8s, 0s;
-ms-transition-delay: 0s, 0.8s, 0s;
-o-transition-delay: 0s, 0.8s, 0s;
transition-delay: 0s, 0.8s, 0s;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
help wanted test case provided :)
17 Sep 24, 2022
80.1k Dec 31, 2022
89 Dec 20, 2022
9 Dec 26, 2022
6 Nov 17, 2022
7.5k Dec 22, 2022
20 Oct 30, 2022
172 Dec 8, 2022
9 Jan 14, 2022
1.9k Dec 27, 2022
51 Dec 31, 2022
6 Oct 11, 2022
10.9k Jan 1, 2023
6 Oct 19, 2022
16 Oct 27, 2022
5 Feb 16, 2022
4 Mar 20, 2022
1 Jan 20, 2022
3 Feb 2, 2022