I'm using jQuery UI Layout Plug-in in my code. I have created 3 panes namely west,center & east pane. In center pane, i have added 2 canvas element, the first canvas element contains a circle drawn on it & the second canvas element is empty.
At the time when the document is ready, the following code would be executed with the west & center pane to be open and east pane to be closed.
$(document).ready(function () {
myLayout = $("body").layout({ applyDemoStyles: true });
myLayout.close('east');
});
Now, on clicking the 1st canvas with a circle drawn on it, my east pane gets open with the east pane to be enabled. And on clicking the empty canvas my east pane gets closed with the pane to be disabled, so that while clicking on the east pane it wont get open further as the pane is disabled.
For the empty canvas following code is written-
myLayout.close('east');
myLayout.disableClosable('east');
and for the canvas with circle drawn following code is written-
myLayout.open('east');
myLayout.enableClosable('east');
First when the empty canvas is clicked, and after that we clicked on the canvas with circle drawn, my east pane is open with the east pane to be enabled. Now when we move our cursor to east pane, a hand shaped symbol comes which says that it is enabled. When we click on east pane, it wont close the east pane-which is causing an issue.
Generally clicking on east pane it should be close/open.
I searched a lot but didnt got a proper solution. have seen this site too - http://layout.jquery-dev.com/demos/layout_methods.html