Comments (6)
Could you give some details about your code?
from hover-on-touch.
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.
from hover-on-touch.
Is it already implemented in the online site?
from hover-on-touch.
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?
from hover-on-touch.
I got it working, thanks. Great!!!
from hover-on-touch.
Perfect :)
from hover-on-touch.
Related Issues (4)
- Mobile demo ignores hardware hover HOT 9
- NICE! HOT 3
- restartImagesIfGif is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hover-on-touch.