The swipe function of Hammer.js is unable to detect gestures on a rotated iframe

After creating a rotated iframe on the page using CSS transforms, I attempted to implement swipe events within the iframe.

    body.rotate iframe {
        transform: rotate(90deg);
        transform-origin: top right;
        position: absolute;
        top: 100%;
        right: 0;
        height:100vw;
        min-width:100vh;
    }

I added swipe functionality to the iframe element as shown below:

    var el = document.getElementById('swipe');
    Hammer(el).on('swipeleft', next);
    Hammer(el).on('swiperight', prev);
    Hammer(el).on('doubletap', preview);

However, even though doubletapping on div#swipe in the rotated iframe triggers the preview() function, the swipeleft and swiperight events do not work as expected.

javascripthtmlcssiframehammer.js

Answer №1

Kindly adhere to the instructions provided below.

let element = document.getElementById('swipe');
let mc = new Hammer(element);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
Hammer(element).on('swipeleft', next);
Hammer(element).on('swiperight', prev);
Hammer(element).on('doubletap', preview);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the w3 validator be configured to disregard PHP tags?

I am facing issues with the online validator flagging errors for my php tags. To validate my HTML, I currently have to manually remove all the php inserts which is quite time-consuming. Is there a more efficient way to handle this problem? Below is an e ...

phphtmlw3c-validation

Styling with CSS: I am looking to display images beneath text

I am facing a challenge with displaying an image within a container. The container has a background image with the position set to relative and contains some text. I would like to display another image within this container, with the position set to absolu ...

htmlcssimagez-index

Updating the font style in MUI with React 18

I attempted to create a new theme in order to replace the default font family of MUI but unfortunately, it was not successful. This is what my theme component looks like: import { createTheme } from "@mui/material/styles"; const theme = createT ...

cssreactjsmaterial-uifont-family

A Guide to Effectively Extracting Data from Second Level JSON Arrays with

Hi, I'm having difficulty fetching the two attributes under CategoryImage in the second level of the JSON array parsing. Can someone help me with this? Thank you. <script> $(document).ready(function() { var cat=""; ...

javascriptjqueryjsonajax

GAS: What strategies can I implement to optimize the speed of this script?

I have a sheet with multiple rows connected by "";" and I want to expand the strings while preserving the table IDs. ID Column X: Joined Rows 01 a;bcdfh;345;xyw... 02 aqwx;tyuio;345;xyw... 03 wxcv;gth;2364;x89... function expand_j ...

javascriptperformancegoogle-apps-scripttime

Utilizing sourcemaps in ionic for seamless linking

I've encountered an issue with source maps or a similar feature. After inserting console.log(...) in my code, the message appears in the console but links to the compiled JavaScript file instead of the original TypeScript file. Have I overlooked som ...

javascriptangulartypescriptionic-framework

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

htmlcssreactjstypescriptfrontend

Botkit corner flaw

I'm having trouble updating a dependent package included in Botkit. When I run npm install on the package.json provided below, Npm alerts me that the hoek package is vulnerable. I attempted to resolve this by running npm audit fix but it did not wor ...

javascriptnpmbotkit

Here is a guide on how to specify function selection values for a total order. By default, the selection will have predetermined values, and upon clicking the sum button,

<tr id=""> <th> <select id="selection" onchange="myFunction()"> <option id="0" value="0">None</option> <option id="1" value="4.00">Women Suit</option> <option id="2" value="10.00">Dres ...

javascripthtml

Verifying the presence of an object in an array based on its value using TypeScript

Having the following dataset: roles = [ {roleId: "69801", role: "ADMIN"} {roleId: "69806", role: "SUPER_ADMIN"} {roleId: "69805", role: "RB"} {roleId: "69804", role: "PILOTE"} {roleId: "69808", role: "VENDEUR"} {roleId: "69807", role: "SUPER_RB"} ] The o ...

javascriptarraysangulartypescriptecmascript-6

Which is the Better React Entry Point: Index.html or index.js? And where exactly can we find the Node.js

After doing some research online, I came across conflicting information regarding the entry point for a react app. One source claimed that index.html serves as the entry point, while another stated that index.js is actually the main entry point for both Re ...

javascriptreactjs

Confirming class Value with Selenium IDE

I am looking to confirm the value of a specific class within an HTML code using Selenium IDE. Specifically, I want to retrieve the value of: data-val located under the class named tgl. In my example, this value can be either 0 or 1. How can I achieve thi ...

cssclassseleniumxpathselenium-ide

What are some ways in which I can utilize the Ember Handlebars helper?

Similar Question: Using logical operators in a Handlebars.js {{#if}} statement Below is the code snippet provided: {{#each dataArray}} <li>{{#isTrue idVal1 idVal2}} display some text1 {{else}} display some text2 {{/isTrue}} & ...

javascripthtmlember.jshandlebars.js

Steps for referencing an autogenerated id in a Firestore collection

I need assistance updating a 'progress' field in a document with an autogenerated ID (using Firestore) every time the progress button is clicked. https://i.stack.imgur.com/hZieN.png Despite my attempts, nothing seems to work. Here is the method ...

javascriptfirebasegoogle-cloud-firestore

Mistakenly appearing at the top of the window instead of the bottom of the window

Utilizing Vue.js to fetch resources from a Laravel API periodically and paginate(), after retrieving the initial 10 instances, I aim to get the next 10. Here's how my method looks: scroll () { window.onscroll = () => { let bottomOf ...

javascriptvue.js

What purpose is served by the use of '.src' in Next.js?

When working with Next.js, I encountered a situation where I needed to set a background image. After doing some research, I came across a solution that involved adding .src at the end of the image reference like this: import bgImg from '../public/imag ...

cssreactjsnext.js

Craft a hierarchical JSON structure out of a different nested JSON object [PAUSE]

Looking to transform an existing JSON object into a new object structure. Here is the current JSON object: { "name": "Parent", "children": [ { "name": "Child1", "children": [ { "name": "GrandC ...

javascriptjson

Babel Compile disrupts the flow of commands

I'm facing an issue while attempting to launch my development server after Babel successfully compiles my files. However, the command chain seems to halt right after Babel displays the compilation success message. Babel has completed compiling 82 f ...

javascriptnode.jsnpmbabeljs

Tips for presenting hierarchical information from my database in ejs

I'm currently working on a genealogy application using node js express and ejs but I'm facing an issue with displaying the database in order (starting from parent). This is the code snippet for retrieving my data and what I see when I log the ou ...

javascriptnode.jsmongodbexpressmongoose

Husky 5: The Ultimate Gitignore Manager

Last week, a new version of Husky was released, known as Husky 5. I came across an interesting article discussing the features and updates in this release that can be found here. Upon migrating to Husky 5 (), I discovered a new directory named .husky with ...

javascriptnode.jsgitgitignorehusky