Javascript: Blur for div
Today I looked for a method to enable a tinyMCE instance by click and disable it when the page is clicked elsewhere. I encountered two problems: a div has no blur event firing, and the tinyMCE control panel will be recognized as something not the editor, when clicked (I used an external control panel for some reason).
Now, here's what seems to be a solution. Instead of blur I use the click event of "body". To prevent it to fire, when we click one of the (here) green control buttons, I prevent it from firing by only letting things happen, if my tinyMCE (here the orange div) is in active state. And it is set to active state only 400ms after it was clicked.
Now here's the result:
foo
bar
bar
bar
And here's the Javascript code of my example:
$(document).ready(function(){
$('#test,.ctrl').click(function(){
if ($('#test').hasClass('active')) {
$('#test').removeClass('active');
window.setTimeout(function(){ $('#test').addClass('active');},400);
} else {
$('#test').css('background','red');
window.setTimeout(function(){ $('#test').addClass('active');},400);
}
});
$('body').click(function() {
if ($('#test').hasClass('active')) {
$('#test').css('background-color','orange');
$('#test').removeClass('active');
}
});
});
RSS
