Support resizing two side by side iframes in JavaScript

Question

I have a web page where I need to show two iFrames side by side, and allow a user to resize them horizontally (so they can easily see the complete contents of either side).

My code looks like this:

<div style="padding:30px">
  <table style="width:100%;border:0px;border-collapse:collapse;">
    <tr>
      <td class="cLeft cSide">
        <iframe class="cFrame" src="{MyLeftPage}">
        </iframe>
      </td>
      <td class="cRight cSide">
        <iframe class="cFrame" src="{MyRightPage}">
        </iframe>
      </td>
    </tr>
  </table>
</div>

Answer 1

Finally managed it: jsFiddle

The problem with using the standard approaches as mentioned here (Thanks user!) is that when you have iFrames and you move the mouse over them, the $(document).mousemove() stops firing.

The trick is to have a column in the middle, and have a div that shows up when you click the column. Since the div is in the parent page, the mousemove event keeps firing, allowing you to easily resize it.

Here's what the final HTML looks like:

<div style="user-select:none;padding:30px">
  <table style="width:100%;border:0px;border-collapse:collapse;">
    <tr>
      <td class="cLeft cSide">
        <iframe class="cFrame" src="{MyLeftPage}">
        </iframe>
      </td>
      <td class="resize-bar">
        <div class="resize-panel"></div>
      </td>
      <td class="cRight cSide">
        <iframe class="cFrame" src="{MyRightPage}">
        </iframe>
      </td>
    </tr>
  </table>
</div>

This is the CSS

.resize-bar {
  width: 5px;
  cursor: col-resize;
  position:relative;
  background-color: #AAA;
  margin:20px;
}
.resize-panel {
  height: 100%;
  background-color: #DDDDDD00;
  display: inline-block;
  position: absolute;
  top:0px;
  left:-2px;
  right:-2px;
  cursor: col-resize;
}
.resize-panel.rx {
    left:-400px;
    right:-400px;
}

.cSide {
    min-width:200px;
}

.cFrame {
  width: 100%;
  border: 1px solid #DDD;
  height: calc(100vh - 170px);
  overflow-x:scroll;
}

And this is the JavaScript:

$(function() {
  var pressed = false;

  $("table td").mousedown(function(e) {
    pressed = true;
    $(".resize-panel").addClass("rx");
    e.stopPropagation();
  });

  $(".resize-panel").mousedown(function(e) {
    pressed = false;
  });

  $(document).mousemove(function(e) {
    if (e.which == 1 && pressed) {
      var ww = $(window).width();
      var cPos = e.pageX;

      if (cPos < 0.20 * ww) cPos = 0.2 * ww;
      if (cPos > 0.80 * ww) cPos = 0.8 * ww; {
        $(".cLeft").width(cPos);
      }
    }
  });

  $(document).mouseup(function() {
    if (pressed) {
      $(".resize-panel").removeClass("rx");
      pressed = false;
    }
  });
});