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/ 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>
No comments:
Post a Comment