How do I create a separator between two DIVs with Prototype

Answer 1

That separator is actually a table cell contained within a table row. It maintains a background-color and background-image to give it the effect similar to what you'd see in a desktop application.

I'm not sure to what extend you'd want to do this, but assuming that the table cell is already specified in the markup and it has the appropriate styles, you'd need to setup several things:

• A mousedown handler for registering when the user has clicked on the cell.
• A mousemove handler for updating the position of the separator in context of the browser window.
• A mouseup handler for knowing when to stop updating the location of the separator.

There are variations on how to do this, but here's a very, very rough example:

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

If you're already using Prototype, you can use the Scriptaculous draggable to get the separator to work, then hook into its events to resize the two DIVs accordingly.