JQuery UI

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:

<script src="http://www.google.com/jsapi"></script>
<script> google.load("jquery",'1.7'); google.load("jqueryui", "1"); </script>
<script src="mutate.events.js"></script>
<script src="mutate.min.js"></script>

$(‘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

$('div.monitor').mutate('height',function (element,info){
    console.log('a div with  has changed it\'s height, the function below should do something about this...');
    $(this).css('background','red');
});

Example 2

$('div.monitor').mutate('height width',function (element,info){
    console.log('a div with  has changed it\'s height and/or width, the function below should do something about this...');
    $(this).css('background','blue');
});

More advanced examples

var iii=0;
var expanded = false;
$('div.monitor').mutate('height width', function(el,info) {
    expanded = true;
    $('#heighter').text('height changed:' + $(el).height());
    $('#widther').text('Width changed:' + $(el).width());
},function (){
    if(expanded === false)
    $('#heighter,#widther').text('width/height have not changed:'+iii++);
});

Valtid Caushi