jQuery - Detect click in certain pixel area, then execute function
<p>I currently have a div, let's call it <code>#videodiv</code> that includes an HTML5 video player (<a href="http://sublimevideo.net" rel="nofollow">SublimeVideo</a>, but that may be irrelevant information). On page load, <code>#videodiv</code> is only 100px. When a user clicks anywhere within <code>#videodiv</code>, I'd like for jQuery to expand the div to 250px.</p>

<p>You may be saying -- that's as simple as a jQuery function comes, just use click then animate! And you'd be right, except...</p>

<p><strong>Here's the problem:</strong> The HTML5 video player that is contained within <code>#videodiv</code> and that fills the entire div captures all clicks that occur. This is done to trigger the play/pause function for the player, but subsequently disallows any programmer to set a jQuery click function for the containing div.</p>

<p>Luckily in this situation, <code>#videodiv</code>is a 100% full body-width div and has an exact height of 100px. So, bearing in mind the problem above, the alternative would be to figure out if we can capture any clicks <strong>within the HTML document</strong> (rather than the div) that occur in the top 100 pixels of the page, then trigger the function. </p>

<p><em>In other words, how can we use jQuery to detect mouse clicks anywhere within the first 100 pixels of a page, then animate the div <code>videodiv</code> to 250px?</em></p>

<p>Alternative/better solutions are <em>absolutely</em> more than welcome, but jQuery is the preferred method.</p>
