current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I have two statements. What I am trying to do is when someone clicks on #area_a then hide then entire #area_b div without activating the focusout for the #area_b_textbox. But I've tried different code (which I am not including here because it is incorrect and want to get your suggestions) and what is happening is it is activating the focusout everytime I click on the #area_a div.

JQuery base actions

$("#area_a").click(function() { $("#area_b").hide(); });

$("#area_b_textbox").focusout(function() {$("#area_b_error").show();});

HTML:

<div id="area_a"></div>

<div id="area_b">
  <input id="area_b_textbox">
  <div id="area_b_error"></div>
</div>

Thanks!

share|improve this question
    
Set focus back in the handler; best you can do-if you click on something, you're gonna lose focus from something else. – Dave Newton Oct 22 '11 at 20:47
up vote 1 down vote accepted

You could hack around the problem with a timer. Timers usually smell bad but I think it is your safest bet here. If you try using hover or other mouse events you might run into trouble with keyboard navigation and activation or the lack of "hoverish" events on touch interfaces (and we can't pretend those don't exist anymore).

Something like this:

var timer_kludge = {
    start: function(fn) {
        this.id = setTimeout(fn, 200);
    },
    stop: function() {
        if(this.id)
            clearTimeout(this.id);
        this.id = null;
    },
    id: null
};

$('#area_a').click(function() {
    timer_kludge.stop();
    $('#out').append('<p>click</p>');
});
$('#area_b_textbox').focusout(function() {
    timer_kludge.start(function() {
        $('#out').append('<p>textarea focusout</p>');
    });
});
$('#area_b_textbox').focusin(function() {
    timer_kludge.stop();
});

Demo: http://jsfiddle.net/ambiguous/s8kw8/1/

You'd want to play with the 200 timeout a bit to see what works best in your circumstances.

share|improve this answer
    
how about disabled people, they could use a long time to reach the button or what if area_a is on a totally different position on the site... i don't think this is a better solution. – meo Oct 22 '11 at 21:14
    
@meo: The timer is started when the <textarea> loses focus so there is no problem, the <textarea> will have focus until they "click" the link (and then the click handler will be triggered before the timer runs out) or they "click" outside the textarea (and then it should activate the focusout handler). – mu is too short Oct 22 '11 at 21:19
    
ok next time i read you code exactly before i comment :) +1 – meo Oct 22 '11 at 21:22
    
@meo: Good call thinking about accessibility issues though, a lot of accessibility issues apply to touch (and text) based interfaces as well as interfaces for the disabled. – mu is too short Oct 22 '11 at 21:54
up vote 1 down vote

Why not just add a flag to ignore next focusout (blur?) event.

ignoreNextFocus = false;
$("#area_a").click(function() { ignoreNextFocus=true; $("#area_b").hide(); });
$("#area_b_textbox").focusout(function() { if(!ignoreNextFocus)$("#area_b_error").show();ignoreNextFocus=false;});

On that note setting the flag on click event might be too late. If it is the case, try mousedown event.

share|improve this answer
up vote 1 down vote

this is not possible since you loose the focus automatically when you click somewhere else...

What you need to do is to unbind the focusout event on hover of the #area_a and rebind it later on...

$("#area_a").click(function() { 
   $("#area_b").hide()
}),hover(
  function(){
    $("#area_b_textbox").unbind("focusout")
  },
  function(){
    $("#area_b_textbox").focusout(function() {$("#area_b_error").show();});
  }
)

PS: what is your ultimate goal here?

share|improve this answer
    
Does that work? You'll already have lost focus on the click, no? – Dave Newton Oct 22 '11 at 20:49
    
oh you are right. Need to think of something else. I have changed it to hover – meo Oct 22 '11 at 20:51
    
they fire the hover event also.. Ever wondered why dropdown navigation system based on hover still work on the ipad or iphone? ;) But i see you point... – meo Oct 22 '11 at 21:08
up vote 0 down vote

I'm not sure this is possible since by definition the focus has to leave the #area_b_textbox if the user is going to click a button.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.