Draggable window within canvas area

#1

Hi friends,

I working on one of assignment where I am trying to develop a draggable window, which can be minimized and open just like sticky notes in windows.

Scenario: User is working on one of the form and they wanted to walkthrough one of the screen before making decisions. To help the user, I am providing a link to open the other data screen into a small window within the canvas area, which can be scrolled, minimized but need to be inside the canvas area only.

Thanks in advance for your help. Looking forward to hear from someone at the earliest.

Regards

#2

Seems like you could just open a page in your prototype using the “Popup Window” option. That will popup another browser window which can be dragged around.

If this is critical, you could load your “other data screen” into an inline frame, wrap that in a dynamic panel and use boundaries in that panel’s OnDrag event.

See this demo for both options:
popup frame.rp (75.6 KB)

#3

Thanks, I am able to make the dock-able window as per the scenario but now, I’m stuck how to maximize. I am working on it but definitely any update from you or others is going to help me further.

Just a note - I was looking for docking window and not more like pop-up, maybe I was not able to explain properly.

Thanks.

#4

Not sure what you mean exactly by “maximize” --do you mean make the popup window fullscreen? You can make it as large as the viewport of the prototype (so if the left side pane is minimized and the browser is set to fullscreen mode it should be full screen size.)

Also not sure what you mean by “docking window” --if you can point to an example website, upload an animation or sketch it would help me understand.

In this updated file, I’ve added controls to minimize/maximize the window and “docK” to the lower left (which in Windows terminology is actually “minimize” where as the min/max control is actually called “restore down / restore up” in Windows, as I recall.) Hope this helps.

popup frame.rp (99.1 KB)