Increase width of divs, displayed side by side, using draggable events

Question

I have two divs of fixed length as of now, which loads external URL by dynamically embedding iframes inside them. Divs are appearing next to each other - one on left and other right.

As of now, I have fixed their width to 50% each. But, I want to give user a flexibility to increase the width of any div to view the URL inside easily without scrolling horizontally . Something like dragging the border separating the two divs to either left or right according to his need.

Is there a way I could achieve this? Please suggest any library or something.

I have gone through a library twentytwenty which is used for images. I don't know how will that work for dynamic iframes.

Here is the JSFiddle which displays the divs.

<div>
    <div id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div id="diffReport" style="width:45%; height: 730px;float:right">
        <p>another div</p>
    </div>
</div>

Answer 1

There is a awesome jQuery plugin, go with jQuery Splitter here:

http://jquery.jcubic.pl/splitter.php

Answer 2

<div>
    <div class="resizable" id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div class="resizable" id="diffReport" style="width:45%; height: 730px;float:right">
                <p>another div</p>
    </div>
</div>

$(function() {$( ".resizable" ).resizable({animate: true,animateEasing:'swing',imateDuration: 500
});});

#diffReport, #originalPage{
        border: 1px solid;
}
.ui-resizable-helper { border: 1px dotted gray; }
.resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid     gray; overflow: hidden; position: relative; }
#diffReport { width: 100%; height: 100%; }
#originalPage { width: 100%; height: 100%; }

Answer 3

1. var isDragging = false
2. var lastPageX = null
3. Make a new div in the middle of the existing ones.
4. Attach an event listener to mousedown on that div.
   • set isDragging to true and lastPageX to event.pageX
5. Attach an event listener to mousemove on the enclosing div.
   • only run if isDragging
   • var diff event.pageX - lastPageX
   • add diff to the left resizable div
   • remove diff from the right resizable div
   • set lastPageX to event.pageX
6. Attach an event listener to mouseup on the document
   • set isDragging to false

Answer 4

Use jQuery UI library in order to do resizing/dragging.

HTML

<div id="demo"></div>

Script

    <script>
    $(function(){$('#demo').draggable().resizable();});

    $('#demo')
        .resizable({
            start: function(e, ui) {
                alert('resizing started');
            },
            resize: function(e, ui) {

            },
            stop: function(e, ui) {
                alert('resizing stopped');
            }
        });
</script>

Fiddle is

http://jsfiddle.net/VuqbN/

Updated your fiddle

http://jsfiddle.net/vw9qt/1/