Clever Geek Handbook

Two divisions of 50% each. Make the middle draggable to make it bigger or smaller

Ok, there is a way to have 2 divs taking up 50% of the screen and have a bar in the middle so you can drag and drop and make the left 40% and the right 60% and vice versa.

I hope I can do this with jquery.

+2


source to share


5 answers


Here's a method I quickly wrote that doesn't use jQuery though.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Slider</title>
<style type="text/css">
    #bar1 {
        position: absolute;
        background: red;
        height: 250px;
        width: 400px;
        z-index: 1;
    }

    #bar2 {
        position: absolute;
        background: green;
        height: 250px;
        width: 800px;
    }

    #slider {
        position: relative;
        background: blue;
        height: 100%;
        width: 10px;
        float: right;
    }
</style>

<script type="text/javascript">
    var down = false;
    var mouse_x;
    var interval;
    var IE = document.all?true:false

    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = get_mouse_x;

    function get_mouse_x(e) {
        if (IE)
            mouse_x = event.clientX;
        else
            mouse_x = e.pageX;
    }

    function drag() {
        interval = setInterval("update()", 1);
    }

    function release() {
        clearInterval(interval);
    }

    function update() {
        if ((mouse_x - document.getElementById('bar1').offsetLeft) >= document.getElementById('bar2').offsetWidth) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar2').offsetWidth + "px";
        } else if (mouse_x <= document.getElementById('bar1').offsetLeft) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar1').offsetLeft + "px";
        } else {
            document.getElementById('bar1').style.width = (mouse_x - document.getElementById('bar1').offsetLeft) + "px";
    }
    }
</script>
</head>

<body onmouseup="javascript:release();">
    <div id="bar1">
        <div id="slider" onmousedown="javascript:drag();"> </div>
    </div>

    <div id="bar2"></div>
</body>
</html>

I do not recommend that you use this on your website, instead study it or improve it so it is completely stable. But hopefully this gives you an idea of ​​how to fix this problem.



Also there is a bug in IE where after swiping it doesn't lose focus from the div slider. So this means that when you move it around the screen again, it doesn't release properly. To avoid this: After the initial slide, focus on something else and then unfold again. Another thing is that it works great.

Hope this was helpful in some way :)

+2


source


I don't have a complete answer for you, but one thing that might be worth a look is resizing the interface from jQuery UI: http://jqueryui.com/demos/resizable/#synchronous-resize



This will largely depend on how you want the final product to work. Perhaps you can set it up so that one DIV is changed and the adjacent one just fills in the gap.

+4


source


What you describe is usually called Spliter. From the demo , this jQuery plugin looks like it does exactly what you want.

+1


source


Inside the css percent execution, I would find the window width, split it in half (minus the bar width), and set the pixel width. this makes it easier to change when you move the panel.

0


source


It might be WAY overkill depending on what else you need for your app UI, but ExtJS does it pretty well.

Another unconventional option that should be mentioned: the frameset. Frames were the darling of the mid-90s, but they are still supported by almost every browser without too many problems.

-1


source






More articles:


All Articles