UNPKG

outlayer

Version:

the brains and guts of a layout library

96 lines (84 loc) 2.42 kB
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CellsByRow toggler</title> <link rel="stylesheet" href="examples.css" /> </head> <body> <h1>CellsByRow toggler</h1> <button id="toggler">Toggle</button> <div id="basic" class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="../bower_components/get-size/get-size.js"></script> <script src="../bower_components/matches-selector/matches-selector.js"></script> <script src="../bower_components/ev-emitter/ev-emitter.js"></script> <script src="../bower_components/fizzy-ui-utils/utils.js"></script> <script src="../item.js"></script> <script src="../outlayer.js"></script> <script src="cells-by-row.js"></script> <script> var basic = document.querySelector('#basic'); var layout = new CellsByRow( basic ); var button = document.querySelector('button'); var isToggled = false; button.onclick = function() { isToggled = !isToggled; basic.style.width = isToggled ? '800px' : '400px'; layout.layout(); } </script> </body> </html>