Good day, all,

I am trying to understand a fundamental feature of jQuery but, so far, cannot find any specific examples despite my Google-fu.

My problem:

There exists a set of scripts and Ajax calls that modify and change some elements on a page I need to update. I cannot touch or change these scripts; they are undocumented and the individual who built them is unavailable. All I am free to do is build scripts that watch the elements on the Web page and, when they change, do something.

It's the "when they change" part that mystifies me.

I'm trying to watch a div (let's call it id="dr_someUniqueDiv") and, when it becomes visible do "x" and when it becomes invisible do "y". My problem is that I do not know how to attach such a monitoring script to div#dr_someUniqueDiv or trigger my subsequent actions when it flips between display:block and display:none.

I am stuck using jQuery 1.3.2.

I know that .bind() or .live() is probably what I need, but both require knowing what event handler to use. I've gone through the API documentation and cannot find an event handler that pays attention to the properties of an object and fires "true" when they change. My plan is to watch for the visibility condition on div#dr_someUniqueDiv and, when it changes, perform some evaluations and then fire the changes I need.

Can someone provide me with a general approach?

Here is the pseudo-code of what I am attempting:

Code:
<div id="dr_someUniqueDiv">
	Hello, world.
</div>

<script type="text/javascript">
	$(function(){
		$('div#dr_someUniqueDiv').whenThisChanges(function(){
			if ($(this).isVisible()) {
				// Do something
			}
		});
	});
</script>