Skip to content

Instantly share code, notes, and snippets.

@nicanaca0

nicanaca0/isotope-chrome-test.html

Created October 13, 2016 09:54
Show Gist options
  • Save nicanaca0/be86e4f6670d8447f7581d0f01313733 to your computer and use it in GitHub Desktop.
Save nicanaca0/be86e4f6670d8447f7581d0f01313733 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
isotope-chrome-test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Isotope Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0/dist/isotope.pkgd.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="grid col-md-6"><div class="content"><span class="index">1</span></div></div>
<div class="grid col-md-3 small"><div class="content"><span class="index">2</span></div></div>
<div class="grid col-md-3 tall"><div class="content"><span class="index">3</span></div></div>
<div class="grid col-md-3 small"><div class="content"><span class="index">4</span></div></div>
<div class="grid col-md-3 small"><div class="content"><span class="index">5</span></div></div>
<div class="grid col-md-3 tall"><div class="content"><span class="index">6</span></div></div>
<div class="grid col-md-6"><div class="content"><span class="index">7</span></div></div>
<div class="grid col-md-3 small"><div class="content"><span class="index">8</span></div></div>
<div class="grid col-md-3 small"><div class="content"><span class="index">9</span></div></div>
<!-- Secord row is ordered incorrectly on Chrome (mobile/table Chrome works fine though) -->
<!-- Should be ... -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- 5 --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
---------- <!-- 6 --> <!-- 7 -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- 8 --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- Ends up being ... -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- 5 -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- 6 --> <!-- 7 --> ----------
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- 8 -->
<!-- --> <!-- --> <!-- -->
<!-- --> <!-- --> <!-- -->
</div>
</div>
<script type="text/javascript">
(function ($) {
$('span.index').css('colour', 'black');
$('span.index').css('font-size', '2em');
$('span.index').css('margin', '20px');
$('.grid .content').css('background', 'red');
$('.grid').css('padding', '0');
$('.grid .content').css('margin', '10px');
$('.grid.col-md-6 .content').outerHeight($('.grid.col-md-6').width() - 20);
$('.grid.col-md-3.tall .content').outerHeight($('.grid.col-md-3.tall').width() * 2 - 20);
$('.grid.col-md-3.small .content').outerHeight($('.grid.col-md-3.small').width() - 20);
var target = '.container .row';
var options = {
itemSelector: '.grid',
percentPosition: true,
masonry: {
columnWidth: '.grid.col-md-3.small',
}
};
var $grid;
var active = false;
function check_isotope() {
if ($(window).width() >= 992) {
if (!active) {
console.log('starting iso');
$grid = $(target).isotope(options);
active = !active;
} else {
console.log('already started');
}
} else {
if (active) {
console.log('too small, destroying iso');
$grid.isotope('destroy');
active = !active;
} else {
console.log('too small but no iso');
}
}
}
check_isotope();
$(window).resize(check_isotope);
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment