CODEWITHSUNDEEP
jqueryhtmlcssresize
gotohales
gotohales

Reputation: 3695

Three resizable columns in container

So I've got a container with three columns in it that need to be resizable. The container itself will eventually need to be resizable too, but for now it can be static, as long as the columns inside can be flexible on drag.

I thought I had the right idea but it isn't quite there. When resizing, some parts move correctly, but others jump around either behind or resize part way correctly then start moving backwards. You can see it here in what I have so far, grabbing the middle handles and trying to resize:

http://jsbin.com/arulel/1/edit

Any help would be appreciated, and it only needs to work in Firefox. Preferably without extra plugins, if possible.

Here is the code as well:

 <div id="container">
    <div id="col1" class="col">
      <p>"Lorem ipsum.."</p>
    </div>
    <div class="resizer first"></div>
    <div id="col2" class="col">
      <p>"Lorem ipsum.."</p>
    </div>
    <div class="resizer second"></div>
    <div id="col3" class="col">
      <p>"Lorem ipsum..."</p>
    </div>
  </div>

CSS:

#container {
  background: none no-repeat 0 0 scroll #aaa;
  height: 600px;
  border-radius: 0 0 6px 6px;
  width: 700px;
  position: relative;
}

.col {
  height: 100%;
  position: absolute;
  z-index: 8000;
  padding: 0 10px;
}

.first {
  width: 4px;
  height: 100%;
  position: absolute;
  left: 33.33%;
  background-color: white;
  z-index: 9000;
}

.second {
  width: 4px;
  height: 100%;
  position: absolute;
  right: 33.33%;
  background-color: white;
  z-index: 9000;
}

.resizer:hover {
  cursor: col-resize;
}

#col1 {
  background: none no-repeat 0 0 scroll #444;
  border-radius: 0 0 0 6px;
  left: 0;
  right: calc(66.66% - 4px);
}
#col2 {
  background: none no-repeat 0 0 scroll #111;
  left: calc(33.33% + 4px);
  right: calc(33.33% - 4px);
  color: white;
}
#col3 {
  background: none no-repeat 0 0 scroll #777;
  border-radius: 0 0 6px 0; 
  left: calc(66.66% - 4px);
  right: 0;
}

Javascript/jQuery:

$(document).ready(function(){

  $(".first").on("mousedown", function(e){
    mousedownFirst = true;
  });
  $(".second").on("mousedown", function(e){
    mousedownSecond = true;
  });
  $("#container").on("mouseup", function(e){
    mousedownFirst = false;
    mousedownSecond = false;
  });
  $("#container").on("mousemove", function(e){

    parentOffset = $(this).offset();

    if(mousedownFirst){
      $(".first").css("left", e.pageX - parentOffset.left);
      $("#col1").css("right", e.pageX - parentOffset.left);
      $("#col2").css("left", e.pageX - parentOffset.left);      
    }
    if(mousedownSecond){
      $(".second").css("left", e.pageX - parentOffset.left);
      $("#col2").css("right", e.pageX - parentOffset.left);
      $("#col3").css("left", e.pageX - parentOffset.left);
    }

  });

});

Upvotes: 0

Views: 3280

Answers (3)

Fernker
Fernker

Reputation: 2288

If you don't want to use a plugin you need to look at your Javascript closely. You are mixing left and right on the same element, which doesn't really seem to work. I'm not going to fix the whole thing for you, as that's not the point, but I can point you towards the right direction (I didn't fix the whole thing anyway).

Here's my edits: http://jsbin.com/arulel/15/edit

All I did was change this:

$("#col1").css("right", e.pageX - parentOffset.left);

to this:

 $("#col1").css("width", e.pageX - parentOffset.left);

The results seem to be lots better already. This adjusts the width of the first column to be as wide as the distance is to the start of the second column. To get this idea working fully you'll need to spend some time figuring out widths and some math to calculate it.

If you choose not to go down this path I would suggest a plugin.

Upvotes: 1

SatishJS
SatishJS

Reputation: 62

You can use jQuery UI resizabble

Refer stack overflow question here for more clarifcation

here example for for jQuery resizable And API Documentation for it

Upvotes: 0

What have you tried
What have you tried

Reputation: 11148

I know you said you prefer not to use a plugin, but I highly recommend this one to you.

First, create a simple table markup:

<table id='table1' class='resizable'>
<tr>
    <th width='10%' onclick='alert("Bow!!! Do not be afraid!");'>cell 11</th>
    <th width='20%'>cell 12</th>
    <th width='40%'>cell 13</th>
</tr>
<tr>
    <td>cell 21</td>
    <td>cell 22</td>
    <td>cell 23</td>
</tr>
<tr>
    <td>cell 31</td>
    <td>cell 32</td>
    <td>cell 33</td>
</tr>
</table>

Then, simply include the below script in the <head> tags:

http://bz.var.ru/comp/web/resizable-tables.js

Live Preview:

Click here to view a live preview for the above code

Upvotes: 2

Related Questions