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:

  1. Each part should have a slider to resize its width
  2. One should be able to display two parts at a time or complete one part at a time
  3. 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 Demo Site 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.

So following are the steps to how to use this plugin especially in my scenario:

  1. First include this plugin in your html file 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.

  2. 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>
          <div id='second_left_pane'>
            <!-- your middle content goes here --->
          </div> 
        </div>
        <div id='right_pane'>
          <!-- your right content goes here --->
        </div>
      </div>
    
  3. In script tag, 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.

  4. Optionally, if you 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%;
      }
    

Following is the screenshot of what it appears after following above steps successfully:

Three Panes Vertically

Three Panes Vertically

Advertisements

About budhramgurung

I am a self-motivated experienced Software Engineer with good communication and interpersonal skills and has the ability to work independently, can lead, motivate and influence others and can train and mentor others. Has hands-on experience in RoR since Jan, 2012. I am an open source contributor and holds a Master's Degree in Computer Science and experience working as a Software Engineer since August, 2011.

Posted on April 27, 2014, in javascript, jQuery and tagged , . Bookmark the permalink. 1 Comment.

  1. Also in your div structure additional <div> is required. (please, remove my previous comment, where html tag was eaten by comments engine).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: