How can I simplify this JavaScript code

Question

I have three divs which are stacked with css on top of each other. The middle one should be a draggable separator, such that the top div and its content is above and the other div is below. And each has its own scrollbar. See jsfiddle

It works however if find my js code not very nice because it set the heights of the three divs separately:

The html:

<div id="wrapper">
    <div id="content">
    <div id="dragger"></div>
    <div id="footer"></div>
</div>

The css code

 #wrapper {
     height: 100%;
     width: 100%;
     overflow: auto;
     position: relative;
 }
 #content {
     position: fixed;
     bottom: 25%;
     width:100%;
     height: 75%;
     overflow:scroll;
     overflow-x:hidden;
 }
 #dragger {
     position: fixed;
     bottom: 25%;
     width:100%;
     cursor: ns-resize;
     height: 5px;
 }
 #footer {
     position: fixed;
     bottom: 0;

     width:100%;
     height: 25%;
     overflow:scroll;
     overflow-x:hidden;
 }

The js code:

   ...
   $('#footer').css({
        "height": bodySize - e.pageY
    });
    $('#content').css({
        "bottom": bodySize - e.pageY,
            "height": e.pageY
    });
    $('#dragger').css({
        "bottom": bodySize - e.pageY
    });
    ...

Is there a better way to achieve the same behavior, I thought of some way to make the footer and content div height depending on the position of dragger in css. But I do not know how. Can anyone help me?

Sean Ryan · Accepted Answer · 2013-11-19 18:47:13Z

3

http://jsfiddle.net/d4j3V/4/

You are making the same call three times. Instead of doing that, just calculate it at the beginning:

var height = bodySize - e.pageY;

Then drop that variable every place you did the calculation:

$('#footer').css({
    "height": height
});
$('#content').css({
    "bottom": height,
     height": e.pageY
});
$('#dragger').css({
    "bottom": height
});

Also, instead of calling $(document.body) three different times, just chain the various on calls together.

$(document.body).on("mousemove", function (e) {
    ....
}).on("mousedown", "#dragger", function (e) {
    ....
}).on("mouseup", function (e) {
    ....
});

edited Nov 19, 2013 at 18:47

answered Nov 19, 2013 at 18:45

Sean Ryan

6,0562 gold badges27 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tune2fs Over a year ago

Thanks for the tip, but my aim is that I only need to change the position of one div and the others adapt accoridingly.

Sean Ryan Over a year ago

I don't see how you can make that happen any other way than what you have already done. HTML elements are not generally "smart" enough to know what their siblings are doing, especially when it comes to height.

Sean Ryan Over a year ago

Well, I take that back. You could move the containing element to a table with two one-cell rows. You could then make some JS magic happen to drag and resize those two cells. There are a few plugins that could make it happen for you.

Collectives™ on Stack Overflow

How can I simplify this JavaScript code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related