| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="chrome=1"> |
| <title>Css-element-queries test</title> |
| <script src="mootools-core-full-nocompat.js"></script> |
| <script src="mootools-more-yui-compressed.min.js"></script> |
| <script src="../src/ResizeSensor.js"></script> |
| <script src="../src/ElementQueries.js"></script> |
| |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <!--[if lt IE 9]> |
| <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
| <![endif]--> |
| <script> |
| 'use strict'; |
| var ResizerDemo = new Class({ |
| y: null, |
| initialize: function(container) { |
| this.container = container; |
| this.setupLayout(); |
| }, |
| |
| setupLayout: function(){ |
| this.handler = new Element('div', { |
| 'class': 'resizerDemo-handler' |
| }).inject(this.container); |
| |
| this.container.makeResizable({ |
| snap: 0, |
| handle: this.handler, |
| modifiers: { |
| 'x': 'width', |
| 'y': this.y |
| } |
| }); |
| } |
| }); |
| |
| var ResizeDemoXY = new Class({ |
| Extends: ResizerDemo, |
| y: 'height' |
| }); |
| |
| window.addEvent('domready', function(){ |
| $$('.examplesResizerDemos').each(function(resizer){ |
| new ResizerDemo(resizer); |
| }); |
| $$('.examplesResizerDemosXY').each(function(resizer){ |
| new ResizeDemoXY(resizer); |
| }); |
| }); |
| </script> |
| <style type="text/css"> |
| .examplesResizerDemos, |
| .examplesResizerDemosXY { |
| background-color: white; |
| width: 550px; |
| margin: 15px; |
| padding: 15px 0; |
| position: relative; |
| border-left: 1px dashed silver; |
| border-bottom: 1px dashed silver; |
| } |
| |
| .examplesResizerDemosXY { |
| height: 150px; |
| } |
| |
| .resizerDemo-handler { |
| position: absolute; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| width: 5px; |
| padding: 0 1px; |
| background-color: gray; |
| cursor: ew-resize; |
| line-height: 5px; |
| font-size: 14px; |
| } |
| |
| .resizerDemo-handler:before { |
| content: '• • •'; |
| color: white; |
| width: 5px; |
| position: absolute; |
| top: 50%; |
| margin-top: -15px; |
| } |
| |
| .example-1 { |
| max-width: 400px; |
| border: 1px solid silver; |
| background-color: #eee; |
| margin: auto; |
| padding: 50px; |
| text-align: center; |
| min-width: 120px; |
| transition:all .2s ease; |
| } |
| |
| .example-1[max-width~="400px"] { |
| padding: 5px; |
| } |
| |
| .example-1[max-width~="200px"] { |
| text-align: left; |
| font-size: 12px; |
| } |
| |
| .example-2 { |
| border: 1px solid silver; |
| margin: 25px; |
| background-color: #eee; |
| } |
| |
| .example-2-first, |
| .example-2-second { |
| background-color: black; |
| color: white; |
| padding: 2px; |
| width: 45%; |
| margin: 5px; |
| float: left; |
| } |
| |
| .example-2-second { |
| float: right; |
| } |
| |
| .example-2-box { |
| background-color: gray; |
| color: white; |
| margin: 5px; |
| padding: 2px; |
| } |
| |
| .example-2[max-width~="300px"] .example-2-first, |
| .example-2[max-width~="300px"] .example-2-second { |
| float: none; |
| background-color: #4186ff; |
| width: auto; |
| } |
| |
| .example-2[max-width~="350px"] .example-2-box { |
| background-color: #ba9196; |
| } |
| |
| .example-2[max-width~="300px"] .example-2-box { |
| background-color: #ba6377; |
| } |
| |
| .example-2[max-width~="200px"] .example-2-box { |
| background-color: #ba4349; |
| } |
| |
| .example-2[max-width~="100px"] .example-2-box { |
| background-color: #ba000d; |
| } |
| |
| .example-3, |
| .example-4 { |
| border: 1px solid silver; |
| margin: 25px; |
| background-color: #eee; |
| } |
| |
| #example-5 { |
| overflow: visible; |
| position: relative; |
| z-index: 150; |
| text-align: center; |
| } |
| |
| #example-3-box, |
| #example-4-box { |
| background-color: gray; |
| color: white; |
| margin: auto; |
| width: 50%; |
| padding: 50px; |
| } |
| |
| .example-3-box-start, |
| .example-4-box-start { |
| animation-duration: 3s; |
| -moz-animation-duration: 3s; |
| -webkit-animation-duration: 3s; |
| -moz-animation-name: anim; |
| animation-name: anim; |
| -webkit-animation-name: anim; |
| animation-iteration-count: infinite; |
| -webkit-animation-iteration-count: infinite; |
| } |
| |
| .example-4-box-start { |
| -moz-animation-name: animHeight; |
| animation-name: animHeight; |
| -webkit-animation-name: animHeight; |
| } |
| |
| #example-3-log, |
| #example-4-log { |
| background-color: white; |
| padding: 2px; |
| margin: 5px; |
| } |
| |
| @keyframes anim { |
| 0% { |
| padding: 50px; |
| width: 50%; |
| background-color: gray; |
| } |
| |
| 50% { |
| padding: 10px; |
| width: 40%; |
| background-color: #806522; |
| } |
| |
| 100% { |
| padding: 50px; |
| width: 50%; |
| background-color: gray; |
| } |
| } |
| |
| @-webkit-keyframes anim { |
| 0% { |
| padding: 50px; |
| width: 50%; |
| background-color: gray; |
| } |
| |
| 50% { |
| padding: 10px; |
| width: 40%; |
| background-color: #806522; |
| } |
| |
| 100% { |
| padding: 50px; |
| width: 50%; |
| background-color: gray; |
| } |
| } |
| |
| @-moz-keyframes anim { |
| 0% { |
| padding: 50px; |
| width: 50%; |
| background-color: gray; |
| } |
| |
| 50% { |
| padding: 10px; |
| width: 40%; |
| background-color: #806522; |
| } |
| |
| 100% { |
| padding: 50px; |
| width: 50%; |
| background-color: gray; |
| } |
| } |
| |
| @keyframes animHeight { |
| 0% { |
| padding: 50px; |
| height: 50%; |
| background-color: gray; |
| } |
| |
| 50% { |
| padding: 10px; |
| height: 40%; |
| background-color: #806522; |
| } |
| |
| 100% { |
| padding: 50px; |
| height: 50%; |
| background-color: gray; |
| } |
| } |
| |
| @-webkit-keyframes animHeight { |
| 0% { |
| padding: 50px; |
| height: 50%; |
| background-color: gray; |
| } |
| |
| 50% { |
| padding: 10px; |
| height: 40%; |
| background-color: #806522; |
| } |
| |
| 100% { |
| padding: 50px; |
| height: 50%; |
| background-color: gray; |
| } |
| } |
| |
| @-moz-keyframes animHeight { |
| 0% { |
| padding: 50px; |
| height: 50%; |
| background-color: gray; |
| } |
| |
| 50% { |
| padding: 10px; |
| height: 40%; |
| background-color: #806522; |
| } |
| |
| 100% { |
| padding: 50px; |
| height: 50%; |
| background-color: gray; |
| } |
| } |
| |
| .dynamicElement { |
| margin: 50px; |
| width: 50px; |
| |
| -moz-animation-name: animHeight; |
| animation-name: animHeight; |
| -webkit-animation-name: animHeight; |
| |
| animation-duration: 3s; |
| -moz-animation-duration: 3s; |
| -webkit-animation-duration: 3s; |
| animation-iteration-count: infinite; |
| -webkit-animation-iteration-count: infinite; |
| |
| display: inline-block; |
| border: 1px solid #eee; |
| background-color: #f9f9f9; |
| } |
| |
| .dynamic { |
| margin: 15px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| Drag the gray line at the right to see it in action. |
| <div class="examples"> |
| <div class="examplesResizerDemos"> |
| <div class="example-1"> |
| <h2>Demo 1</h2> |
| This is content from the first responsive demo without media queries. It uses the element queries provided by this library. |
| </div> |
| </div> |
| <div class="examplesResizerDemos"> |
| <div class="example-2"> |
| <h2>Demo 2</h2> |
| <div class="example-2-box"> |
| Box |
| </div> |
| <div class="example-2-first"> |
| First 1/2 box |
| </div> |
| <div class="example-2-second"> |
| Second 1/2 box |
| </div> |
| <div class="breaker"></div> |
| </div> |
| </div> |
| <div class="examplesResizerDemos"> |
| <div class="example-3"> |
| <h2>Demo 3 - width<button id="startStop3">Start/Stop</button></h2> |
| <div id="example-3-box"> |
| This box is animated through css transitions. |
| We attached a resize-listener to this box. See below. |
| </div> |
| <div id="example-3-log"> |
| No changes. |
| </div> |
| </div> |
| </div> |
| <div class="examplesResizerDemos"> |
| <div class="example-4"> |
| <h2>Demo 4 - height<button id="startStop4">Start/Stop</button></h2> |
| <div id="example-4-box"> |
| This box is animated through css transitions. |
| We attached a resize-listener to this box. See below. |
| </div> |
| <div id="example-4-log"> |
| No changes. |
| </div> |
| </div> |
| </div> |
| |
| <div style="height: 200px"> |
| <div class="examplesResizerDemosXY"> |
| <div id="example-5"> |
| 0 changes |
| </div> |
| </div> |
| </div> |
| <script> |
| 'use strict'; |
| (function(){ |
| var logger = document.id('example-3-log'); |
| var box = document.id('example-3-box'); |
| document.id('startStop3').addEvent('click', function(){ |
| if (box.hasClass('example-3-box-start')) { |
| box.removeClass('example-3-box-start'); |
| } else { |
| box.addClass('example-3-box-start'); |
| } |
| }); |
| new ResizeSensor(box, function(el){ |
| logger.set('html', 'Changed to ' + box.getSize().x+'px width.'); |
| }); |
| })(); |
| </script> |
| <script> |
| 'use strict'; |
| (function(){ |
| var logger = document.id('example-4-log'); |
| var box = document.id('example-4-box'); |
| document.id('startStop4').addEvent('click', function(){ |
| if (box.hasClass('example-4-box-start')) { |
| box.removeClass('example-4-box-start'); |
| } else { |
| box.addClass('example-4-box-start'); |
| } |
| }); |
| new ResizeSensor(box, function(){ |
| logger.set('html', 'Changed to ' + box.getSize().y+'px height.'); |
| }); |
| })(); |
| </script> |
| <script> |
| 'use strict'; |
| (function(){ |
| var box = document.id('example-5'); |
| var changed = 0; |
| new ResizeSensor(box.getParent(), function(){ |
| box.innerHTML = (++changed) + ' changes. ' + box.getParent().getSize().x+'px/'+box.getParent().getSize().y+'px'; |
| }); |
| })(); |
| </script> |
| <div class="dynamic"> |
| <input type="text" value="10" id="dynamicCount" /> |
| <button onclick="addDynamic()">Add</button> |
| <button onclick="detachDynamic()">Detach</button> |
| <button onclick="removeDynamic()">Remove</button> |
| <div id="dynamicCounter"></div> |
| <div id="dynamicContainer"></div> |
| </div> |
| <script> |
| 'use strict'; |
| var container = $('dynamicContainer'); |
| var dynamicCount = $('dynamicCount'); |
| var dynamicCounter = $('dynamicCounter'); |
| |
| window.detachDynamic = function() { |
| container.getChildren().each(function(element) { |
| ResizeSensor.detach(element); |
| }); |
| }; |
| |
| window.removeDynamic = function() { |
| container.empty(); |
| }; |
| |
| window.addDynamic = function() { |
| container.empty(); |
| var i = 0, to = dynamicCount.value, div, counter = 0; |
| for (; i < to; i++) { |
| div = new Element('div', { |
| 'class': 'dynamicElement', |
| text: '#' + i |
| }).inject(container); |
| |
| new ResizeSensor(div, function(){ |
| counter++; |
| dynamicCounter.set('text', counter + ' changes.'); |
| }); |
| } |
| } |
| </script> |
| </div> |
| </body> |