Resizer

by patelsan

HTML

<div class="header">
<div class="headerCell col1" data-colindex="0">Name</div>
<div class="headerCell col2" data-colindex="1">Email</div>
<div class="headerCell col3" data-colindex="2">Phone</div>
    <br />
    <br />
    <button type="button" id="increaseWidth">Increase Width</button>
</div>

CSS

.header{
 margin: 12px;
}

.headerCell{
position: absolute;
background-color: #F1F1F1;
font-family: 'arial';
font-size: 12px;  
height: 24px;   
}

.col1{
 width: 100px;
 left: 0px;    
}

.col2{
 width: 150px;
 left: 100px;    
}

.col3{
 width: 200px;
 left: 250px;    
}

.resizer{
width: 2px;
background-color: #5F5F5F; 
height: 24px;  
float: right; 
cursor: e-resize;  
}

.title{
display: block;
}

CoffeeScript

jQuery ->
 $('#increaseWidth').click((e)-> 
  increment = 50
  colIndex = '0'
  #newWidth = Number($('.col1').css('width').replace("px","")) + increment
  $('.headerCell').each(->
   newWidth = Number($(this).css('width').replace("px","")) + increment
   newLeft = Number($(this).css('left').replace("px","")) + increment
   $(this).css('width', newWidth + 'px') if $(this).data('colindex') == colIndex
   $(this).css('left', newLeft + 'px') if $(this).data('colindex') > colIndex)
  )#$('.col1').css('width', newWidth))

 resizer = {}
 $('.headerCell').append('<div class="resizer"></div>')
 
 $('.resizer').mousedown((e)-> 
  resizer.startX = e.clientX
  resizer.startWidth = $('.col1').css('width') #ToDo: Grab the specific column
  console.log 'Down'
  
   
  $('.resizer').mousemove((e)->
   newWidth = Number(resizer.startWidth.replace("px", "")) + Number(e.clientX) - Number(resizer.startX) 
   #$('.col1').css('width', newWidth + 'px')   
   console.log $('.col1').css('width')
   console.log 'Moved, New Width: ' + newWidth)
   
  $(this).mouseup((e)-> 
   $(this).off('mouseup') 
   $(this).off('mousemove')
   console.log 'mouse up')
 )