Introduction

jDoor version: 1.1.0-beta

jDoor enables you to create moveable windows on your web-page. These windows behave almost like "Real-OS"-Windows: They can get or loose the focus and you can move them with your mouse around the screen.

DOES NOT WORK WITH MS Internet Explorer. Fix it yourself, I am sick of it.
DOES WORK WITH MS Edge. What a relief. :)

LICENSE

You can do with jDoor what you want if you follow these rules:

1. IT IS NOT ALLOWED TO USE THIS SOFTWARE OR PARTS OF IT FOR ADVERTISING. (Popups etc.)
2. AUTHOR CREDITS MUST BE INCLUDED IN YOUR SOFTWARE, VISIBLE TO [AND ACCESSIBLE FOR] THE END-USER.

Minimum Credits:
jDoor by Beni Yager (twitter.com/ben0bi)

Create author credits window:
$('#myscreenid').jdCreateAuthorCredits();

3. For that two rules, you can use it as you want, private or commercial.

Usage

jDoor is a jQuery-plugin. You need to include jQuery to use jDoor.

jDoor is split in several files:
jdoor.js <- This is the main js-File with the jdoor plugin in it.
jdoor.css <- Basic css setup. TODO: remove
themes/xxx.css <- Colouring, border and font setup.

You NEED to include jdoor.js and jdoor.css, but you can create your own theme.

jDoor provides some extra methods for jQuery. To use jDoor related stuff, call $('#targetscreen').myJDoorFunction()


Default Values

You can set or get these default values directly.
Variable NameDefault-ValueDescription
$.fn.djoor.defaults.WindowTopBarHeight20The height of the top-bar in a window. (In pixels)
$.fn.djoor.defaults.WindowHideIconContent'X'The HTML-content of the hide icon in a window.
$.fn.djoor.defaults.MinimumFloatIn10Minimum size of top-bar that must remain in the screen when moving the window out of the screen. (In pixels) Takes into account if the hide icon is on the left or on the right of the window and above the top-bar.
$.fn.djoor.defaults.UseCookiestrueCookies will be used to save the position of the windows, so they are at the same place on reload. You can switch cookies off by setting this to false.

Methods


$(targetscreenId).jdCreateWindow(windowId, x, y, width, height, title, content)

Create a window in a specific screen. A window has a top-bar where you can drag it around, a hide button and a content area.
jDoor windows are NOT represented as objects in JavaScript. They will be created as html code and appended to the targetscreens html.

Parameters:
targetscreenIdThe jQuery-selector for the target screen. E.g. '#mytargetscreen', 'div'
The window will be created in each found element.
windowIdThe (html) name and id of the window. Used for further processing of the end user.
=> $('#myWindowId') will get your window element.
xLeft position of the window on the targetscreen (in pixels).
Use 'center' to center it horizontally. (width must be given for right centering, see below.)
yTop position of the window on the targetscreen (in pixels).
Use 'center' to center it vertically. (height must be given for right centering, see below.)
widthWidth 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 for defining the width. If so, x='center' will position the left instead of the middle of the window to the center.

Use a negative number to set the "max-width" instead of the "width" to get a pseudo-dynamic sizing.
heightHeight of the window in pixels.
If the content overflows the window, a scrollbar will be shown.
Use 'auto', 'dynamic', 'dyn' to use the content for defining the height. If so, y='center' will position the top instead of the middle of the window to the center.

Use a negative number to set the "max-height" instead of the "height" to get a pseudo-dynamic sizing.
titleText shown in the top bar of the window. The window title.
contentContent of the window (HTML).

$(targetscreenId).jdCreateAuthorCredits()

Shows author credits of jDoor. You MUST INCLUDE this information (not the window itself) somewhere, where the end user can access and see it, if you use this software in a commercial way.
The credits-window will have the id and name jdoor_window_author_credits.

Parameters:
targetscreenIdThe jQuery-selector for the target screen. E.g. '#mytargetscreen', 'div'
The window will be created in each found element.

$(targetscreenId).jdCreateYoutubeWindow(windowId, x, y, width, height,title, youtubeid)

Create a window with an embedded Youtube-Video.

Parameters:
targetscreenIdThe jQuery-selector for the target screen. E.g. '#mytargetscreen', 'div'
The window will be created in each found element.
windowIdThe (html) name and id of the window. Used for further processing of the end user.
=> $('#myWindowId') will get your window element.
xLeft position of the window on the targetscreen (in pixels).
Use 'center' to center it horizontally. (width must be given for right centering, see below.)
yTop position of the window on the targetscreen (in pixels).
Use 'center' to center it vertically. (height must be given for right centering, see below.)
widthWidth 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 for defining the width. If so, x='center' will position the left instead of the middle of the window to the center.

Use a negative number to set the "max-width" instead of the "width" to get a pseudo-dynamic sizing.
heightHeight of the window in pixels.
If the content overflows the window, a scrollbar will be shown.
Use 'auto', 'dynamic', 'dyn' to use the content for defining the height. If so, y='center' will position the top instead of the middle of the window to the center.

Use a negative number to set the "max-height" instead of the "height" to get a pseudo-dynamic sizing.
titleText shown in the top bar of the window. The window title.
youtubeidThe ID of the youtube video to play. In code it will look like that: http://youtube.com/embed/MyGivenID

$(targetscreenId).jdHideAllWindows()

Hide all windows on the targetscreen.

Parameters:
targetscreenIdThe jQuery-selector for the target screen. E.g. '#mytargetscreen', 'div'
The windows in each found element will be hidden.

$(windowId).jdShow()

Shows an element and gets it to the top if it has the jdwindow class.

Parameters:
windowIdThe jQuery-selector for the window to show. Calls $(windowId).show() AND $(windowId).jdoor(1) (Focus, see below) IF it has the jdwindow class.

$(windowId).jdHTML(html)

Sets and/or gets the html-content of a windows CONTENT. (Not the whole window, only the content in the content-div.)
Target must have the class jdwindow.

Parameters:
windowIdThe jQuery-selector for the window to show.

$().Mouse()

Returns the mouse position. (Mouse().x and Mouse().y)

(Useable) Internal Methods

$(target).jdoor(funcId)

THIS FUNCTION IS USED INTERNALLY.
Does several things, based on the funcId.

funcId-Functions:
1Gets the window to the top and unlocks it. Locks all other windows in the same screen. Target must have the class jdwindow.
2Initiates moving of a window. Target must have the class jdwindow-top.
3Hides the WINDOW with the given target. Target must have the class jdwindow, jdwindow-top, jdwindow-content, jdwindow-hide or jdwindow-hide-clicker.