Question

Here’s the basic setup: I have a thin bar at the top of a website containing accessibility-related links. If javascript is enabled, this is hidden (negative margin). However, I would like to show the bar whenever a user tabs through the links. Here’s what I’m doing:

var bar = $("#bar");
bar.find("a").on("focus", function(){
    if(bar.css("margin-top") == "-50px"){
        bar.animate({ marginTop: 0 }, 250);
    }
});

That works. However, when it comes to closing this bar it gets a bit tricky. If I bind a blur event to the a, it will hide when I tab through each link. I want to hide it only when all links are blurred.

I would like to do this:

bar.find("a").on("blur", function(){
    // If no links inside #bar have focus now:
    bar.animate({ marginTop: -50 }, 250);
});

How?

Answer 1

Because the blur event fires before the focus event fires, you should set a timeout in the blur event, and cancel it in the focus event.

(function () {

    var bar = $("#bar");
    var timeout;

    bar.find("a").on("focus", function(){
        clearTimeout(timeout);

        if(bar.css("margin-top") == "-50px"){
            bar.animate({ marginTop: 0 }, 250);
        }
    });

    bar.find("a").on("blur", function(){
        timeout = setTimeout(function () {
            // If no links inside #bar have focus now:
            bar.animate({ marginTop: -50 }, 250);
        }, 1);
    });

}());