jQuery mutate official

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++);
});
  • http://www.pheragon.com Dio

    What do your callback function parameters stands for ?
    For e.g:
    $(‘#content’).mutate(‘height’ ,function (el, info){
    //what is ?
    //what is ?
    });

    • http://www.jqui.net/members/valtid-caushi/ Valtid Caushi

      el is the element that triggered the change, it may be useful when u dont want to use a selector, info well its a object that has other information about the element and the event itself.

      I you are using google chrome use console.log(el,info) you can then inspect what they are.

  • http://www.pheragon.com Dio

    I’m using your mutate() function to watch out for ‘height’ change. Upon detecting ‘height’ change, I’ll adjust the ‘height’ a bit.

    Is there a way to avoid infinite loop for this mutate() function ?

    my code:

    $(‘#content’).mutate(‘height’, function(){
    adjustContentHeight(); //this cause infinite loop;
    });

    • http://www.jqui.net/members/valtid-caushi/ Valtid Caushi

      You should not change your height of the element you are watching, that would cause infinite loop, but maybe use a wrapper, but mutate looks for changes, or mutations but i suppose you can use an if statement if the height is as previous do not run the function.

      • http://www.pheragon.com Dio

        Let’s me update you later, I’ll do a if…then check .

  • Pingback: Javascript Mutation Events « Burim Shala