Skip to content

Commit 1dbfcb0

Browse files
committedDec 31, 2013
Update README.md
1 parent 7899202 commit 1dbfcb0

File tree

1 file changed

+86
-1
lines changed

1 file changed

+86
-1
lines changed
 

‎README.md

+86-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,89 @@
11
javascript-detect-element-resize
22
================================
33

4-
A Cross-Browser, Event-based, Element Resize Detection
4+
A Cross-Browser, Event-based, Element Resize Detection.
5+
6+
In short, this implementation does NOT use an internal timer to detect size changes (as most implementations I found).
7+
8+
About the libraries
9+
===================
10+
I was searching for a library that allowed me to detect when an DOM element changes size, and all solutions I found had two problems:
11+
12+
1. only available as jQuery libraries (so no standalone Javascript)
13+
2. all had terrible performance (because all of them use timers to intermittently poll the size of the elements to detect a change).
14+
15+
Then I came across this [great post][1] on [Back Alley Coder][3] about using [overflow and underflow events][2] to do event-based element resize detection; and it works great without consuming resources at all (just like any other browser originated event).
16+
17+
The libraries on this repository are just a concrete implementation of that technique.
18+
19+
Libraries
20+
=========
21+
22+
Pure Javascript library usage
23+
-----------------------------
24+
25+
```html
26+
<script type="text/javascript" src="detect-element-resize.js"></script>
27+
<script type="text/javascript">
28+
var resizeElement = document.getElementById('resizeElement'),
29+
resizeCallback = function() {
30+
/* do something */
31+
};
32+
addResizeListener(resizeElement, resizeCallback);
33+
removeResizeListener(resizeElement, resizeCallback);
34+
</script>
35+
```
36+
37+
jQuery plugin library usage
38+
---------------------------
39+
```html
40+
<script type="text/javascript" src="jquery.js"></script>
41+
<script type="text/javascript" src="jquery.resize.js"></script>
42+
<script type="text/javascript">
43+
$('#resizeElement').resize(function() {
44+
/* do something */
45+
});
46+
</script>
47+
```
48+
49+
Compatibility
50+
-------------
51+
Works great on:
52+
53+
- Chrome
54+
- Firefox
55+
- IE 9
56+
57+
Doesn't work on:
58+
59+
- IE 7
60+
- IE 8
61+
62+
TODO
63+
====
64+
65+
- Create minified version of the libraries.
66+
- Add support to IE7/8 (totally feasible, just need to update the code and test it properly).
67+
- Add support for standard jQuery bind method on 'resize' event.
68+
69+
70+
References
71+
==========
72+
73+
Similar libraries (but they use timers)
74+
---------------------------------------
75+
[jQuery-mutate](http://www.jqui.net/jquery-projects/jquery-mutate-official/)
76+
77+
[jQuery-resize-plugin](http://benalman.com/projects/jquery-resize-plugin/)
78+
79+
80+
Don't get me wrong, these are great libraries and work as advertised, it's just that they are not easy on browser resources.
81+
82+
External links
83+
--------------
84+
[Back Alley Coder: Cross-Browser, Event-based, Element Resize Detection][1]
85+
[Back Alley Coder: Overflow and Underflow Events][2]
86+
87+
[1]: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
88+
[2]: http://www.backalleycoder.com/2013/03/14/oft-overlooked-overflow-and-underflow-events/
89+
[3]: http://www.backalleycoder.com/

0 commit comments

Comments
 (0)
Please sign in to comment.