Question

[needle2k]

Thank you for this great Work, it really helped me alot !!!
Keep up the great work.
btw. if it´s included in another plugin to observe a change.
how do i use:

   trackValues: true, 
   callback: function (event) { 
   ............
   }

from within another plugin.

---

if (settings.observeLightBoxOpen === true) {
            $('#' + settings.lightBoxOpenSelector).attrchange(function(attrName) {
                trackValues: true,         // <--- fails
                callback: function(e) {   //  <--- fails
                    if (e.newValue === 'block') {
                        console.log('Attribute: ' + attrName + ' modified ');
                        mouseEvent = true;
                    } else {
                        console.log('Attribute: ' + attrName + ' not modified ');
                        mouseEvent = false;
                    };
                };
                console.log('Attribute: ' + attrName + ' modified ');
            });
        };

[Selvakumar Arumugam]

Ok, I think you mixed up the old and new syntax.

Below is old syntax which accepts function arg,

attrchange(function (attrName) {

The new syntax is,

    $(selector).attrchange({
    trackValues: true, /* Default to false, if set to true the event object is 
                updated with old and new value.*/
    callback: function (event) { 
        //event               - event object
        //event.attributeName - Name of the attribute modified
        //event.oldValue      - Previous value of the modified attribute
        //event.newValue      - New value of the modified attribute
        //Triggered when the selected elements attribute is added/updated/removed
    }        
    });

You can check out the demo and documentation http://meetselva.github.com/attrchange/

Note: $(selector).attrchange({ accepts an object. Even though the plugin does support the function arg for backward compatibility, it is recommended to use the new syntax.

Modify your code like below and give it a try,

     if (settings.observeLightBoxOpen === true) {
            $('#' + settings.lightBoxOpenSelector).attrchange({ //removed the function
                trackValues: true,        
                callback: function(e) {   //  This is the handler function
                    if (e.newValue === 'block') {
                        console.log('Attribute: ' + e.attributeName  + ' modified ');
                        mouseEvent = true;
                    } else {
                        console.log('Attribute: ' + e.attributeName + ' not modified ');
                        mouseEvent = false;
                    };                   
                };                
            });
        };

[needle2k]

i´ll give it a try !

Thank you

[Selvakumar Arumugam]

Let me know if it worked for you.

[needle2k]

Hi,
not really works on fetching it with your code, it logs that "display : none " (e.oldValue) has changed but i cannot fetch the new attribute with "e.newValue" -> "display: block"

        if (settings.observeLightBoxOpen === true) {

            $('#' + settings.lightBoxOpenSelector).attrchange({ //removed the function
                trackValues: true,        
                callback: function(e) {   //  This is the handler function
            console.log('Attribute: ' + e.attributeName + ' ' + e.oldValue + ' ' + e.attributeName + ' ' + e.newValue + ' changed ');
                    if (e.newValue === 'block') {
                            console.log('Attribute: ' + e.attributeName + ' ' + e.oldValue + ' ' + e.attributeName + ' ' + e.newValue + ' modified');

                        } else {
                            console.log('Attribute: ' + e.attributeName + ' ' + e.oldValue + ' ' + e.attributeName + ' ' + e.newValue + ' modified');

                        };                   
                    }
                });

still using the old way (works):

if (settings.observeLightBoxOpen === true) {
      $('#' + settings.lightBoxOpenSelector).attrchange(function(attrName) {
      var currentDisplay = $('#' + settings.lightBoxOpenSelector).css('display');
      if ( currentDisplay === 'block') {
          mouseEvent = true;
        } else {
          mouseEvent = false;
        }
      });
    }

it polls the output multiple time too

demo http://techniques.tk/