Using jQuery UI resizable() with Twitter Bootstrap 3 grid classes

Question

I would like to improve this vertical splitter : http://jsbin.com/xuyosi/1/edit?html,css,js,output.

use cases:

• As the site uses Bootstrap, when I use the splitter to expand Column-1, Column-2 comes under column-1 which I do not want, rather I want them to be near each other and the corresponding column width must increase.

• Only upon screen resize/ mobile view I want those columns stacked upon each other and at that time the splitter must not be usable.

Ultimately, the solution to this must be: Detect 2 columns are near each other - If so: Allow column resize and do not push the column down while resizing.

Thanks in advance!

Solution

In Bootstrap the width of .container class responds on the screen width, below a screen width of 768px it is fluid, but smaller than 720 pixels. You can use that characteristics to turn the resizable function on or of:

html

<div class="container">
 <div class="row">
     <div id="resizable" class="col-xs-12" style="background-color:green;">column 1</div>
     <div id="mirror" class="col-xs-12" style="background-color:red;">column 2</div>
 </div>      
</div> 

javascript

if($('.col-xs-12').width()>720 && $('.col-xs-12').width()==$('.container').width())
{
$( "#resizable" ).resizable({ maxWidth: $('.container').width()-200 });
$( "#resizable" ).on( "resize", 
function( event, ui ) {
    $('#mirror').css('width', $('.container').width() - $( "#resizable" ).width() );
    });
$('.col-xs-12').css('width','50%');
}

You probably also want that your columns adapt when the screen width changes:

    $( window ).resize(function() {  

      if($('.container').width()<=720){
      $('.col-xs-12').css('width','100%');
      $( "#resizable" ).resizable({ disabled: true });
      }
      else {
          $( "#resizable" ).resizable({ disabled: false });
          if($('.col-xs-12').width()==$('.container').width())$('.col-xs-12').css('width','50%');
          else {
              $( "#resizable" ).css('width',( $('#resizable').width() / ($('#resizable').width() + $('#mirror').width()) ) * $('.container').width());
              $('#mirror').css('width', $('.container').width() - $( "#resizable" ).width() - 15 );
          } 
      }           
  });

Demo: http://www.bootply.com/zfNflrRg83

update

Thank you! I do not want to use container as it leaves space at the ends. Also, I need the those columns to be of size col-md-4 and col-md-8..

I think you can use a container-fluid class as shown beneath:

<div class="container-fluid" style="padding:0;">
 <div class="row" style="margin:0;">
     <div id="resizable" class="col-xs-12 col-md-4" style="background-color:green;">column 1</div>
     <div id="mirror" class="col-xs-12 col-md-8" style="background-color:red;">column 2</div>
 </div>      
</div> 

and javascript:

  $(function() {

    if($('.container-fluid').innerWidth()>992)
    {
    $( "#resizable" ).resizable({ maxWidth: $('.container-fluid').innerWidth()-200 });
    }

    $( window ).resize(function() {  
    if($('.container-fluid').innerWidth()<=992){
    $('.col-xs-12').css('width','100%');
    $( "#resizable" ).resizable({ disabled: true });
    }
    else {
    if($("#resizable").innerWidth()===$('.container-fluid').innerWidth())
    {
    $('.col-xs-12').css('width','');
    }
    $( "#resizable" ).resizable({ disabled: false, maxWidth: $('.container-fluid').innerWidth()-200 });
    $('#mirror').css('width', Math.floor($('.container-fluid').innerWidth() -  $( "#resizable" ).innerWidth()));
    }         
    });

  });