2

So, I'm trying to change the :hover function to a click function using Modernizr's no-touch/touch class for specific elements (captions) on a page. And in theory, this should work, but somehow it's only clickable once on a mobile/touch device, meaning that if I click/tap it again, it won't "un-hover". I can "un-hover" by tapping at another element on the page, but would very much like the caption to disappear when <figure> clicked/tapped again.

If I change the js so that it's the no-touch devices having to click, it works fine. What am I missing here?

Fiddle: https://fiddle.jshell.net/bh3aLkcL/3/

I'm afraid my js skills are quite poor to say the least (read: non-existing), and I've been using a snippet from another post: Change hover interaction to click for touch screen devices

The rest works, so it's just that one thing. Any help is greatly appreciated!

Javascript:

// For hovering becoming click via Modernizr
//$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('.design-section figure').on(event, function () {
$(this).toggleClass('open');
});

HTML:

<section id="work" class="content-section text-left" data-offset="100px">
<div class="design-section">
    <div class="container">
        <div class="col-lg-8 col-lg-offset-2">
            <img src="http://cutepuppyclub.com/wp-content/uploads/2015/05/White-Cute-Puppy-.jpg" width="100%" class="img-responsive" alt="Playing the dilemma game">
            <figure>
                <figcaption>
                    <p>test text</p>
                </figcaption>
            </figure>
       </div>
    </div>
</div>
</section>

CSS:

figure {
    padding: 0;
    margin-top: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

figcaption {
    position: absolute;
    background: rgba(0,0,0,.3);
    color: #fff;
}

figure.open figcaption {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
}

.design-section figcaption {
  opacity: 0;
  bottom: -30%; 
  left: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
  padding: 0;
  width:100%;
  display:block;
}

.design-section figure {
    height:120px;
    margin-top:-120px;
    z-index:1;
}

.design-section img {
    padding-top:0;
    margin-top:14px;
    z-index:0;
}

.design-section figcaption p {
    margin:0;
    padding: 1.5% 2.5%;
    font-size:15px;
}

.design-section figure.open figcaption{
    bottom: 0;
}

P.S. I'm using Bootstrap, but that shouldn't have anything to say in this matter.

Community
  • 1
  • 1
loulyshas
  • 23
  • 1
  • 1
  • 5

2 Answers2

4

You don't need to use Modernizr for checking touch events, you could do it this way:

var event = ('ontouchstart' in window) ? 'click' : 'mouseenter mouseleave';

$('.design-section figure').on(event, function () {
    $(this).toggleClass('open');
});

Also, your using of Conditional (ternary) Operator is wrong, I fixed it. Read about right syntax.

sergdenisov
  • 8,327
  • 9
  • 48
  • 63
  • Thank you so much! However, I find that the `:hover` function now is a click even on a no-touch device (even if I change the `no-touch` to `touch` ). When I test it on my desktop browser, I now have to click to see the effect, even if the `no-touch` class is on. Is it possible to get both the `:hover` function when `no-touch` class, and the click function when `touch` class? – loulyshas May 25 '15 at 09:30
  • @loulyshas you shouldn't forget it's not the best solution — what is about situation, when user has mouse and touch display? It'll be bad UX. – sergdenisov May 25 '15 at 13:07
  • Thanks for the comment! I'm well aware that it's not ideal, but it's the best solution I can think of; and it should work on most devices (either with click or hover) (I'll run some UX tests later on different devices, but my initial observation was that this would be the best solution, albeit not ideal). – loulyshas May 25 '15 at 15:42
  • As stated here http://stackoverflow.com/a/6447935/474597 this may result in false positives. – lulalala May 10 '17 at 03:15
  • @lulalala yes, it may. – sergdenisov May 10 '17 at 09:45
1

you can specify multiple events as a parameter so just include the touchstart to add an action when a user clicks on mobile.

$('.design-section figure').on('mouseover mouseout touchstart', function () {
    $(this).toggleClass('open');
});
Tristanisginger
  • 2,181
  • 4
  • 28
  • 41