Question

I’ve implemented the following code on the site I’m working on which works great, but for some reason doesn’t seem to work on Mobile Safari. When the user clicks outside of the #trailer div a #screenoverlay which acts as a lightbox type darkening overlay is supposed to disappear and the trailer is supposed to pause (via the vimeo API). However, on the iPad it doesn’t work and I suspect it’s perhaps because the mouse_is_inside code doesn’t work on mobile devices? Is there an alternate way to achieve the same effect or a way to modify this code? Any help would be fantastic!

var mouse_is_inside = false;

$(document).ready(function()
{
$("#trailer").hover(function(){ 
    mouse_is_inside=true; 
}, function(){ 
    mouse_is_inside=false; 
});

$("body").mouseup(function(){ 
    if(! mouse_is_inside) $("#screenoverlay").fadeOut();
    froogaloop.api('pause');
});
});

And the page is here
http://tinyurl.com/d2zttye

Answer 1

if you have that dakening layer, then why not set an onclick listener on that?

$("#screenoverlay ").onclick(function(){
    $("#screenoverlay").fadeOut();
});