Welcome to Window Engine. Window Engine is a lightweight javascript library, developed by Gauthier Staehler, for draggable windows. Demo here.
Download ZIP :
<link rel="stylesheet" href="dist/window-engine.min.css">
<script src="dist/window-engine.min.js"></script> // End of your fileOR Install with NPM :
npm i window-engineOR Test it first :
<link rel="stylesheet" href="https://unpkg.com/window-engine@latest/dist/window-engine.min.css">
<script src="https://unpkg.com/window-engine@latest/dist/window-engine.min.js"></script> // End of your file
<div id="window!" class="window">
<div class="color">
<p class="windowTitle">Title</p>
</div>
<div class="mainWindow">Content</div>
</div>! is the number of the window
color is the color of the window : purple, orange, brown, cyan, crimson, green
default color is black
To add a new window, copy the structure above in your html and change ! (if this is your third window, ! = 3 for example)
Add another button to open you new window :
<button id="button!"></button>
All of the windows must be in the same windowGroup :
<div class="windowGroup"> Your windows ... </div>
Add a fade effect on the windows with the class "fade" :
<div id="window!" class="window fade">
The following code makes the window visible without a button click :
<div id="window!" class="window" style="display: initial;">Of course it is possible to combine it with the fade effect :
<div id="window!" class="window fade" style="display: initial;">
Change the size of the window with "small" and "large" :
<div id="window!" class="window large">normal : 800 x 400; small : 600 x 300; large : 1000 x 500
<div class="windowGroup">
<!-- WINDOW 1 -->
<div id="window1" class="window" style="display: initial;">
<div class="purple">
<p class="windowTitle">Window Engine</p>
</div>
<div class="mainWindow">
<p>Welcome to Window Engine !</p>
</div>
</div>
<!-- WINDOW 2 -->
<div id="window2" class="window fade">
<div class="cyan">
<p class="windowTitle">Second Window</p>
</div>
<div class="mainWindow">
<p>Cyan</p>
<p>With fade effect !</p>
</div>
</div>
<!-- WINDOW 3 -->
<div id="window3" class="window fade small">
<div class="brown">
<p class="windowTitle">Third Window</p>
</div>
<div class="mainWindow">
<p>Brown</p>
<p>With fade effect !</p>
</div>
</div>
</div>
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>
Copyright Gauthier Staehler