time-out on jQuery hover function

Question

I'm currently using the following code below using jQuery and the hover function to fade in a the 'caption' element when the user hovers over the image. This works perfectly on desktop browsers, however when testing it with mobile touch devices such as iPad which requires the user to tap the image to trigger the hover function the caption fades in as expected but stays active until the user selects another object on the page.

I would like to know a simple way to modify my javascript code to detect mobile touch devices and then put some sort or timer to the caption so that it fades back automatically after a period of time?

<!-- include jQuery library -->
<script type="text/javascript" src="./_js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
    $(this).find('.caption').stop(false,true).fadeIn(200);
    },
    function() {    

    //Hide the caption
    $(this).find('.caption').stop(false,true).fadeOut(600);
});

});
</script>

</head>
<body>

    <div class="item-caption"><a href="http://www.domain.com">
        <div class="caption">   
            <ul>
                <li><h2>TITLE</h2></li>
                <li><h3>Description</h3></li>
            </ul>       
        </div>
        <img src="./_img/example_image.jpg"></a>
    </div>

</body>

Any ideas, thoughts would be most appreciated.

Chris

score 1 · Answer 1 · answered Nov 16 '12 at 19:27

1

You can detect a touch device with feature detection and then adapt your behavior accordingly with a time-delayed fadeOut():

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return(true);
        } catch (e) {
           return(false);
        }    
    }
    var touchPresent = hasTouch();

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
        var caption = $(this).find('.caption');
        caption.stop(true, true).fadeIn(200);
        // on touch systems, fade out after a time delay
        if (touchPresent) {
            caption.delay(5000).fadeOut(600);
        }
    }, function() {    

        //Hide the caption
        $(this).find('.caption').stop(true, true).fadeOut(600);
    });

});

answered Nov 16 '12 at 19:27

jfriend00

683,504
96
985
979

Many thanks for your comments jfriend00 that works perfectly. One question though. In my HTML I've got a url link in the 'item_caption' div. This link works ok with a mouse as the user has to first hover over the image and then clicks to activate the url.Hoverer on – user1741348 Nov 16 '12 at 19:56
@user1741348 - I don't understand your question. What do you want the behavior of the link to be on a touch system? – jfriend00 Nov 16 '12 at 20:07
Apologies accidently sent a half finished comment. On a touch device the user touches to trigger the hover action and the caption is displayed and they then have to touch again to go to the url. All working as expected, except if the user touches and then does nothing for a wile the timed delay kicks in and the caption fades away again (as expected). However you would expect that 'hover' function is now reset but if the user touches again instead of the caption fading in again the url is activating. – user1741348 Nov 16 '12 at 20:19
Hope I have explained ok as its a bit difficult to put into words. Please find a link to a test page which may help put clarity: http://www.youmeusdesign.com/caption_mob - Kind regards Chris – user1741348 Nov 16 '12 at 20:20
@user1741348 - You are fading out the content inside the `` tag, not the `` tag itself. This can cause problems as the link tag is still there. If you don't want the link to be there at all when it's faded out, then put the link in a container div and fadeout the container div. – jfriend00 Nov 16 '12 at 21:13

score 0 · Answer 2 · answered Nov 16 '12 at 17:33

0

You can use the navigator.userAgent.match to detect mobile devices as follows:

onMobile = false;
// Mobile device detect - terrible, yes, but whatever
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/Blackberry/i)
){
onMobile = true;                   
}

Now in your document.ready or wherever you want - Check for if onMobile is true and if it is then do your thing.

answered Nov 16 '12 at 17:33

Roshan Gautam

4,780
1
13
11

User agent detection is a horrible idea - feature detection is nearly ALWAYS a better way to go. If you want to detect touch behavior, you can just use feature detection on Touch. See http://stackoverflow.com/questions/4643443/how-do-i-detect-whether-a-browser-supports-mouseover-events for info. – jfriend00 Nov 16 '12 at 19:21

time-out on jQuery hover function

2 Answers2

Linked