How to make the divider between two tbody elements moveable

Question

I have a table with two scrollable tbody elements on top of each other as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <table class="table table-condensed scrollable">
            <thead>
                <tr>
                    <th colspan="4">Application and SecurityEvent Log</th>
                </tr>
                <tr>
                    <th class="col-md-1 header-row">Time</th>
                    <th class="col-md-5 header-row">Source</th>
                    <th class="col-md-6 header-row">Message</th>
                </tr>
            </thead>
            <tbody id="logEventsApp" class="scrollable">  
                <tr id="13705" class="warning">
                    <td>10:23</td>
                    <td>IIS Express</td>
                    <td>3</td>
                    <td>null</td>
                </tr>
                <tr id="13704" class="warning">
                    <td>10:20</td>
                    <td>TestLog</td>
                    <td>4</td>
                    <td>null</td>
                </tr>      
            </tbody>
            <tbody id="logEventsSec" class="scrollable">  
                <tr id="2345" class="warning">
                    <td>10:21</td>
                    <td>Security error</td>
                    <td>3</td>
                    <td>null</td>
                </tr>
                <tr id="142604" class="warning">
                    <td>10:20</td>
                    <td>TestLog</td>
                    <td>4</td>
                    <td>null</td>
                </tr>      
            </tbody>
        </table>
    </body>
</html>

With the following CSS:

.scrollable table {
    border-collapse: collapse;
    width: 100%;
}

.scrollable thead {
    text-align: left;
    display: table;
    float: left;
    width: 100%;
}

.scrollable thead tr {
    display: table-row;
    width: 100%;
}

.scrollable tbody {
    display: block;
    height: 200px;
    overflow: auto;
    float: left;
    width: 100%;
}

.scrollable tbody tr {
    display: table;
    width: 100%;
}

.scrollable tbody tr {
    height: 18px;
}

.scrollable tbody td {
    padding: 1px 1px;
}

.scrollable th, td {}

I want to make it so that the area that divides the two elements is moveable (e.g., you can decide which one you want to see most by moving it with your mouse).

Is this possible? And if so, how?

a few options here look promising: http://stackoverflow.com/questions/6156182/resizable-table-columns-with-jquery — mikey, Feb 07 '14 at 18:55

score 1 · Accepted Answer · answered Feb 07 '14 at 19:28

FIDDLE: http://jsfiddle.net/DUx7A/

This is maybe a little hacky, and you will have to style the #scroller element as you like it

CSS

/*all of your old CSS and */

#scroller{
height:10px;
background-color:gray;
cursor:pointer;
}

HTML

insert this between your 2 tbodys

<tbody id=scroller><tr><td colspan=3></td></tr></tbody>

and here is the JS

    document.getElementById('logEventsApp').style.height = document.getElementById('logEventsApp').offsetHeight + 'px';
    document.getElementById('logEventsSec').style.height = document.getElementById('logEventsSec').offsetHeight + 'px';
    console.log(document.getElementById('logEventsApp').style.height);

    tracking = false;
    document.onmousemove = function(e) {
//console.log(e);
        mouseX = e.clientX;
        mouseY = e.clientY;
        if (tracking === true)
        {

            document.getElementById('logEventsApp').style.height = logEventsAppHeight - (start - mouseY) + 'px';
            document.getElementById('logEventsSec').style.height = logEventsSecHeight + (start - mouseY) + 'px';
        }

    };

    document.getElementById('scroller').onmousedown = function() {
        tracking = true;
        start = mouseY;
        logEventsAppHeight = parseInt(document.getElementById('logEventsApp').style.height);
        logEventsSecHeight = parseInt(document.getElementById('logEventsSec').style.height);
    };

    document.getElementById('scroller').onmouseup = function() {
        tracking = false;
    };

in IE8 apparantly you must get the position with `window.event.clientX / Y`, but fixing that seems to only be a small fraction of the issues IE8 seems to be having with this! Also, I don't believe IE8 supports scrollable ``s. — chiliNUT, Feb 07 '14 at 20:43
It does. Another issue is that once you scroll it down you can go outside the container div. Then when you let move it back the whole div is stretched out. :-) — user2609980, Feb 13 '14 at 21:15
It is pretty rudimentary for sure. The basic structure is there, you should hack it up to make it suit your purpose better and post the results in a fiddle! — chiliNUT, Feb 13 '14 at 21:57

How to make the divider between two tbody elements moveable

1 Answers1