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>

I have to admit that it's too much work for me now, but I would suggest that you create CSS that changes cursor when you hover the center area. Then, attach handler for mousedown/mouseclick. Then, when the user moves mouse, you compare the mouseposition and set the new widths of the divs. Sounds like a plan..? — EricG, Oct 31 '13 at 09:48
Yes. I am also thinking in the same direction. The answer @Linus gave would do the trick i suppose. — roger_that, Oct 31 '13 at 10:04

score 1 · Answer 1 · answered Oct 31 '13 at 10:14

1

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

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

answered Oct 31 '13 at 10:14

Vin.AI

2,369
2
19
40

score 0 · Answer 2 · answered Oct 31 '13 at 09:48

0

<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%; }

answered Oct 31 '13 at 09:48

Ricky Stam

2,116
21
25

Play a little with the CSS width and height of #diffReport and #original to achieve what you want. Let me know if it's ok. – Ricky Stam Oct 31 '13 at 09:50
This works somewhat but while increasing the width of left div, right one goes down. And there is no option of increasing width of right by dragging its left border which user will need ideally. Draggable events are ok, but we need that if we are dragging one div, other's size should automatically decrease so that it doesn't goes below. – roger_that Oct 31 '13 at 09:56
Mmm ye because both have same class (my bad) so they both get resized. Change that. Can't help you more at the moment :/ – Ricky Stam Oct 31 '13 at 10:01

Linus Unnebäck · Answer 3 · 2013-10-31T10:18:11.243

0

var isDragging = false
var lastPageX = null
Make a new div in the middle of the existing ones.
Attach an event listener to mousedown on that div.
- set isDragging to true and lastPageX to event.pageX
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
Attach an event listener to mouseup on the document
- set isDragging to false

edited Oct 31 '13 at 10:18

answered Oct 31 '13 at 09:49

Linus Unnebäck

23,234
15
74
89

`add/remove that value to the two resizable divs` , unable to understand this point. – roger_that Oct 31 '13 at 10:13

Sridhar R · Answer 4 · 2013-10-31T09:58:17.157

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/

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

4 Answers4