A jQuery Plug-in to monitor Html Element CSS Changes
- by Rick Strahl
Here's a scenario I've run into on a few occasions: I need to be able to monitor certain CSS properties on an HTML element and know when that CSS element changes. The need for this arose out of wanting to build generic components that could 'attach' themselves to other objects and monitor changes on the ‘parent’ object so the dependent object can adjust itself accordingly. What I wanted to create is a jQuery plug-in that allows me to specify a list of CSS properties to monitor and have a function fire in response to any change to any of those CSS properties. The result are the .watch() and .unwatch() jQuery plug-ins. Here’s a simple example page of this plug-in that demonstrates tracking changes to an element being moved with draggable and closable behavior: http://www.west-wind.com/WestWindWebToolkit/samples/Ajax/jQueryPluginSamples/WatcherPlugin.htm Try it with different browsers – IE and FireFox use the DOM event handlers and Chrome, Safari and Opera use setInterval handlers to manage this behavior. It should work in all of them but all but IE and FireFox will show a bit of lag between the changes in the main element and the shadow. The relevant HTML for this example is this fragment of a main <div> (#notebox) and an element that is to mimic a shadow (#shadow). <div class="containercontent">
<div id="notebox" style="width: 200px; height: 150px;position: absolute; z-index: 20; padding: 20px; background-color: lightsteelblue;">
Go ahead drag me around and close me!
</div>
<div id="shadow" style="background-color: Gray; z-index: 19;position:absolute;display: none;">
</div>
</div>
The watcher plug in is then applied to the main <div> and shadow in sync with the following plug-in code:
<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
$("#notebox").watch("top,left,height,width,display,opacity", function (data, i) {
var el = $(this);
var sh = $("#shadow");
var propChanged = data.props[i];
var valChanged = data.vals[i];
counter++;
showStatus("Prop: " + propChanged + " value: " + valChanged + " " + counter);
var pos = el.position();
var w = el.outerWidth();
var h = el.outerHeight();
sh.css({
width: w,
height: h,
left: pos.left + 5,
top: pos.top + 5,
display: el.css("display"),
opacity: el.css("opacity")
});
})
.draggable()
.closable()
.css("left", 10);
});
</script>
When you run this page as you drag the #notebox element the #shadow element will maintain and stay pinned underneath the #notebox element effectively keeping the shadow attached to the main element. Likewise, if you hide or fadeOut() the #notebox element the shadow will also go away – show the #notebox element and the shadow also re-appears because we are assigning the display property from the parent on the shadow.
Note we’re attaching the .watch() plug-in to the #notebox element and have it fire whenever top,left,height,width,opacity or display CSS properties are changed. The passed data element contains a props[] and vals[] array that holds the properties monitored and their current values. An index passed as the second parm tells you which property has changed and what its current value is (propChanged/valChanged in the code above). The rest of the watcher handler code then deals with figuring out the main element’s position and recalculating and setting the shadow’s position using the jQuery .css() function.
Note that this is just an example to demonstrate the watch() behavior here – this is not the best way to create a shadow. If you’re interested in a more efficient and cleaner way to handle shadows with a plug-in check out the .shadow() plug-in in ww.jquery.js (code search for fn.shadow) which uses native CSS features when available but falls back to a tracked shadow element on browsers that don’t support it, which is how this watch() plug-in came about in the first place :-)
How does it work?
The plug-in works by letting the user specify a list of properties to monitor as a comma delimited string and a handler function:
el.watch("top,left,height,width,display,opacity", function (data, i) {}, 100, id)
You can also specify an interval (if no DOM event monitoring isn’t available in the browser) and an ID that identifies the event handler uniquely.
The watch plug-in works by hooking up to DOMAttrModified in FireFox, to onPropertyChanged in Internet Explorer, or by using a timer with setInterval to handle the detection of changes for other browsers. Unfortunately WebKit doesn’t support DOMAttrModified consistently at the moment so Safari and Chrome currently have to use the slower setInterval mechanism. In response to a changed property (or a setInterval timer hit) a JavaScript handler is fired which then runs through all the properties monitored and determines if and which one has changed. The DOM events fire on all property/style changes so the intermediate plug-in handler filters only those hits we’re interested in. If one of our monitored properties has changed the specified event handler function is called along with a data object and an index that identifies the property that’s changed in the data.props/data.vals arrays.
The jQuery plugin to implement this functionality looks like this:
(function($){
$.fn.watch = function (props, func, interval, id) {
/// <summary>
/// Allows you to monitor changes in a specific
/// CSS property of an element by polling the value.
/// when the value changes a function is called.
/// The function called is called in the context
/// of the selected element (ie. this)
/// </summary>
/// <param name="prop" type="String">CSS Properties to watch sep. by commas</param>
/// <param name="func" type="Function">
/// Function called when the value has changed.
/// </param>
/// <param name="interval" type="Number">
/// Optional interval for browsers that don't support DOMAttrModified or propertychange events.
/// Determines the interval used for setInterval calls.
/// </param>
/// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param>
/// <returns type="jQuery" />
if (!interval)
interval = 100;
if (!id)
id = "_watcher";
return this.each(function () {
var _t = this;
var el$ = $(this);
var fnc = function () { __watcher.call(_t, id) };
var data = { id: id,
props: props.split(","),
vals: [props.split(",").length],
func: func,
fnc: fnc,
origProps: props,
interval: interval,
intervalId: null
};
// store initial props and values
$.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); });
el$.data(id, data);
hookChange(el$, id, data);
});
function hookChange(el$, id, data) {
el$.each(function () {
var el = $(this);
if (typeof (el.get(0).onpropertychange) == "object")
el.bind("propertychange." + id, data.fnc);
else if ($.browser.mozilla)
el.bind("DOMAttrModified." + id, data.fnc);
else
data.intervalId = setInterval(data.fnc, interval);
});
}
function __watcher(id) {
var el$ = $(this);
var w = el$.data(id);
if (!w) return;
var _t = this;
if (!w.func)
return;
// must unbind or else unwanted recursion may occur
el$.unwatch(id);
var changed = false;
var i = 0;
for (i; i < w.props.length; i++) {
var newVal = el$.css(w.props[i]);
if (w.vals[i] != newVal) {
w.vals[i] = newVal;
changed = true;
break;
}
}
if (changed)
w.func.call(_t, w, i);
// rebind event
hookChange(el$, id, w);
}
}
$.fn.unwatch = function (id) {
this.each(function () {
var el = $(this);
var data = el.data(id);
try {
if (typeof (this.onpropertychange) == "object")
el.unbind("propertychange." + id, data.fnc);
else if ($.browser.mozilla)
el.unbind("DOMAttrModified." + id, data.fnc);
else
clearInterval(data.intervalId);
}
// ignore if element was already unbound
catch (e) { }
});
return this;
}
})(jQuery);
Note that there’s a corresponding .unwatch() plug-in that can be used to stop monitoring properties. The ID parameter is optional both on watch() and unwatch() – a standard name is used if you don’t specify one, but it’s a good idea to use unique names for each element watched to avoid overlap in event ids especially if you’re monitoring many elements.
The syntax is:
$.fn.watch = function(props, func, interval, id)
props
A comma delimited list of CSS style properties that are to be watched for changes. If any of the specified properties changes the function specified in the second parameter is fired.
func
The function fired in response to a changed styles. Receives this as the element changed and an object parameter that represents the watched properties and their respective values. The first parameter is passed in this structure:
{ id: watcherId,
props: [],
vals: [],
func: thisFunc,
fnc: internalHandler,
origProps: strPropertyListOnWatcher
};
A second parameter is the index of the changed property so data.props[i] or data.vals[i] gets the property and changed value.
interval
The interval for setInterval() for those browsers that don't support property watching in the DOM. In milliseconds.
id
An optional id that identifies this watcher. Required only if multiple watchers might be hooked up to the same element. The default is _watcher if not specified.
It’s been a Journey
I started building this plug-in about two years ago and had to make many modifications to it in response to changes in jQuery and also in browser behaviors. I think the latest round of changes made should make this plug-in fairly future proof going forward (although I hope there will be better cross-browser change event notifications in the future).
One of the big problems I ran into had to do with recursive change notifications – it looks like starting with jQuery 1.44 and later, jQuery internally modifies element properties on some calls to some .css() property retrievals and things like outerHeight/Width(). In IE this would cause nasty lock up issues at times. In response to this I changed the code to unbind the events when the handler function is called and then rebind when it exits. This also makes user code less prone to stack overflow recursion as you can actually change properties on the base element. It also means though that if you change one of the monitors properties in the handler the watch() handler won’t fire in response – you need to resort to a setTimeout() call instead to force the code to run outside of the handler:
$("#notebox")
el.watch("top,left,height,width,display,opacity", function (data, i) {
var el = $(this);
…
// this makes el changes work
setTimeout(function () { el.css("top", 10) },10);
})
Since I’ve built this component I’ve had a lot of good uses for it. The .shadow() fallback functionality is one of them.
Resources
The watch() plug-in is part of ww.jquery.js and the West Wind West Wind Web Toolkit. You’re free to use this code here or the code from the toolkit.
West Wind Web Toolkit
Latest version of ww.jquery.js (search for fn.watch)
watch plug-in documentation
© Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET JavaScript jQuery
