Create Moveable Windows In jQuery | jDoor

jDoor is a jQuery plugin for creating animated/moveable windows that can be brought from the background to the front and vice versa. The rear windows will be locked, and only the focus window can be used.

How to make use of it:

1. Load the primary script and core stylesheet within the doc.

<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 display screen utilizing the next parameters:

// $(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.

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

4. Show & cover 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 types 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;
}

Windows-like Moveable Windows, jDoor Plugin/Github

Moveable-jDoor-Demo


See Demo And Download

Official Website(benis-bastelschuppen): Click Here

This superior jQuery/javascript plugin is developed by benis-bastelschuppen. For extra Advanced Usage, please go to the official website.

Share