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.

s1h4d0w · Answer 1 · 2016-05-23T13:51:21.937

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.

edited May 23 '16 at 13:51

answered May 23 '16 at 13:31

s1h4d0w

762
6
27

so in the case of our application, our bottom portion has a ton of data that is edited client side with tabs of more information that can be edited. is there a way to mirror this into the new window without having to create a copy of the code for it and new caching/database storing? and would docking back be possible? thank you for answering btw – user2847749 May 23 '16 at 18:46
There is no way to bring a portion of one screen to a new screen as far as I know. Maybe you could store the full html of that portion in a cookie, but any javascript variables etc. would be lost. Best way is to make sure anything they entered or changed is stored somewhere anyway, and then being able to recall it whenever you want. Docking back could use that same mechanism, load that same part with ajax and insert it back into the page. – s1h4d0w May 23 '16 at 18:50
so using devtools as an example, when you "undock" it, they create an entire second copy of the info presented? if yes, where did you find this info? it's the only example that i know of that does what i want so i've been trying to understand how it works. – user2847749 May 23 '16 at 19:16
1

Devtools is a part of the browser and does not have the same limitations when working with webpages. Google uses functions we as webdevelopers do not have access to. Or they could use something similar to as what I suggested, with the values already stored in the application memory anyway. Firebug, the Firefox plugin adds something similar, they have a javascript based version, maybe check out that? – s1h4d0w May 23 '16 at 19:18
thank you, i will try what you have suggested and let you know how it goes. – user2847749 May 23 '16 at 19:26
To further this, I would suggest representing the current state of the UI as JSON. When you click the button to dock/undock, stringify the state object and save it to localstorage or a database. Once the transition is complete, retrieve the state object and use it to set the ui back the way it was. – Wesley Smith May 31 '16 at 08:32

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

1 Answers1