jQuery Style Listener
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.
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:
opacity will not be
monitorable on older versions of IE, similarly
-moz-.. 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
vjeleven@gmail.com
Try out the demo below to see it in action. The source for the demo is on the right.
$('#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);
}
});
Once you've downloaded the file, using it is simple. Steps below :-
- Include the script on your page:
<script src="/path/to/stylelistener.jquery.js"></script>
- Attach it to the elements whose styles you want monitored:
// 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
});
- For destroying the instance (and stop polling for changes):
$('element-selector').styleListener('destroy');
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
DeviceDriven with an amazing team of
engineers covering JS, CSS on the user side to Groovy on Grails, Spring and Hibernate on the server side.