Change style of jQuery Dialog title bar when got/lost focus

Question

I'm trying to make a simple page with two jQuery Dialogs with the functionality of changing their titlebar colour when each gets or losts focus. In other words, focused window has a different titlebar colour which makes it easier to differ which has focus. I have this code:

$(function () {
  $(".window").dialog({
    focus: function (event, ui) {
      $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
    }
});

but I don't know how to detect in the focus event whether it it gets or losts focus.

Answer 1

The dialog focus event is only called on gaining focus. Stock jQuery UI dialog boxes have no concept of losing focus.

A simple solution is to simply remove your ui-state-error class from every dialog in the focus handler and then add it to the one that's just received focus.

I've actually written a full-featured jQuery UI plugin which adds a .blur event to dialog boxes, and handles re-ordering stacked boxes whenever the topmost box is closed. I'll check if I'm allowed to publish it.

Answer 2

Try this

http://jsfiddle.net/JqQA6/

I needed the same and this solution works.

Answer 3

Try focusin() and focusout()