CODEWITHSUNDEEP
jqueryjquery-uiuser-interfacehtmlresizable
sharoni
sharoni

Reputation: 158

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?

Upvotes: 1

Views: 1313

Answers (1)

glmxndr
glmxndr

Reputation: 46616

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>

Upvotes: 4

Related Questions