JQuery isotope display issue with multiple views
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:
http://jsfiddle.net/jQ3v3/
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.
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>
No comments:
Post a Comment