How to give back focus to a DIV who just lost it

I’m actually developping a small gallery plugin for wordpress.

It is using jQuery with a few more plugins :
– jScrollPane
– Hoverintent

Read More

I’m using jScrollPane to replace the ugly scroll bar provided by the browser, and to have arrows to scroll the images.

All the images are arranged on a single row.

The thing is that I want the gallery to be scrollable with the arrows key on the keyboard.

So the javascript code looks like this :

$(document).ready (function () {

    $('.darkenjquery').bind('touchstart', function() {
        $(this).find('img').fadeTo(200, 0.3);
        $(this).find('span').css('z-index',3);
    }).bind('touchend', function() {
        $('body').find('img').fadeTo(200, 1);
        $('body').find('span').css('z-index',1);
    }).hoverIntent(function() {
        $(this).find('img').fadeTo(200, 0.3);
        $(this).find('span').css('z-index',3);
    }, function() {
        $(this).find('img').fadeTo(200, 1);
        $(this).find('span').css('z-index',1);
    });

    $('#oupsmangallery').on('blur',function () {
        $('#oupsmangallery').trigger("focus");
    });

    $('#oupsmangallery').jScrollPane({showArrows: true, hideFocus: true});

    $('#oupsmangallery').trigger("focus");

});

The html code generated by the plugin is similar to this one :

<p class='explain'>Vous pouvez faire défiler la galerie avec les flèches gauche et droite du clavier. En positionnant le curseur de votre souris sur une image, la légende apparaitra</p>
<div id='oupsmangallery'>
<table id='gallery'><tbody><tr>
<td class="galleryelement"><div class="darkenjquery">
<img class="galleryimage" src="http://192.168.10.14/wp-content/uploads/2014/03/site_000_christiane_taubira_unnamed-750x500.jpg" alt=""><span class="legend">2013 - intervention de Madame Christiane Taubira, garde des seaux, dans le cadre du projet litt&eacute;raire Images de femmes des jeunes &eacute;crivains des ateliers d'&eacute;criture &quot;La Cite Des Mots&quot; </span></div></td>
</tr></tbody></table>
</div>

There is (of course) a lot more cells in the table.

The first trigger of focus to the div whom id is “oupsmangallery” works perfectly well. But when this div lose the focus, the blur event is triggered, but the div don’t get focus back.

What am I missing here ?

Thanks a lot for your answers.

Related posts

Leave a Reply

1 comment