<!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <title>Examples</title> <link rel="stylesheet" type="text/css" href="css/examples.css"> <script defer type="text/javascript" src='js/live_interact.js'></script> <script defer type="text/javascript" src='js/examples.js'></script> </head> <body> <div id='topbar'>liveteract.js</div> <div class="gridCodePair"> <div class="title">Here is a small demo that combines the major features of the library</div> <div id="demo"> <div id='ibar'> <div id='ibarbut'> Navigation Bar </div> </div> <div id="text1" class="textbox"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quidem culpa, rerum blanditiis mollitia aut eos dolor delectus, pariatur non neque quaerat numquam laudantium autem aperiam nam assumenda qui voluptate. Quisquam voluptatum nihil eum reiciendis delectus illum eius unde minus. Ducimus, rerum? Quos ducimus ut voluptatibus quae excepturi enim iste? </div> <div id="image"> <img src="./images/crystal.jpg" alt=""> </div> <div id="example1"></div> </div> </div> <div class="gridCodePair"> <div class="title">Dragging</div> <div class="interactiveArea"> <div id="dragExample"></div> </div> <div> Codes <div> JavaScript <p> const menu = new PopupMenu("dragExample") <br> menu.bindPopup()<br> menu.addButtons(["draggable"])<br> box.addEventListener('click', togglePopup)<br> box.addEventListener("mousedown", drag)<br> </p> HTML <p> <{div}> id="dragExample" <{/div}> </p> CSS <p> #dragExample{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; } </p> </div> </div> </div> <div class="gridCodePair"> <div class="title">Snapping</div> <div class="interactiveArea"> <div id="snapExample"></div> </div> <div> JavaScript <p> const menu2 = new PopupMenu("snapExample") <br> menu2.bindPopup()<br> menu2.addButtons(["draggable", "snapping70"])<br> box2.addEventListener('click', togglePopup)<br> box2.addEventListener("mousedown", drag)<br> </p> HTML <p> <{div}> id="snapExample" <{/div}> </p> CSS <p> #snapExample{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; } </p> </div> </div> <div class="gridCodePair"> <div class="title">Resizing</div> <div class="interactiveArea"> <div id="resizeExample"></div> </div> <div> JavaScript <p> const menu3 = new PopupMenu("resizeExample")<br> const resized3 = new Resizer("resizeExample")<br> menu3.bindPopup()<br> resized3.buildBorders()<br> menu3.addButtons(["resizable"])<br> box3.addEventListener('click', togglePopup)<br> </p> HTML <p><{div}> id="resizeExample" <{/div}></p> CSS <p> #resizeExample{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; } </p> </div> </div> <div class="gridCodePair"> <div class="title">Removing</div> <div class="interactiveArea"> <div id="removeExample1"></div> <div id="removeExample2"></div> </div> <div> JavaScript <p> const menu4 = new PopupMenu("removeExample1")<br> menu4.bindPopup()<br> menu4.addButtons(["remove"])<br> box4.addEventListener('click', togglePopup)<br> <br> const menu5 = new PopupMenu("removeExample2")<br> menu5.bindPopup()<br> menu5.addButtons(["remove"])<br> box5.addEventListener('click', togglePopup)<br> </p> HTML <p> <{div id="removeExample1"}><{/div}> <{div id="removeExample2"}> <{/div}> </p> CSS <p> #removeExample1{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }<br> #removeExample2{ background-color: blue; height: 50px; width: 100px; position: absolute; top: 150px; left: 540px; } </p> </div> </div> <div class="gridCodePair"> <div class="title">Aligning</div> <div class="interactiveArea"> <div id="alignExample1"></div> <div id="alignExample2"></div> </div> <div> JavaScript <p> const menu6 = new PopupMenu("alignExample1")<br> menu6.bindPopup()<br> menu6.addButtons(["draggable","select"])<br> box6.addEventListener('click', togglePopup)<br> box6.addEventListener("mousedown", drag)<br> <br> const menu7 = new PopupMenu("alignExample2")<br> menu7.bindPopup()<br> menu7.addButtons(["draggable", "select"])<br> box7.addEventListener('click', togglePopup)<br> box7.addEventListener("mousedown", drag)<br> </p> HTML <p> <{div id="alignExample1"}><{/div}> <{div id="alignExample2"}><{/div}> </p> CSS <p> #alignExample1{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }<br> #alignExample2{ background-color: blue; height: 200px; width: 100px; position: absolute; top: 150px; left: 540px; } </p> </div> </div> </body> </html>