How to show/hide jQuery mobile header with two finger tap?

Question

I'm making a webapp using phonegap and jquery mobile, and I'm trying to have it where if you tap anywhere on the screen with two fingers, the header with show and hide.

I have a header div on every page with a "header" class. I thought I could just select everything with this class and use jGestures to show/hide (I've never used jGestures before and I'm a rookie with jquery so that might be my problem). And the way I have it now seems like it would only show and hide if you tapped ON the div, whereas I want to be able to tap anywhere on the screen.

Here's what I have:

<div class="header" data-role="header">
    <a href="#" data-icon="arrow-l" data-rel="back" data-transition="slide" data-direction="reverse">Choose Grid</a>
    <h1>Add Images</h1>
    <a href="#choosePage" class="saveGrid" data-icon="check" data-transition="slide" data-theme="b">Done</a>
</div>

$(document).ready(function(){   
    $("#header").bind("taptwo", function(){
        $("#header").hide();
    }); 
});

I know I'm probably way off, but any ideas? Does jQuery mobile have some build in gestures that I should be using instead?

Answer 1

You should use it like this:

$(document).ready(function(){
    $('body').bind('taptwo', function(){
        $(".header").toggle();
    });
});

This sets the event for the whole body of the page. The event will be fired wherever you double tap. Keep in mind that it will interfere with other double tap elements on the same page.