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

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 28, 2014, in javascript, jQuery and tagged , , , . Bookmark the permalink. Leave a comment.

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: