let say have element like this
<div class="watch-me" style="display: none;">Watch Me Please</div>
as we can see the element above style is display: none
, how can i make script to watch this element. when that element style is change to display: block
then there is some code will be trigger.
many thanks...
$(this) is a jQuery wrapper around that element that enables usage of jQuery methods. jQuery calls the callback using apply() to bind this . Calling jQuery a second time (which is a mistake) on the result of $(this) returns an new jQuery object based on the same selector as the first one.
jQuery events have attributes such as for keyup and keydown events, if the Ctrl key was pressed, timestamp when the event created, etc. Set to true if the Alt key was pressed when the event was triggered, false if not.
As far as I know, the only way to do this would be with a timer.
I created a small jQuery plugin (yes, right here, right now) that does this against a jQuery set:
EDIT this plugin is now on GitHub: https://github.com/jacobrelkin/jquery-watcher
$.fn.watch = function(property, callback) {
return $(this).each(function() {
var self = this;
var old_property_val = this[property];
var timer;
function watch() {
if($(self).data(property + '-watch-abort') == true) {
timer = clearInterval(timer);
$(self).data(property + '-watch-abort', null);
return;
}
if(self[property] != old_property_val) {
old_property_val = self[property];
callback.call(self);
}
}
timer = setInterval(watch, 700);
});
};
$.fn.unwatch = function(property) {
return $(this).each(function() {
$(this).data(property + '-watch-abort', true);
});
};
Usage:
$('.watch-me').watch('style', function() {
//"this" in this scope will reference the object on which the property changed
if($(this).css('display') == 'block') {
//do something...
}
});
To clear this property watcher:
$('.watch-me').unwatch('style');
You may use object.watch function however its non standard, there is already a cross-browser implementation Object.watch() for all browsers?
$('.watch-me').get(0).watch('style', handlerFunction);
function startPolling()
{
var handle = window.setInterval(function(){
var element = $(".watch-me");
if (element.css("display") == "block") {
// trigger the event
window.clearInterval(handle);
}
}, 100);
}
When you want to start watching simply write:
startPolling();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With