Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery layout resizable not working

I can not manage to get the jquery-layout plugin's options to set. The default renders correctly, but the options don't. I attempt to set resizable and slidable on document ready, but when I alert for resizable it returns false. Can anyone spot what's going wrong here?

js:

$(document).ready(function() {  
var myLayout = $('body').layout({
   west: {
   resizable: true,
   resizeWhileDragging:   true,
   slidable:              true
   }

});
alert(myLayout.options.west.resizable); //returns false
});

html:

<body>

<div class="ui-layout-center">Center
    <div id="board">        
    </div>  
    <button onclick="set_board();">New Game!</button>
    <button onclick="execute_turn();">Turn!</button>
</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
like image 267
valen Avatar asked May 19 '12 03:05

valen


2 Answers

It works for me when jqueryui is included also, like in the jquery-layout Simple demo at http://layout.jquery-dev.net/demos/simple.html.

Make sure that you first include jquery-ui, and then jquery.layout, else it won't work.

Example:

<script src="lib/jquery/jquery-ui-1.10.4.js"></script>
<script src="lib/jquery/jquery.layout-1.3.0-rc30.79.js"></script>
like image 87
codeless Avatar answered Oct 17 '22 01:10

codeless


2018 update for Webpack users

as @codeless have mentioned you need to load 'jquery-ui' prior to layout (by explicitly importing 'jquery-ui' first), but make sure you're also loading 'resizable' and 'draggable' modules of jquery-ui

import 'jquery-ui/ui/widgets/resizable';
import 'jquery-ui/ui/widgets/draggable';

otherwise pane resize won't work

like image 21
Roman86 Avatar answered Oct 17 '22 00:10

Roman86