<!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>