Welcome to Window Engine. Window Engine is a lightweight javascript library, developed by Gauthier Staehler, for draggable and beautiful windows. Full demo here.
<link rel="stylesheet" href="window-engine/window-engine.css">
<script src="window-engine/window-engine.min.js"></script> // End of your file
OR Test it first :
<link rel="stylesheet" href="https://gstaehler.github.io/cdn/window-engine.css">
<script src="https://gstaehler.github.io/cdn/window-engine.min.js"></script> // End of your file
<div id="window!" class="window">
<div id="window!header" class="color">
<p class="windowTitle">Title</p>
<b id="closeButton!">×</b>
</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
if no color, the window 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)
You can add another button to open you new window :
<button id="button!"></button>
All of the windows must be in one windowGroup :
<div class="windowGroup"> Your windows ... </div>
You can add a fade effect on the windows with the class "fade" :
<div id="window!" class="window fade">
If you want your window to be visible without clicking on a button the first time :
<div id="window!" class="window" style="display: initial;">
Of course you can combine it with the fade effect :
<div id="window!" class="window fade" style="display: initial;">
You can 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 id="window1header" class="purple">
<p class="windowTitle">Window Engine</p>
<b id="closeButton1">×</b>
</div>
<div class="mainWindow">
<p>Welcome to Window Engine !</p>
</div>
</div>
<!-- WINDOW 2 -->
<div id="window2" class="window fade">
<div id="window2header" class="cyan">
<p class="windowTitle">Second Window</p>
<b id="closeButton2">×</b>
</div>
<div class="mainWindow">
<p>Cyan</p>
<p>With fade effect !</p>
</div>
</div>
<!-- WINDOW 3 -->
<div id="window3" class="window fade small">
<div id="window3header" class="brown">
<p class="windowTitle">Third Window</p>
<b id="closeButton3">×</b>
</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