I finally figured out what was wrong with my attempt to get stopPropation to work so I could simulate focus on any div, not just an input element. This is the link to the demo and below is how it works (the foucs and unfocus part).
http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html#Javascript; Learn to use Firebug I could not have done this without Firebug and Mike Geary who clued me to putting 'debugger;' in my troubled handler, which is when I saw I could watch the "this" click event perculate up the DOM. Beginners should know this early in there education. You can make Firebug continue processing your handler each time it reaches the debugger keywork. It will stop and display what container it is in. Then hit the play button (right pointing arrow button) to continue. I watched my handler allow a lot more containers to be hit by the click. Which made me see I could not get this to work unless the stopPropagation was put in the right place. Much of what is below will probably be boring to you experts but beginners might like it. * ------------ cool foucus ------------------- */ /* Note: I wanted to simulate a container getting focused when clicked. The concept is to change some objects color when the div that gets the focus is clicked. Then remove it when anything "outside" that container is clicked. Seems easy but I struggled with these for 3 days. The problem is this: since everhting is inside of the container that does the unfocus how do you prevent a click to the container with focus continuing up the food chain in your DOM and reaching the #outerdiv and unfocusing itself? The simple way to fix is to make sure that a click on the container with focus gets stopped before it can do its damage. event.stopPropagation(); is the way out. Note carefully the syntax of these handlers the word "event" has been put inside the main jQuery click fuction so its .click(function(event) {... instead of .click(function() {... Here is the code /* if inside #matchcontainer or #species simulate focus and stop event from bubbling */ $('#matchcontainer, #species').click(function(event) { $('#text800birds').css( { background: "#999999", color: "#FFFFFF"} ); event.stopPropagation(); }); /* any click that reaches the outer container simulate removing focus */ $('#outerdiv').click(function(event) { $('#text800birds').css( { background: "#FFFFFF", color: "#999999"} ); }); Have fun. Hope this message is not a waste of eletrons. Mitch
