wijmo splitter

by Manu Vashishtha

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.2.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.2.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.2.min.js"></script>
<div id ="container">
    <div id="vsplitter">
       <div>
           
            <div id="hsplitter">
            <div>
                Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...
            </div>
            <div>
                <img src="http://wijmo.com/wp-content/themes/wijmov2/img/wijmo_footer_tooltip.png">
    Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle?
            </div>
        </div>
           
           
       </div>
       <div>Panel2</div>     
    </div>
</div>

CSS

#container{position:absolute;top:50px;left:0px;bottom:0px;right:0px; background-color:red}
 #vsplitter
        {
            height: 100%;
            width: 100%;
        }
#hsplitter
        {
           width: 100%;
        }

JavaScript

$("#vsplitter").wijsplitter({ 
    panel1: {minSize: 50},
          orientation: "vertical", 
          fullSplit: false, 
          // The following refresh functions ensure that after resizing 
          // the vertical splitter, each of the horizontal panels shows its 
          // contents correctly. This prevents repainting issues.
          expanded: function (e) {$("#hsplitter").wijsplitter("refresh");}, 
          collapsed: function (e) {    $("#hsplitter").wijsplitter("refresh");}, 
          sized: function (e) {$("#hsplitter").wijsplitter("refresh");} 
  
  });
  $("#hsplitter").wijsplitter({ orientation: "horizontal" });