Resizable div just isn’t working no matter what I do

I’ve been trying to use JqueryUIs resizable to create resizable divs like on jsfiddle for example. Jsfiddle makes use of JqueryUI resizable with handles so that you can expand the code editor or the output area displaying the dhtml results (a design etc). I’ve just about tried every solution given to others who experience problems working with jquery ui’s resizble. Is there a way to create a resizable div with CSS only and have a custom handle? I’ve tried this as well and it’s not working either http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/ but it’s what I’m looking for; two divs, one containing the main content and the other containing sidebar stuff. I made a fiddle quickly of that solution given here: http://jsfiddle.net/asx4M/1/ I would appreciate it if someone could tell me what it is I’m doing wrong or provide me with another solution for what I’m trying to do.

here’s the code as well:

<!DOCTYPE html>
<html>
<head>
<style>
#sidebar {
   width: 49%;
}
#content {
width: 49%;
float: left;
}
</style>

    <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.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">        </script>
<script type="text/javascript">
$(document).ready(function() {
$( "#sidebar" ).resizable({      
});
$("#sidebar ").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content).width(1224-setWidth);
$('.menu).width(setWidth-6);
});
});
</script>
</head>
<div id="sidebar"> 
<div class="sidebar-menu">
<!-- all your sidebar/navigational items go here -->
</div>
</div>
<div id="content">
<!-- all your main content goes here -->
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>