I'm not sure if this is an issue with jLayout or with jQuery-UI
resizeable, but I'm going nuts trying to figure it out. The code
below doesn't call the relayout after changing the size(s) of the
north and west panels with a fresh download of jQuery-UI (run in a
browser with console and watch the log). There is a very small
section at the bottom of the north panel that will call the stop/
resize event but it doesn't perform the layout resize for some reason.
Does anyone have a working page/version/sample that uses the latest
jQuery-UI resizeable?
- Jeremy
Sample Page:
<html>
<head>
<title>Layout test</title>
<link rel="stylesheet" href="style/redmond/jquery-
ui-1.8.16.custom.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery/
jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-
ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery/
jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery/jlayout.border.js"></
script>
<script type="text/javascript" src="js/jquery/jquery.layout.js"></
script>
<style>
.ui-layout{
border: 1px solid black;
}
.layout{
height: 100%;
}
</style>
<script type="text/javascript">
var init = function(){
var container = $('.layout');
function relayout(event, ui){
var center = $('.ui-layout-center'), mytable_wrapper = $
('#mytable_wrapper');
container.layout({resize: false});
console.log('resized');
}
relayout();
$(window).resize(relayout);
$('#north_panel').resizable({
handles: 's',
stop: relayout
});
$('#west_panel').resizable({
handles: 'w',
stop: relayout
});
};
$(document).ready(init);
</script>
</head>
<body>
<div id="stage" class="layout {layout: {type: 'border', hgap: 3,
vgap: 3}}">
<div id="center_panel" class="ui-layout ui-layout-center">Center
Panel</div>
<div id="north_panel" class="ui-layout ui-layout-north">
North Panel
</div>
<div id="west_panel" class="ui-layout ui-layout-west">
West Panel
</div>
</div>
</body>
</html>
