Skip to content

Commit ff1ae4d

Browse files
author
marcj
committed
Added new demos.
1 parent 863d994 commit ff1ae4d

File tree

8 files changed

+1167
-5
lines changed

8 files changed

+1167
-5
lines changed

‎index.html

Lines changed: 210 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,146 @@
77

88
<link rel="stylesheet" href="stylesheets/styles.css">
99
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
10+
<link rel="stylesheet" href="stylesheets/resizerDemo.css">
1011
<script src="javascripts/scale.fix.js"></script>
12+
<script src="javascripts/mootools-core-1.4.5-full-nocompat-yc.js"></script>
13+
<script src="javascripts/mootools-more-1.4.0.1.js"></script>
14+
<script src="javascripts/ResizerDemo.js"></script>
15+
<script src="javascripts/ResizeSensor.js"></script>
16+
<script src="javascripts/ElementQueries.js"></script>
17+
1118
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
1219
<!--[if lt IE 9]>
1320
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1421
<![endif]-->
22+
<script>
23+
window.addEvent('domready', function(){
24+
$$('.examplesResizerDemos').each(function(resizer){
25+
new ResizerDemo(resizer);
26+
});
27+
});
28+
</script>
29+
<style type="text/css">
30+
.example-1 {
31+
max-width: 400px;
32+
border: 1px solid silver;
33+
background-color: #eee;
34+
margin: auto;
35+
padding: 50px;
36+
text-align: center;
37+
min-width: 120px;
38+
transition:all .2s ease;
39+
}
40+
41+
.example-1[max-width~="400px"] {
42+
padding: 5px;
43+
}
44+
45+
.example-1[max-width~="200px"] {
46+
text-align: left;
47+
font-size: 12px;
48+
}
49+
50+
.example-2 {
51+
border: 1px solid silver;
52+
margin: 25px;
53+
background-color: #eee;
54+
}
55+
56+
.example-2-first,
57+
.example-2-second {
58+
background-color: black;
59+
color: white;
60+
padding: 2px;
61+
width: 45%;
62+
margin: 5px;
63+
float: left;
64+
}
65+
66+
.example-2-second {
67+
float: right;
68+
}
69+
70+
.example-2-box {
71+
background-color: gray;
72+
color: white;
73+
margin: 5px;
74+
padding: 2px;
75+
}
76+
77+
.example-2[max-width~="300px"] .example-2-first,
78+
.example-2[max-width~="300px"] .example-2-second {
79+
float: none;
80+
background-color: #4186ff;
81+
width: auto;
82+
}
83+
84+
.example-2[max-width~="350px"] .example-2-box {
85+
background-color: #ba9196;
86+
}
87+
88+
.example-2[max-width~="300px"] .example-2-box {
89+
background-color: #ba6377;
90+
}
91+
92+
.example-2[max-width~="200px"] .example-2-box {
93+
background-color: #ba4349;
94+
}
95+
96+
.example-2[max-width~="100px"] .example-2-box {
97+
background-color: #ba000d;
98+
}
99+
100+
.example-3 {
101+
border: 1px solid silver;
102+
margin: 25px;
103+
background-color: #eee;
104+
}
105+
106+
#example-3-box {
107+
background-color: gray;
108+
color: white;
109+
margin: auto;
110+
width: 50%;
111+
padding: 50px;
112+
}
113+
114+
.example-3-box-start {
115+
animation-duration: 3s;
116+
-moz-animation-duration: 3s;
117+
-webkit-animation-duration: 3s;
118+
-moz-animation-name: anim;
119+
-webkit-animation-name: anim;
120+
-webkit-animation-iteration-count: infinite;
121+
}
122+
123+
#example-3-log {
124+
background-color: white;
125+
padding: 2px;
126+
margin: 5px;
127+
}
128+
129+
@-webkit-keyframes anim {
130+
0% {
131+
padding: 50px;
132+
width: 50%;
133+
background-color: gray;
134+
}
135+
136+
50% {
137+
padding: 10px;
138+
width: 40%;
139+
background-color: #806522;
140+
}
141+
142+
100% {
143+
padding: 50px;
144+
width: 50%;
145+
background-color: gray;
146+
}
147+
}
148+
149+
</style>
15150
</head>
16151
<body>
17152
<div class="wrapper">
@@ -46,9 +181,63 @@ <h1>
46181
<li>
47182
<code>min-width</code>, <code>min-height</code>, <code>max-width</code> and <code>max-height</code> are yet supported.</li>
48183
<li>It works for actual all layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (parent changes too), pseudo classes (:hover etc), window resizes, etc.</li>
49-
</ul><h2>
50-
<a name="example" class="anchor" href="#example"><span class="octicon octicon-link"></span></a>Example</h2>
184+
</ul>
185+
186+
<h2><a name="example" class="anchor" href="#example"><span class="octicon octicon-link"></span></a>Examples</h2>
51187

188+
Drag the gray line at the right to see it in action.
189+
<div class="examples">
190+
<div class="examplesResizerDemos">
191+
<div class="example-1">
192+
<h2>Demo 1</h2>
193+
This is content from the first responsive demo without media queries. It uses the element queries provides by this library.
194+
</div>
195+
</div>
196+
<div class="examplesResizerDemos">
197+
<div class="example-2">
198+
<h2>Demo 2</h2>
199+
<div class="example-2-box">
200+
Box
201+
</div>
202+
<div class="example-2-first">
203+
First 1/2 box
204+
</div>
205+
<div class="example-2-second">
206+
Second 1/2 box
207+
</div>
208+
<div class="breaker"></div>
209+
</div>
210+
</div>
211+
<div class="examplesResizerDemos">
212+
<div class="example-3">
213+
<h2>Demo 3 <button id="startStop3">Start/Stop</button></h2>
214+
<div id="example-3-box">
215+
This box is animated through css transitions.
216+
We attached a resize-listener to this box. See below.
217+
</div>
218+
<div id="example-3-log">
219+
No changes.
220+
</div>
221+
</div>
222+
</div>
223+
224+
<script>
225+
var logger = document.id('example-3-log');
226+
var box = document.id('example-3-box');
227+
document.id('startStop3').addEvent('click', function(){
228+
if (box.hasClass('example-3-box-start')) {
229+
box.removeClass('example-3-box-start');
230+
} else {
231+
box.addClass('example-3-box-start');
232+
}
233+
});
234+
new ResizeSensor(box, function(el){
235+
logger.set('html', 'Changed to ' + box.getSize().x+'px width.');
236+
});
237+
</script>
238+
</div>
239+
240+
<h3>Example CSS</h3>
52241
<div class="highlight highlight-css"><pre><span class="nc">.widget-name</span> <span class="p">{</span>
53242
<span class="k">padding</span><span class="o">:</span> <span class="m">25px</span><span class="p">;</span>
54243
<span class="p">}</span>
@@ -82,13 +271,30 @@ <h1>
82271
<div class="highlight highlight-html"><pre><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/ElementQueries.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
83272
</pre></div>
84273

85-
<p>Info: This is a first very experimental version! You should not use it yet.</p>
274+
<h2>
275+
<a name="api" class="anchor" href="#api"><span class="octicon octicon-link"></span></a>API</h2>
276+
<div class="highlight highlight-html"><pre>
277+
Class ElementQueries()
278+
-> init() // Scans all css rules and attach the event listener
279+
280+
Class ResizeSensor(element, callback)
281+
</pre>
282+
</div>
283+
284+
ResizeSensor is compatible with mootools Elements and jQuery.
285+
<div class="highlight highlight-html"><pre>
286+
new ResizeSensor(jQuery('p'), callback);
287+
new ResizeSensor($$('div'), callback);
288+
new ResizeSensor(document.querySelectorAll('p'), callback);
289+
</pre>
290+
</div>
291+
86292

87293
<h2>
88294
<a name="issues" class="anchor" href="#issues"><span class="octicon octicon-link"></span></a>Issues</h2>
89295

90296
<ul>
91-
<li>Does not work on <code>img</code> tags. A wrapper <code>div</code> around it works fine. See the demo.</li>
297+
<li>Does not work on <code>img</code> tags. A wrapper <code>div</code> around it works fine. See example CSS.</li>
92298
<li>Adds in non-internet-explorer browsers a additional hidden element into the selected target element. Forces the target element to be relative or absolute.</li>
93299
</ul>
94300
</section>
@@ -97,6 +303,5 @@ <h2>
97303
</footer>
98304
</div>
99305
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
100-
101306
</body>
102307
</html>

0 commit comments

Comments
 (0)