Split div into three equal parts vertically


There has been a requirement in my project where I have to split a particular div into three equal parts vertically. It must possess following properties:

  • Each part should have a slider to resize its width
  • One should be able to display two parts at a time or complete one part at a time
  • The content within resizing part should also resize as according to slider movement

I googled for the possible available plugins. Out of many I found jQuery splitter plugin interesting and decided to go with it.

The Plugin Demo demonstrates partially what I need but I know I need to do some tweak by myself to make this plugin work exactly what I want.

Following are steps I followed to achieve my goal:

  • Setup plugin as :
    <script type='text/javascript' src='../lib/js/jquery-1.9.0.min.js'></script>
    <script type='text/javascript' src='../lib/js/jquery.splitter-0.14.0.js' /></script>
    <link rel='stylesheet' type='text/css' href='../lib/css/jquery.splitter.css'/>
    

    NOTE: jQuery should be loaded first as jQuery splitter depends on jQuery.

You can get jquery.splitter-0.14.0.js(or latest version) and jquery.splitter.css in its git repo under js and css folders respectively.

  • In html body, create div’s structure as bellow :

    <div id="main_div">
      <div id="left_pane">
        <div id="first_left_pane">
          <!-- your left content goes here -->
        </div>
        <div id="second_left_pane">
          <!-- your middle content goes here -->
        </div> 
      </div>
      <div id="right_pane">
        <!-- your right content goes here -->
      </div>
    </div>
    
  • Call splitter method as:

    $('#main_div').width(800).height(500).split({
    orientation: 'vertical',
    limit: 3,
    position: '67%'
    });
    $('#left_pane').width($('#left_pane').width()).height(500).split({
    orientation: 'vertical',
    limit: 3,
    position: '50%'
    });
    

    Here, I am calling splitter method split 2nd time to split the left_pane div into two equal parts.

That’s it. Three simple steps and you get the div splitted into approximately three equal parts.

  • Optional: You may want to apply extra CSS to slider bar you can do as:
    .splitter_panel .vsplitter {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 6px !important;
      background-color: gray;
      cursor: ew-resize;
      line-height: 15px;
      font-size: 14px;
      overflow: hidden;
    }
    .splitter_panel .vsplitter:before {
      content: ' * * * ';
      color: white;
      position: absolute;
      top: 50%;
    }
    
Three Pane
Freelancer BRG

Thank you for reading the post. Click here to Go Back.

Share