Gridster demo

by Dan Shahin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" href="http://gridster.net/demos/assets/demo.css">
<div class="gridster ready">
    <ul style="height: 390px; width: 660px; position: relative;">
      <li data-row="2" data-col="1" data-sizex="2" data-sizey="2" class="gs-w">0<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="2" data-col="3" data-sizex="4" data-sizey="2" class="gs-w" style="position: absolute; min-width: 100px; min-height: 55px;">1<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="gs-w" style="position: absolute;">2<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="1" data-col="3" data-sizex="3" data-sizey="1" class="gs-w" style="position: absolute;">3<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class="gs-w">4<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs-w player-revert" style="position: absolute;">5<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="4" data-col="2" data-sizex="1" data-sizey="1" class="gs-w">6<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="5" data-col="2" data-sizex="1" data-sizey="1" class="gs-w">7<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="1" data-col="2" data-sizex="1" data-sizey="1" class="gs-w" style="position: absolute;">8<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li data-row="4" data-col="5" data-sizex="1" data-sizey="3" class="gs-w">9<span class="gs-resize-handle gs-resize-handle-both"></span></li>
 ...

CSS

[data-col="14"] { left:1435px; }
 [data-col="13"] { left:1325px; }
 [data-col="12"] { left:1215px; }
 [data-col="11"] { left:1105px; }
 [data-col="10"] { left:995px; }
 [data-col="9"] { left:885px; }
 [data-col="8"] { left:775px; }
 [data-col="7"] { left:665px; }
 [data-col="6"] { left:555px; }
 [data-col="5"] { left:445px; }
 [data-col="4"] { left:335px; }
 [data-col="3"] { left:225px; }
 [data-col="2"] { left:115px; }
 [data-col="1"] { left:5px; }
 [data-row="29"] { top:1825px; }
 [data-row="28"] { top:1760px; }
 [data-row="27"] { top:1695px; }
 [data-row="26"] { top:1630px; }
 [data-row="25"] { top:1565px; }
 [data-row="24"] { top:1500px; }
 [data-row="23"] { top:1435px; }
 [data-row="22"] { top:1370px; }
 [data-row="21"] { top:1305px; }
 [data-row="20"] { top:1240px; }
 [data-row="19"] { top:1175px; }
 [data-row="18"] { top:1110px; }
 [data-row="17"] { top:1045px; }
 [data-row="16"] { top:980px; }
 [data-row="15"] { top:915px; }
 [data-row="14"] { top:850px; }
 [data-row="13"] { top:785px; }
 [data-row="12"] { top:720px; }
 [data-row="11"] { top:655px; }
 [data-row="10"] { top:590px; }
 [data-row="9"] { top:525px; }
 [data-row="8"] { top:460px; }
 [data-row="7"] { top:395px; }
 [data-row="6"] { top:330px; }
 [data-row="5"] { top:265px; }
 [data-row="4"] { top:200px; }
 [data-row="3"] { top:135px; }
 [data-row="2"] { top:70px; }
 [data-row="1"] { top:5px; }
 [data-sizey="1"] { height:55px; }
 [data-sizey="2"] { height:120px; }
 [data-sizey="3"] { height:185px; }
 [data-sizey="4"] { height:250px; }
 [data-sizey="5"] { height:315px; }
 [data-sizey="6"] { height:380px; }
 [data-sizey="7"] { height:445px; }
 [data-sizey="8"] { height:510px; }
 [data-sizey="9"] { height:575px; }
 [data-sizey="10"] { height:640px; }
 [data-sizey="11"] { height:705px; }
 [data-sizey="12"] { height:770px; }
 [data-sizey="13"] { height:835px; }
 [data-sizey="14"] { height:900px; }
 [data-sizey="15"] { height:965px; }
 [data-sizey="16"] { height:1030px; }
 [data-sizey="17"] {...

JavaScript

var log = document.getElementById('log');
        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          autogrow_cols: true,
          resize: {
            enabled: true
          }
        }).data('gridster');