-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
138 lines (125 loc) · 6.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery Style Listener - A plugin to notify you of changes to computed style</title>
<link rel="stylesheet" href="prettify/prettify.css">
<link rel="stylesheet" href="demo.css">
</head>
<body onload="prettyPrint()">
<h2 class="main">jQuery <span class="l">S</span><span class="l">t</span><span class="l">y</span><span class="l">l</span><span class="l">e</span> Listener</h2>
<div class="content">
<div class="desc">
<strong>jQuery Style Listener</strong>
is a jQuery plugin that can monitor changes to specified styles in the elements you attach it to.
It periodically polls for changes in the styles you need monitored and notifies you via a callback function.
</div>
<div class="desc">Tested on Firefox, Google Chrome and IE7 (and up). Please note that styles that
are not supported by the browser will not be monitorable. For example: <i>opacity</i> will not be
monitorable on older versions of IE, similarly <i>-moz-..</i> styles will not be monitorable under IE and so on.
If you have any suggestions, comments or if you have found a bug, please send it to <a href="mailto:[email protected]">[email protected]</a></div>
<div class="desc">
Try out the demo below to see it in action. The source for the demo is on the right.
</div>
</div>
<div class="main"><div class="content">Demonstration</div></div>
<div class="content">
<div class="leftpane">
<div id="buttons">
<span>Change: </span>
<a id="visibility">Visibility</a>
<a id="width">Width</a>
<a id="height">Height</a>
<a id="color">Color</a>
<a id="font">Font-Size</a>
</div>
<div id="foo">Demo</div>
<div id="reset">Reset Styles</div>
</div>
<div class="rightpane">
<pre class="prettyprint">$('#foo').styleListener({
// the styles that you want to monitor for changes
styles: ['visibility', 'width', 'height', 'color', 'font-size'],
// function to be called when a monitored style changes
changed: function(style, newValue, oldValue, element) {
alert(style + ' changed from ' + oldValue + ' to ' + newValue);
}
});</pre>
</div>
<div class="clear"></div>
</div>
<div class="main contd"><div class="content">Download</div></div>
<div class="content">
<div class="desc">
<a href="stylelistener.jquery.js">Download</a> ~ 2.1 Kb - <i>Last Updated: Jan 6, 2013</i><br>
<a href="stylelistener.jquery.min.js">Download Minified</a> ~ 1.2 Kb - <i>Last Updated: Jan 6, 2013</i><br>
GitHub - <a href="https://github.com/techfoobar/jquery-style-listener">https://github.com/techfoobar/jquery-style-listener</a>
</div>
</div>
<div class="main contd"><div class="content">Usage</div></div>
<div class="content">
<div class="desc">Once you've downloaded the file, using it is simple. Steps below :-</div>
<ol class="desc">
<li>Include the script on your page:<br>
<pre class="prettyprint full"><script src="/path/to/stylelistener.jquery.js"></script></pre>
</li>
<li>Attach it to the elements whose styles you want monitored:<br>
<pre class="prettyprint full">
// jquery selector for your element(s)
// example: "#foo", ".bar", ".bar1, .bar2" etc..
$('element-selector').styleListener({
// the styles that you want to monitor for changes as an array of strings
// example: ['visibility', 'width', 'height', 'color', 'font-size']
styles: [ ... ],
// function to be called when a monitored style changes
changed: function(style, newValue, oldValue, element) {
// ... your code ...
},
// optional - the poll interval (default is 250ms)
interval: 1000 // poll once every second
});</pre>
</li>
<li>For destroying the instance (and stop polling for changes):<br>
<pre class="prettyprint full">$('element-selector').styleListener('destroy');</pre>
</li>
</ol>
</div>
<div class="main contd"><div class="content">Thanks</div></div>
<div class="content">
<div class="desc">
Thanks to <a href="http://ejohn.org/">John Resig</a> for creating <a href="http://jquery.com/">jQuery</a>. IMHO, it is as world-changing as a JS library can ever expect to become.<br>
Thanks to <a href="https://code.google.com/p/google-code-prettify/">google-code-prettify</a> for the super-simple-to-use-and-customize syntax highlighter and for the Vim Sunburst theme.<br>
Thanks to <a href="http://refresh-sf.com/yui/">refresh-sf.com</a> for making <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a> available online.</div>
</div>
<div class="main contd"><div class="content">About Me</div></div>
<div class="content">
<div class="desc">
I am Vijayakrishnan Krishnan. My main area of interest is JavaScript, jQuery, CSS and the awesome things we can achieve with them in combo. I currently work at <a href="http://devicedriven.com">DeviceDriven</a> with an amazing team of
engineers covering JS, CSS on the user side to Groovy on Grails, Spring and Hibernate on the server side.
</div>
<div class="desc">
<a href="http://www.techfoobar.com/about-me">Blog (very inactive!)</a>
|
<a href="http://stackoverflow.com/users/921204/techfoobar">StackOverflow</a>
|
<a href="http://www.linkedin.com/in/vjeleven">LinkedIn</a>
|
<a href="mailto:[email protected]">Email</a>
</div>
</div>
<script src="jquery.js"></script>
<script src="prettify/prettify.js"></script>
<script src="stylelistener.jquery.min.js"></script>
<script src="demo.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26067530-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>