Search code examples
jqueryjquery-uiuser-interfacehtmlresizable

Resizable divs within a div

I need 3 divs which would span across the screen (100%, but that's not the main point) and be able to adjust their widths using mouse. The functionality I am trying to achieve is to be able to shrink the width of one div resulting in making another div wider.

I am thinking of using jQuery UI Resizable, but I couldn't find any examples of using that with multiple divs.

Any ides or links to examples?

Solution

  • You should inspect the jQuery Layout plugin, doing exactly what you need and much more.

    You could do what you need like this (not tested but should work) :

    <html>
<head>
<script src="jquery.js"></script>
<script src="jquery.layout.js"></script>
<script>
    $(document).ready(function () {
        $('body').layout({ applyDefaultStyles: true });
    });
</script>
</head>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>