Monthly Archives: April 2014

Shrinking issue in jQuery Splitter on screen resize

After using jQuery splitter, everything was working as according to my requirement.
But as you never get your destination smoothly I also got stuck by one issue.

The issue was when I minimize the screen the three vertical panes doesn’t resize as proportion to their width ratio as shown below:

Right Pane shrinked

Right Pane shrinked

It looks like limitation of the jQuery Splitter plugin. Same issue found in Demo Site.

To solve this issue, I need to do following workaround.
This really helped me to meet my requirement properly.

   <script type="text/javascript">
      function resizeClassView(){
        var main_div_width, left_pane_width, right_pane_width,
            first_left_pane_width, second_left_pane_width, left_splitter, right_splitter;

        main_div_width = $(window).width() - 72;
        left_pane_width = (0.67 * main_div_width);
        right_pane_width = main_div_width - left_pane_width;
        first_left_pane_width = (0.5 * left_pane_width);
        second_left_pane_width = (left_pane_width - first_left_pane_width);
        left_splitter = $($('.vsplitter')[0]);
        right_splitter = $($('.vsplitter')[1]);
        $('#main_div').width(main_div_width + 'px');
        $('#left_pane').width(left_pane_width - 2 + 'px');
        $('#first_left_pane').width(first_left_pane_width - 5 + 'px');
        $('#second_left_pane').width(second_left_pane_width + 'px');
        $('#right_pane').width(right_pane_width + 'px');
        left_splitter.css('left', first_left_pane_width - 7 + 'px');
        right_splitter.css('left', left_pane_width - 5 + 'px');
      }

      $(document).ready(function(){
        var main_div_width = '100%';
        $('#main_div').width(main_div_width).height(500).split({
          orientation: 'vertical',
          limit: 3,
          position: '67%'
        });
        $('#left_pane').width($('#left_pane').width()).height(500).split({
          orientation: 'vertical',
          limit: 3,
          position: '50%'
        });

        // handling widow resize event
        $(window).resize(function() {
          resizeClassView();
        });
      });

   </script>

I handled window resize event and calculated and applied each div’s width and slider left attribute.

Advertisements

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