Skip to content

Commit 4bce76b

Browse files
author
Marc J. Schmidt
committed
Added responsive image demo. Fires the magic now at load event.
1 parent 67222ff commit 4bce76b

File tree

6 files changed

+61
-16
lines changed

6 files changed

+61
-16
lines changed

‎README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,23 @@ Example
2626
.widget-name[min-width="500px"] {
2727
padding: 55px;
2828
}
29+
30+
/* responsive images /*
31+
.responsive-image img {
32+
width: 100%;
33+
}
34+
35+
.responsive-image[max-width^='400px'] img {
36+
content: url(demo/image-400px.jpg);
37+
}
38+
39+
.responsive-image[max-width^='1000px'] img {
40+
content: url(demo/image-1000px.jpg);
41+
}
42+
43+
.responsive-image[min-width$='1000px'] img {
44+
content: url(demo/image-full.jpg);
45+
}
2946
```
3047
3148
Include then the javascript file at the bottom and you're good to go. No custom javascript calls needed.
@@ -35,3 +52,10 @@ Include then the javascript file at the bottom and you're good to go. No custom
3552
```
3653
3754
Info: This is a first very experimental version! You should not use it yet.
55+
56+
57+
Issues
58+
------
59+
60+
- Does not work on `img` tags. A wrapper `div` around it works fine. See the demo.
61+
- Adds in non-internet-explorer browsers a additional hidden element into the selected target element. Forces the target element to be relative or absolute.

‎demo.html

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,8 @@
99
font-size: 12px;
1010
}
1111

12-
.panel {
13-
background-color: #eee;
14-
}
15-
16-
.panel:hover {
17-
padding: 0 150px;
18-
}
19-
2012
.widget-1 {
2113
border: 1px solid silver;
22-
margin: 50px;
2314
padding: 50px;
2415
}
2516

@@ -38,25 +29,47 @@
3829
padding: 5px 300px;
3930
border: 1px solid red;
4031
}
32+
33+
.responsive-image img {
34+
width: 100%;
35+
}
36+
37+
.responsive-image[max-width^='400px'] img {
38+
content: url(demo/image-400px.jpg);
39+
}
40+
41+
.responsive-image[max-width^='1000px'] img {
42+
content: url(demo/image-1000px.jpg);
43+
}
44+
45+
.responsive-image[min-width$='1000px'] img {
46+
content: url(demo/image-full.jpg);
47+
}
4148
</style>
4249
</head>
4350
<body>
4451
<div class="panel">
4552
<div class="widget-1">
4653
<h2>Widget #1</h2>
47-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
54+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
4855
sed diam nonumy eirmod tempor invidunt ut labore et dolore
4956
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
5057
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
51-
no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
58+
no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
59+
<p>
5260
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
5361
sed diam nonumy eirmod tempor invidunt ut labore et dolore
5462
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
5563
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
5664
no sea takimata sanctus est Lorem ipsum dolor sit amet.
65+
</p>
5766
</div>
5867
</div>
5968

69+
<div class="responsive-image">
70+
<img src="demo/image-400px.jpg" />
71+
</div>
72+
6073
<script src="src/ElementQueries.js"></script>
6174
</body>
6275
</html>

‎demo/image-1000px.jpg

275 KB
Loading

‎demo/image-400px.jpg

66.4 KB
Loading

‎demo/image-full.jpg

1.35 MB
Loading

‎src/ElementQueries.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,9 @@
200200
}
201201

202202
var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];
203+
203204
/**
204-
* Extracts the computed width/height and sets to min/max
205+
* Extracts the computed width/height and sets to min/max- attribute.
205206
*/
206207
this.call = function() {
207208
// extract current dimensions
@@ -274,7 +275,7 @@
274275
}
275276
}
276277

277-
var regex = /,*([^,]*)\[[\s\t]*(min|max)-(width|height)[\s\t]*~?=[\s\t]*"([^"]*)"[\s\t]*]/;
278+
var regex = /,*([^,]*)\[[\s\t]*(min|max)-(width|height)[\s\t]*[~$\^]?=[\s\t]*"([^"]*)"[\s\t]*]/;
278279
/**
279280
* @param {CssRule} rule
280281
*/
@@ -309,7 +310,14 @@
309310
}
310311
}
311312

312-
//for debugging purposes.
313-
//TODO, add onload/domready etc.
314-
new ElementQueries().init();
313+
function init(){
314+
new ElementQueries().init();
315+
}
316+
317+
if (window.addEventListener){
318+
window.addEventListener('load',init,false);
319+
} else {
320+
window.attachEvent('onload',init);
321+
}
322+
315323
})();

0 commit comments

Comments
 (0)