How to create a divider between two divs with prototype

Question

alt text http://img197.imageshack.us/img197/9084/seperator.png

http://img197.imageshack.us/img197/9084/seperator.png

How to create a separator like Google Docs in the image above using a prototype?

Answer 1

This delimiter is actually a table cell contained in a table row. It supports background-colorand background-imageto give it an effect similar to what you saw in the desktop application.

, , , , :

• mousedown , .
• A mousemove .
• A mouseup, , .

, , , :

var bMouseIsDown = false;
Event.observe('separator', 'mousedown', function() {
  bMouseIsDown = true;
});
Event.observe('separator', 'mouseup', function() {
  bMouseIsDown = false;
});

Event.observe('separator', 'mousemove', function(evt) {
  if(bMouseIsDown === true) {
    var iX = Event.pointerX(evt);
    var iOffsetX = iX - Position.page($('separator'))[0];
    var iWidth = $('separator').getDimensions().width;
    var iElementOffset = iWidth - iOffsetX;
    $(this).setStyle({
        left: iX - iElementOffset
    });
  }
});

Answer 2

Prototype, Scriptaculous draggable, , DIV.