Set panning value back to default in Ionic

I need assistance with resetting the panning value. Essentially, I would like the panning value to return to 0 when it reaches -130.

Below is my code snippet:

swipeEvent($e) {
  if ($e.deltaX <= -130) {
      document.getElementById("button").click();
      console.log('swiped left')
      };
  if ($e.deltaX < -131) { $e.deltaX == 0 }
}

I have already attempted the following code:

if ($e.deltaX < -131) { $e.deltaX = 0 }

Unfortunately, this solution did not work as expected. Can anyone provide guidance on how to fix this? Thank you!

Answer №1

Issue resolved!

All it took was adjusting the HTML code like so:

<div class="cards" (pan)='swipeEvent($event)'>

to this:

<div class="cards" (swipe)='swipeEvent($event)'>

TypeScript solution:

swipeEvent($e) {
  if ($e.deltaX <= -130) {
      document.getElementById("button").click();
      console.log('swiped left')
      };
}

Hoping this tip proves useful to someone down the line!

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

Testbed: Issue encountered: Unable to resolve all parameters for PriDateInput component

I am facing an issue while creating an Angular Component with the help of TestBed. The error message I receive is as follows: Error: Can't resolve all parameters for PriDateInput: (?). error properties: Object({ ngSyntaxError: true }) ...

Effortlessly sending information to the Material UI 'Table' element within a ReactJS application

I have integrated a materialUI built-in component to display data on my website. While the code closely resembles examples from the MaterialUI API site, I have customized it for my specific use case with five labeled columns. You can view my code below: h ...

What is the best way to utilize the typescript module for detecting and managing typescript errors and warnings in your code?

Currently, I am experimenting with the typescript module to programmatically detect typescript errors. Below is a simplified version of what I have been working on: var ts=require('typescript') var file_content=` interface Message{ a:string ...

The asynchronous function is not being executed by onSubmit

I am attempting to create a function that will generate a gif when the "get gif" button is pressed. However, I am facing an issue where nothing shows up in the console and the page reloads. 1) The requirement is for the client to enter a value 2) Set th ...

Issue with loading Squarespace form when executing jQuery on Internet Explorer

One challenge I'm facing is that Squarespace builds their forms using JavaScript (YUI) and loads their code on document ready. How can I ensure that my code waits until their form is fully loaded? This issue seems to only occur in Internet Explorer. ...

Stopping a parent's event from firing when clicking on child elements without interfering with the child element events

Having read several posts such as this one, I am exploring a method to click on the parent div for it to hide, without hiding when clicking on either the search box or the 'click for event 2' text. I have tried using onclick stop propagation to ...

The code to assign a value to "parentId1" using window.opener.document.getElementById is malfunctioning

Trying to retrieve the value from my child.jsp and pass it to my parent.jsp using window.opener.document.getElementById("parentId1").value = myvalue; Despite no errors appearing in the console, the value is not successfully transferring to the parent pag ...

problem of keeping behat/selenium browser open after execution

I am attempting to execute the behat/selenium test with Chrome browser by running the following feature scenario. I would like to keep the browser window open instead of closing the Chrome immediately. Even though I have implemented the iWaitForSeconds ste ...

Is there a way to iterate through this?

I have data that I need to loop over in JavaScript. Since it is not an array, the map function is not working. Can someone help me loop over it or convert it into an array so that I can iterate through it? { "7/15/2021": { "date": ...

Updating Button Text or Functionality in IMG.LY Editor using Angular Framework

Currently using version 5.17.2 of the imgly photoeditor and struggling to customize the export button and close button. I want the export button to display 'Upload' and have the close button always enabled, but so far I haven't been successf ...

What's the rationale behind receiving the second before the first?

I've been digging into ES6 promises, and I thought I had a handle on it for a moment. However, it seems like I may have hit a roadblock. What I'm aiming to do is handle a series of file operations where each operation depends on the completion o ...

Incorporate seamless integration by using the npm install command

I am currently facing an issue where I need to identify and remove unused dependencies from my package.json file every time I run npm install for my app. Is there a method to automatically include the npm package https://www.npmjs.com/package during the n ...

Toggle the visibility of a div based on whether or not certain fields have been filled

Having a form with a repeater field... <table class="dokan-table"> <tfoot> <tr> <th colspan="3"> <?php $file = [ 'file' => ...

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

I am experiencing an issue where the map is not displaying at all, leaving a blank space where it should be. Despite following Leaflet's quick-start guide, I have been unable to determine the cause of this problem. Here is the code that I currently h ...

Methods for validating ajax response with Jasmine

I'm a newbie when it comes to jasmine and I'm trying to figure out how to verify if a specific node is present in the ajax response. Currently, I'm using grunt to run jasmine from the command line and have successfully tested if a function i ...

Issue with Angular form not displaying data from bound object

Currently, I am in the process of designing an angular form that consists of 2 input fields. The objective is to submit these values to a function for further processing. I have double-checked to ensure that both FormsModule and NgForm have been imported ...

Is it possible to display two separate pieces of content in two separate divs simultaneously?

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <span>Is React a JavaScript library for creating user interfaces?</span>, document.getElementById("question1") ) ReactDOM.render( <form class="options"> ...

What is the best way to exhibit information from a get request within an option tag?

My GET request is fetching data from a REST API, and this is the response I receive: { "listCustomFields": [ { "configurationType": null, "errorDetails": null, "fieldId" ...

What method is used to initialize the variables in this JavaScript snippet, and what other inquiries are posed?

As a backend developer, I'm looking to understand this JavaScript snippet. While I grasp some parts and have added comments where I am clear, there are still sections that leave me with bold questions. function transformData (output) { // QUESTIO ...

The installation of bower angular-card-input failed during the execution of the Jenkins build script due to an HTTP request

I encountered an issue when trying to run a bower script for building a frontend in Angular: When executing the bower command, I received an error regarding git fetch from the following link: https://github.com/angular-ui/ui-utils.git, with exit code ...