Windows-like Moveable Windows In jQuery - jDoor

jDoor is a tiny jQuery plugin to create customizable and moveable dialog windows on the page.

These windows behave almost like Microsoft Windows. They can get or lose the focus and you can move them with your mouse around the screen.

How to use it:

1. Load the main script and core stylesheet in the document.

<link rel="stylesheet" href="/path/to/jdoor/jdoor.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jdoor/jdoor.js"></script>

2. Create a moveable window on the screen using the following parameters:

• targetscreenId: The jQuery-selector for the target screen. E.g. '#mytargetscreen', 'div'
• windowId: The (html) name and id of the window. Used for further processing of the end user.
• x: Left position of the window on the targetscreen (in pixels). Use 'center' to center it horizontally.
• y: Top position of the window on the targetscreen (in pixels). Use 'center' to center it vertically.
• width: Width of the window in pixels. If the content overflows the window, a scrollbar will be shown. Use 'auto', 'dynamic' or 'dyn' to use the content's width. You can also use a negative number to set the "max-width" instead of the "width".
• height: Height of the window in pixels.
• title: Text to be shown in the top bar of the window.
• content: Content of the window (HTML).

// $(targetscreenId).jdCreateWindow(windowId, x, y, width, height, title, content)
$('#targetContainer').jdCreateWindow('my_window_id', 100,100, 'dyn', -50, "A window", "This is <br />just<br /> a<br /> window. <div style='width:40px; height:40px; background-color: #FA0;'></div>");

3. Embed a Youtube video into the moveable Window.

• youtubeid: Video ID

// $(targetscreenId).jdCreateYoutubeWindow(windowId, x, y, width, height,title, youtubeid)
$('#targetContainer')jdCreateYoutubeWindow('youtube_window', 100,150, 200,'dyn',"Youtube Window", "8Ltr_IkvKmc");

4. Show & hide the moveable Window.

// show a window
$(windowId).jdShow();

// remove all windows
$(targetscreenId).jdHideAllWindows();

5. Replace the content of a window.

$(windowId).jdHTML(html);

6. Override the default styles of the window.

.jdwindow {
  border: 2px solid #FC2C25;
  background-color: #222222;
  color: #FFF;
  font-family: 'Roboto';
  font-size: 12px;
}

.jdwindow-top { 
  background-color: #FC2C25; 
  padding-left: 5px;
}

.jdwindow-hide{
  background-color: #911;
  font-size: 16px;
  text-align: center;
}

---

This awesome jQuery plugin is developed by benis-bastelschuppen. For more Advanced Usages, please check the demo page or visit the official website.