This little script is an amazing addition to your jQuery library

Keep checking this page, and I will be updating it or write a comment if you should require a specific mutation for it, if you have the code even better but no need just describe what you wish it to do :) I should extend the events.

Download version 1.0

http://www.jqui.net/demo/mutate/mutate-1.0.zip
https://github.com/jqui-dot-net/jQuery-mutate
 

Demo

See demo here.

http://www.jqui.net/demo/mutate/

How to:

$(‘selector’).mutate({event/s},{callback}[,{false_callback}]);

  • event - as listed below a name of the event or a list of events space seperated.
  • callback - a callback function when statement is true,
  • false_callback - a callback function when statement is false, this is optional, and for advanced users, should not be used if you can’t understand it :)

Current Supported events: Version 1.0

Please note: that all the following functions are triggered only once each time it changes it’s value.

  • width – Detects if the width has changed or not, if width has changed it will trigger callback function.
  • height – Detects if the height has changed or not, if height has changed it will trigger callback function
  • top – detects if the css top value has changed then it will trigger the callback function
  • right – detects if the css right value has changed then it will trigger the callback function
  • left – detects if the css left value has changed then it will trigger the callback function
  • bottom – detects if the css bottom value has changed then it will trigger the callback function
  • hide – uses the jQuery is(':hidden') function to detect weather the element is hidden or not then callback function is triggered
  • show –  uses the jQuery is(':visible') function to detect weather the element is hidden or not then callback function is triggered
  • scrollHeight – detects weather the available scroll height of an element has changed, if change detected callback function is triggered.
  • scrollWidth – detects weather the available scroll width of an element has changed, if change detected callback function is triggered.
  • scrollTop – if $.scrollTop() has changed position aka element scrolled up or down – vertical scroll detection, callback function triggered.
  • scrollLeft – if $.scrollLeft() has changed position aka element scrolled left or right – horizonal scroll detection, callback function triggered.

At the moment this is all I have time for, the functions can be extended very easy, to support other things you may need to, using the mutate_event_stack variable/array to add more events to the library.

  1. All events are capable to support elements that are added dynamically in the future, e.g. ajax calls, or when a new element is added to the DOM.
  2. All events are capable to support multiple events as you would with .live() and .on() functions.

Examples

Example 1

Example 2

More advanced examples