meetselva / attrchange Goto Github PK

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 ');
            });
        };

Hi,

maybe you know advertising, that fills the body's background with a custom color. I want to prevent this and attrchange seems to be awesome! The problem is, that it's not available before the document is loaded. But the background is filled with a color before.

Is it possible to build a prototype version or anything, that does not require jQuery, so I can use attrchange earlier?

Element.prototype.meetselva_attrchange = function( callback ) {
    ...
}

Then I could use it without jQuery on the body element.

I know the downsides of prototyping, but don't have any other idea therefore. I'm interested in work with you but I don't get it alone.

Kind regards,
Patrick

Hi,

It seems that this plugin is not compatible with jQuery UI (Combined Library) 1.11.3. I get a run time error about resizable() in this line:

$(function () { $('#divSelector').attrchange({ callback: function (e) { BuildBox(); } }).resizable(); });

I dont remember the exact error message as I have rolled back to version 1.11.2. But If I look in the change log of the version 1.11.3: http://jqueryui.com/changelog/1.11.3/

I see the following:

Resizable
Fixed: Correct width when grid approaches zero (#10590, 0a0db09)
Fixed: Match on exact node name to support custom elements (#10748, 7ff9b28)

Could this be the cause of the run time error?

What I might be doing wrong.

I imported both attrchange.js & attrchange_ext.js

I have some dynamically created elements by third party scripts and I want to modify and/or remove attributes from them.

But it seems that this plugin can't intercept those elements, am I right?

Investigate: Event is triggered twice in jQuery 1.11, thus executing the callback function twice. The issue is reproducible in demo page, where the logger is written twice on every click.

gulp-concat ~

Hi meetselva,
first of all: Thanks for your fabulous script! I have an issue though which seems odd to me; I use your script to fetch changes in a class within a slider (in an active/non-active manner). I use this information to trigger the background color of a corresponding button for each slide. All works perfect in all my browsers - but it fails completely on my mobile phone (based on newest Android). Specifically it seems that the complete "callback: function (e) {" part does not work (I tried with if else and never accomplished anything, it's totally ignored). All my other scripts work perfectly on my phone. Can you give me a hint? Here's my code:

$('.cycle-slide').attrchange({
    trackValues: true, 
    callback: function (e) {
        if((e.attributeName == "class")&&($(this).index() == "1")){
            var pattern = /cycle-slide-active/;
            var exists = pattern.test(e.newValue);
            if(exists){ $('#li1').css('background-color', '#3A0B2F');}
            else {$('#li1').css('background-color', '#C0A576');}
        }
        else if((e.attributeName == "class")&&($(this).index() == "2")){
            var pattern = /cycle-slide-active/;
            var exists = pattern.test(e.newValue);
            if(exists){ $('#li2').css('background-color', '#3A0B2F');}
            else {$('#li2').css('background-color', '#C0A576');}
        }
    }
})

Thanks in advance!

Kind regards, Michael

I ran across this issue the other day. You check for 'onpropertychange' at line 113 but then attach the listener to the 'propertychange' property. I had to change line 114 to say 'onpropertychange' to resolve this issue in IE 11. This obviously isn't backwards compatible but I did want to make sure this issue was known.

I found this useful helper function on StackOverflow a week ago, great work on it :)

My question is, what would you think about licensing this helper as MIT/GPL dual license? This would improve the compatibility of AttrChange with other licences substantially.

else if (isDOMAttrModifiedSupported()) { //Opera
//Good old Mutation Events but the performance is no good
//http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
return this.on('DOMAttrModified', function(event) {
if (event.originalEvent) event = event.originalEvent; //jQuery normalization is not required for us
event.attributeName = event.attrName; //property names to be consistent with MutationObserver
event.oldValue = event.prevValue; //property names to be consistent with MutationObserver
cfg.callback.call(this, event);
});
}

This function made never ending loop in IE9-10. Is there any way to fix this ?

I'm trying to use this to detect changes to a submit button element's "disabled" attribute, but it doesn't seem to be working. The callback fires on change, but event.oldValue is always null and event.newValue is always undefined. The workaround is to get the actual attribute value using $(selector).attr('disabled') within the callback. Can you fix this bug so event.oldValue and event.newValue return correct values for the "disabled" attribute?

I have a layout with some nested elements

<div id="parent-element">
    <div class="child-element">
        Foo
    </div>
</div>

If I watch the parent and then modify the child's position, in IE 9 and 10 the child update seems to be bubbling up to the parent which fires the event again. This causes an infinite loop that results in no javascript working on the page.

$(document).ready(function () {
    $("#parent-element").attrchange({
        callback: function(e) {
            $("#parent-element > .child-element").css({
                top: "+=" + 100
            });
        }
    });
});

I've tried using the disconnect/reconnect methods and they work fine in web standards compliant browsers, but they are ignored in the older IE.

$(document).ready(function () {
    $("#parent-element").attrchange({
        callback: function(e) {
            var that = $(e.target);
            that.attrchange('disconnect');
            $("#parent-element > .child-element").css({
                top: "+=" + 100
            });
            that.attrchange('reconnect');
        }
    });
});

Any ideas on how to get IE to either not bubble up into an infinate loop or perhaps disable the event from re-firing. I think I have the disconnect/reconnect syntax correct, but maybe not.

if the container append images by dynamic, does not work

Hi,
May I know what's wrong in the following code snippet?
http://jsfiddle.net/nachikethashu/tr307kcr/3/

Basically I have a div with following css:
resize: both;
overflow: auto;

And I'm trying to listen to height changes with following snippet
$('#test').attrchange({
callback: function (e) {
$('#logger').text('height changed to ' + $(this).height());
}
});

Hi,
Thanks for the plugin, I'm using it to track changes of a class on menu items (.active), which are fired by Foundation's Magellan plugin http://foundation.zurb.com/docs/components/magellan.html

For some reason it isnt listening to the first li item's changes. I think it has something to do with the fact it seems to add 'class' to the non active ones on mouse move, and 'class="active"' on the one which is in view. I think this has something to do with it because the elements are still being changed.

This is my code (it also changes some values on a counter).

$('#menu-2005').attrchange({
callback: function (event) {
$(".number1").html('0');
$(".number2").html('0');
$(".number3").html('2');
$('.staff-counter').css("left", "0");
}
});
$('#menu-2006').attrchange({
callback: function (event) {
$(".number1").html('0');
$(".number2").html('0');
$(".number3").html('4');
var counterMenuPosition = $(this).position();
$('.staff-counter').css("left", counterMenuPosition.left);
}
});

Is there anyway I can just listen to see if a specific class has been applied to a specific li? Ideally something like
if ($('#menu-2005').hasClass('active')) {
$(".number1").html('0');
$(".number2").html('0');
$(".number3").html('2');
$('.staff-counter').css("left", "0");
});

Any help would be greatly appreciated.
Cheers
Dan

Please, provide bower package for your project. Thanks!

Hi,

$(document.ready(function () {
      $("#widgets_tipstore").attrchange( {trackValues: true, callback: function (e) {
            if (e.attributeName == 'visibility') {
                alert('Debug-mode : tipstore visibility has changed to ['.$(this).css('visibility')+']');
                setcontent_width();
            } else alert('Debug-mode : tipstore attribute (' + e.attributeName + ') has changed to [' + $(this).css( e.attributeName)+']');
            // end : alert for test todo clear code
        }});
});

The script is well loaded and no error on function, but I don't get "visibility" and don't run the wished function "setcontent_width();"
The content of a text is moved to keep shown entirely when a lateral board is shown : switch visibility.

Is there an error ?

Best regards

Trebly

Note 1 : As the script for _ext is loaded separately I embedded it into a jq block
Note 2 : At start I get once a lot of messages for empty attributeName with value "undefined". Later when 'visibility' is changed I don't get anything.

Apparently, there is no way to contact you through github, stackoverflow, or email, so I guess the only appropriate way to do so is through this.

On https://meetselva.github.io/attrchange/ the very first link needs to be changed from
https://github.com/meetselva/attrchange/blob/master/attrchange.js
to
https://github.com/meetselva/attrchange/blob/master/js/attrchange.js

Hi,
I modified attrchange to observe changes of characterData and childList. Are you interested to include it to your plugin?

Greetz,
milchmann

I am using the plugin to monitor my body tag if it gets a style="margin-top: 20px" attribute added to it. My code is as follows:

$('body').attrchange({
    trackValues: false, callback: function(e) {
    setHeroSize();
  }
});

It's never called even though the style attribute gets changed

Thank you for this great plugin! It works great on elements that are already on the page, but I have a need to capture style changes of elements that are dynamically generated. I am not very familiar with jQuery and am having trouble fitting your plugin in with some type of $("body").on() setup. Any help would be greatly appreciated.

Thank you!