Want to dock and undock portion of application using jquery layout ui

Question

I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,

http://layout.jquery-dev.com/

And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.

I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.

Answer 1

There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.

You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).

It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.

Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/

$("#popout").click(function() {
  $(".bottom").hide(); // You could also use jquery to remove the div from the DOM
  $(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
  window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});

html,
body {
  height: 100%;
}

.top {
  border-bottom: 1px solid #000;
}

.top, .bottom {
  height: 49%;
}

.fillpage {
  height: 100%;
 }

.bottom {
  color: #FFF;
  background: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="top">
  <h1>Top part</h1>
  <button id="popout">Open popup</button>
</div>

<div class="bottom">
  <h1>Bottom part</h1>
</div>

In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".

If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.