jQuery Style Listener

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.
Demonstration
Demo
Reset Styles
$('#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);
    }
    
});
Download
Download ~ 2.1 Kb - Last Updated: Jan 6, 2013
Download Minified ~ 1.2 Kb - Last Updated: Jan 6, 2013
GitHub - https://github.com/techfoobar/jquery-style-listener
Usage
Once you've downloaded the file, using it is simple. Steps below :-
  1. Include the script on your page:
    <script src="/path/to/stylelistener.jquery.js"></script>
  2. 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
        
    });
  3. For destroying the instance (and stop polling for changes):
    $('element-selector').styleListener('destroy');
Thanks
Thanks to John Resig for creating jQuery. IMHO, it is as world-changing as a JS library can ever expect to become.
Thanks to google-code-prettify for the super-simple-to-use-and-customize syntax highlighter and for the Vim Sunburst theme.
Thanks to refresh-sf.com for making YUI Compressor available online.
About Me
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.
Blog (very inactive!)  |  StackOverflow  |  LinkedIn  |  Email