Jquery hover function and click through on tablet

Question

I have a jquery slideshow that that uses a navigation list to switch out the slideshow images. How it works is when you hover over the nav list it highlights ('.active') and the associated image switches to that. There are links inside the nav list which can also be clicked to go to a different page.

I need this to work on a tablet so that when the person taps the nav list, it becomes active, then the image slideshow switches, then if you tap again it follows through to that link. Right now what is happening is that as soon as you tap it, it becomes active AND clicks through.

Here's the jquery

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").hover(function(e){ 
    //Set Variables
    e.preventDefault();

    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();    //Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
    if ($(this).is(".active")) {  //If it's already active, then...
        return false; // Don't click through
    } else {
        //Animate the Teaser                
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.8,   marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
    }

    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
    });

And here's the html for the nav list

<div class="image_thumb">
    <ul>
        <li id="one">

            <h2><a href="styleguide.html">Text Text Text</a></h2>
            <p><a href="styleguide.html">Text Text Text</a></p>

            <a class="imgloc" href="content/images/home/01.jpg"></a>

            <div class="block">
                 <p>Text Text Text</p>
            </div>

        </li>
    </ul>
</div>

Here is an example of how it works: ocgoodwill.org

If anyone can help that would be great!

-- EDIT --

I also want to add that if a user has tapped onto one of the elements, then taps on a different one, the first one needs to be reset so that if they tap back onto it, it doesn't automatically click through.

Worrisome

So both c_kick and bergie3000 were right. But only one of you can get the green check prize! – Worrisome

Answer 1

UPDATE: after recently resorting to using this script again, I realized things can be done a lot simpler, not requiring any flags at all.

See revised code on my website.

Original answer:

Had the exact same issue today. I solved it using the data attribute, live bound to a touchstart event (which is a basic touch-device check, but you could make this more thorough). Try using the following code, replacing the 'clickable_element' to suit your needs.

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

This should stop the tablet from activating the link on the first tap, activating it on the second tap.

Edit: in case of multiple link elements, which need to be 'reset' when one of the other elements are clicked, try attaching the data attribute to the parent container:

The HTML:

<div id="parent-element">
    <a href="" id="1">Link 1</a>
    <a href="" id="2">Link 2</a>
    <a href="" id="3">Link 3</a>
</div>

jQuery:

$('#parent-element a').live("touchstart",function(e){
    var $link_id = $(this).attr('id');
    if ($(this).parent().data('clicked') == $link_id) {
        // element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
        $(this).parent().data('clicked', null);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
        e.preventDefault(); // return false; on the end of this else statement would do the same
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
        $(this).parent().data('clicked', $link_id);
    }
});

Lymn

c_kick, you are a damned genius! Thank you! – Worrisome

Actually, another question. So when I tap it the first time, it highlights, but does not click through, but when I tap a sibling li, then tap back to that one, it clicks through. Is there a way to reset the 'clicked_once' state if you tap off of that one? – Worrisome

Answer 2

I wish I could reply to the original post, but to reset the 'clicked_once' state, you should be able to use this bit from your original code

$(".image_thumb ul li").removeClass('clicked_once');

(or something like it) at the outset of the else statement of c_kick's code.

Amphetamine

Sweet! That nearly worked!. What I ended up doing was replacing ".removeClass" with ".removeData" and that seems to work perfectly! Thanks for your help! – Worrisome