IDE Like interface with jQuery (Resizing divs)

Question

Hello,

I am planning to develop a site which will have interface very similar to IDE

I was wondering if there is a jQuery plugin which allows the resizing of divs (horizontal / vertical based on settings) or any ideas on what would be the best approach.

Answer 1

use Jquery UI Re-sizable

http://jqueryui.com/demos/resizable/

Answer 2

You can also try:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;

<script>
    $(document).ready(function() {
      $("#resizable").resizable();
    });
</script>


<div id="resizable" style="width: 100px; height: 100px; background: silver;"></div>

Reference:

• UI/API/1.8/Resizable
• Custom Resizable Handles in JQuery UI
• jQuery Resizable

Answer 3

I use jQuery layout for a web-based publishing platform for kids books and it's really good. Simple to use, good docs.

http://layout.jquery-dev.net/