I have a dynamic layout with this structure. With this structure I need to slide Items over in groups left or right. The ztsWorkSpaceBar would be the container element I want to slide over. ztsWorkSpaceBarCenter is the main container where these all reside. Problem is there could be one or 100 ztsWorkSpaceBars as I said its dynamic as such my code should reflect that. Ive tried a few things most of which yield no effect, or the wrong effect…
<div id="ztsWorkspaceBarCenter">
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="0" class="ztsWorkSpaceItem">0</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="1" class="ztsWorkSpaceItem">1</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="2" class="ztsWorkSpaceItem">2</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="3" class="ztsWorkSpaceItem">3</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="4" class="ztsWorkSpaceItem">4</div>
</div>
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="5" class="ztsWorkSpaceItem">5</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="6" class="ztsWorkSpaceItem">6</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="7" class="ztsWorkSpaceItem">7</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="8" class="ztsWorkSpaceItem">8</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="9" class="ztsWorkSpaceItem">9</div>
</div>
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="10" class="ztsWorkSpaceItem">10</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="11" class="ztsWorkSpaceItem">11</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="12" class="ztsWorkSpaceItem">12</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="13" class="ztsWorkSpaceItem">13</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="14" class="ztsWorkSpaceItem">14</div>
</div>
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="15" class="ztsWorkSpaceItem">15</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="16" class="ztsWorkSpaceItem">16</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="17" class="ztsWorkSpaceItem">17</div>
</div>
</div>
At the time of writing this my last attempt was with margin +/- but I tried left, width, etc.. nothing seems to work right. I just want the whole container to slide left or right fluently seamlessly or however you want to word that. Where the next container will come follow it in, its kind of like a slider effect.
$('#ztsWorkspaceBarLeft').click(function(){console.log('left');$('#ztsWorkspaceBarCenter').find('.ztsWorkSpaceBar').filter(':visible:first').animate({margin: -580+'px'}, 900);});
$('#ztsWorkspaceBarRight').click(function(){console.log('right');$('#ztsWorkspaceBarCenter').find('.ztsWorkSpaceBar').filter(':hidden:last').animate({margin: 580+'px'}, 900);});
It seems like the JQuery UI Sortable Grid may be what you’re looking for. You may need to convert your divs into ul and li elements but with some css styling you can make them appear identical across all browsers. http://jqueryui.com/demos/sortable/#display-grid