I am writing a web app using jquery isotope and I am seeing some strange display behavior that I can't quite figure out. The gist of the app is that it downloads some data from a web service and displays it to the user in one of two modes, a tile based mode and a table based mode. The code puts the data into separate divs, calls isotope() on each one, then hides or shows them based on some buttons that the user clicks.
The problem comes when you resize the page. If you do that, the view that is not currently showing apparently gets messed up. You can see an example that I've distilled down in jsfiddle here:
Steps to reproduce:
- Go to the jsfiddle page
- Click "Table mode" at the top right. You should see the tiles be replaced by a table.
- Move the jsfilddle pane displaying the rendered output or just resize your browser.
- Click "Tile mode" at the top right. You should see the tiles appear again but they will be all stacked on top of each other instead of in a left-to-right flow.
- Resize the jsfiddle or browser again. The tiles will move into their proper position.
- Click "Table mode" again. You will see that the rows of the table are too short and not all the row displays.
- Resize the browser and they will correct themselves.
In reality I am using backbone with underscore templates to handle much of the html generation but in the jsfiddle example it's just hardcoded html.
Can you just not have multiple instances of isotope running at the same time?
Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.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: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** 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;
}
</style>
<style>
div.controls {
height: 150px;
margin-top: 20px;
}
div.content {
margin-left: 180px;
min-height: 500px;
}
div.tile {
width: 175px;
margin: 0px 10px 10px 0px;
height: 100px;
background-color: gray;
position: relative;
padding: 10px;
}
.headerRow {
display: inline-block;
background-color: #f3f3f3;
border-bottom: solid orange 1px;
font-size: 12pt;
padding: 8px;
}
.tableRow {
font-size: 12pt;
background-color: white;
padding: 10px;
border-bottom: solid #cfcfcf 1px;
cursor: pointer;
}
.headerCol, .dataCol {
display: inline-block;
cursor: pointer;
}
.titleCol {
width: 250px;
}
.dateCol {
width: 150px;
}
.btnTileView, .btnTableView {
float: right;
cursor: pointer;
text-decoration: underline;
margin-right: 20px;
}
</style>
</head>
<body>
<div>
<div class="controls">
<span class="btnTableView">Table mode</span>
<span class="btnTileView">Tile mode</span>
</div>
<div class="content">
<div class="tileContent">
<div class="tile">
item 1
</div>
<div class="tile">
item 2
</div>
<div class="tile">
item 3
</div>
<div class="tile">
item 4
</div>
<div class="tile">
item 5
</div>
<div class="tile">
item 6
</div>
<div class="tile">
item 7
</div>
<div class="tile">
item 8
</div>
<div class="tile">
item 9
</div>
<div class="tile">
item 10
</div>
</div>
<div class="tableWrapper">
<div class="headerRow">
<div id="tableTitleHeader" class="headerCol titleCol"><span>Title</span></div>
<div id="tableDateHeader" class="headerCol dateCol"><span>Uploaded</span></div>
</div>
<div class="tableContent">
<div class="tableRow">
<span class="dataCol titleCol">item 1</span>
<span class="dataCol dateCol">8/1/2013</span>
<div class="tableRow">
<span class="dataCol titleCol">item 2</span>
<span class="dataCol dateCol">8/2/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 3</span>
<span class="dataCol dateCol">8/3/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 4</span>
<span class="dataCol dateCol">8/4/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 5</span>
<span class="dataCol dateCol">8/5/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 6</span>
<span class="dataCol dateCol">8/6/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 7</span>
<span class="dataCol dateCol">8/7/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 8</span>
<span class="dataCol dateCol">8/8/2013</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script>
$(document).ready(function() {
$(".tileContent").isotope({
itemSelector : ".tile",
layoutMode : "fitRows",
animationEngine: "best-available",
animationOptions: {
duration: 500,
easing: "linear",
queue: false
}
});
$(".tableContent").isotope({
itemSelector : ".tableRow",
layoutMode : "straightDown",
animationEngine: "best-available",
animationOptions: {
duration: 500,
easing: "linear",
queue: false
}
});
$(".tileContent").show();
$(".tableWrapper").hide();
$(".btnTileView").click(function() {
$(".tileContent").show();
$(".tableWrapper").hide();
});
$(".btnTableView").click(function() {
$(".tableWrapper").show();
$(".tileContent").hide();
});
});
</script>
</div>
</body>
</html>
