JQuery isotope display issue with multiple views -
i writing web app using jquery isotope , seeing strange display behavior can't quite figure out. gist of app downloads data web service , displays user in 1 of 2 modes, tile based mode , table based mode. code puts data separate divs, calls isotope() on each one, hides or shows them based on buttons user clicks.
the problem comes when resize page. if that, view not showing apparently gets messed up. can see example i've distilled down in jsfiddle here:
steps reproduce:
- go jsfiddle page
- click "table mode" @ top right. should see tiles replaced table.
- move jsfilddle pane displaying rendered output or resize browser.
- click "tile mode" @ top right. should see tiles appear again stacked on top of each other instead of in left-to-right flow.
- resize jsfiddle or browser again. tiles move proper position.
- click "table mode" again. see rows of table short , not row displays.
- resize browser , correct themselves.
in reality using backbone underscore templates handle of html generation in jsfiddle example it's hardcoded html.
can not have multiple instances of isotope running @ same time?
here code:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> .isotope, .isotope .isotope-item { /* change duration value whatever */ -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>
try calling relayout (demo fiddle):
$(".btntileview").click(function () { $(".tilecontent").show(); $(".tablewrapper").hide(); $(".tilecontent").isotope( 'relayout' ); }); $(".btntableview").click(function () { $(".tablewrapper").show(); $(".tilecontent").hide(); $(".tablecontent").isotope( 'relayout' ); }); update:
i playing bit more , realized don't have size on container.
if want avoid of visual layout (single column multiple) try this:
you'll still want relayout but, in cases no position changes needed. 1 way visualize happening add borders of containing elements , watch how resize adjust window size.
css changes:
div.content { margin-left: 180px; min-height: 500px; position: relative; } .tilecontent, .tablewrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Comments
Post a Comment