Long tap opens context menu

[acesuares]

Hi There, I tried to use hover-on-touch and it kinda works, but after the hover effect the browser displays the context menu (open in new tab etc).

In your demo, it doesn't and works as expected. What am I doing wrong...?

[vin-ni]

Could you give some details about your code?

[acesuares]

I am integrating it in Open Streaming Platform so I kind of inserted the code in there (https://openstreamingplatform.com/)

In 'layout.html" I have this in the head

<script src="/static/vendor/hover-on-touch/js/hoverontouch.js"></script>
<script type="text/javascript">
  var HoverOnTouch = new HoverOnTouch();
</script>

In the css I have

.zoom {
    transition: transform .2s;
}

.hoverontouch--aktiv .zoom {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.03);
}

/* .zoom:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.03);
} */

and in the HTML this:

                <li class="displayCard hoverontouch mx-4 my-3">
                  <a href="/view/{{stream.channel.channelLoc}}/">
                    <div class="displayCard-thumbnail zoom">
                      <div class="video-badges zoom">
                        <span class="badge badge-danger mx-1"><i class="fas fa-video"></i> Live</span>

So, in HTML I added hoverontouch class to the container of the divs that have the zoom class. In Css I disabled the original zoom:hover and replaced it with hoverontouch--aktiv. And in the head included the script.

On my android phone, you 'simple demo' works nicely, long-touching it displays the hover and nothing else happens. On my test openstreamingplatform server, the element does activate the 'zoom' class on long-touch, but then after a small delay the context menu opens (Open in new tab, etc). This happens in FF and Chrome.

[vin-ni]

Is it already implemented in the online site?

[acesuares]

SIte is behind firewall. It's not osp itself, I am just setting osp up for myself. If you need to look at it, I can make arrangements but it takes a while to make it accessible. Can I email you privately?

[acesuares]

I got it working, thanks. Great!!!

[vin-ni]

Perfect :)