Thursday, November 29, 2012

Watching/monitoring CSS attributes with jQuery

I needed to monitor dimension and size CSS attributes for a AAC switch-access library I'm developing. (A separate blog post on that when it's ready. It's already on github, but there are some annoying bugs, and only support for single switch elements, and no groups...)

After testing jquery-resize (github.com/cowboy/jquery-resize), jquery-watch (darcyclarke.me/dev/watch/) and a few others, I found that they were almost what I was looking for, but not exactly what I needed.

My requirements where:

  • Monitor one or multiple CSS attribute
  • Use custom functions like 'outerWidth(true)' to get the full width including border, margin and padding. 'css('width')' would only return the element width.
  • Use requestAnimationFrame instead of setTimeout if available.
  • Either jQuery events or direct callbacks
Since I didn't find any existing jQuery plugins, jquery-csswatch was born.

Sourcesgithub.com/leifcr/jquery-csswatch.
Exampleleifcr.github.com/jquery-csswatch/example/

The plugin is written in CoffeeScript.