meetselva / attrchange Goto Github PK
View Code? Open in Web Editor NEWonattrchange listener
License: GNU General Public License v3.0
onattrchange listener
License: GNU General Public License v3.0
if the container append images by dynamic, does not work
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?
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.
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!
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 ?
Please, provide bower package for your project. Thanks!
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.
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,
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
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
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
Hi,
I modified attrchange to observe changes of characterData and childList. Are you interested to include it to your plugin?
Greetz,
milchmann
gulp-concat
~
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 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
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) {
}
});
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.
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?
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'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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.