Blog Archives

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.