Press "Enter" to skip to content

Create Moveable Windows In jQuery | jDoor

jDoor is a jQuery plugin for creating animated/moveable windows that can be brought from background to 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.