Unleash the power of multiple mouse/touch events with OGX.JS!

I am attempting to calculate the distance after a touch or mouse movement over two separate elements using OGX.JS. Utilizing the built-in touch dist function has been successful.

this.touch.dist.set({
      target: '.box1',
      cb_move: function(obj){ ... }
 });

However, I am unsure how to add another calculation. If I try to add a second instance like this, it just overrides the first one.

this.touch.dist.set({
      target: '.box2',
      cb_move: function(obj){ ... }
 });

Any assistance would be greatly appreciated. Thank you!

javascriptogx.js

Answer №1

To make another instance of touch.dist, you need to create an instance of OGX.Touches.Move.

//default instance
this.touch.dist.set({
    target: '.box1',
    cb_move: function(obj){ ... }
});
this.touch.dist.enable();

//create new instance
this.touch.dist2 = new OGX.Touches.Move(this);
this.touch.dist2.set({
    target: '.box2',
    cb_move: function(obj){ ... }
});
this.touch.dist2.enable();

After that, remember to disable the instances when exiting the view by using the following code:

this.disable = function(){
    this.touch.dist.disable();
    this.touch.dist2.disable();
};

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

How to properly escape a double quote in the `eval` function

I am facing an issue with a link button in a gridview as shown below <asp:LinkButton ID="lbtnEdit" runat="server" OnClientClick='<%# String.Format("Edit(\"{0}\", \"{1}\");return false;",Eval("Comment").ToString(),Eval("Statu ...

javascriptasp.neteval

Transition smoothly between two images with CSS or jQuery

I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...

javascriptjqueryhtmlcssimage

What is the reason for handlers not being able to work without passing parameters in React?

I recently made a discovery but I'm still puzzled about how it works. In the past, when creating React components, I used to follow this pattern: class App extends React.Component { state = { input: '' } onChangeHandler = event = ...

javascriptreactjs

Storing the locations of draggable items with personalized user-created material

If I needed to store dynamically created content in a specific position within a container, what would be the best approach? For instance, if a user enters a YouTube URL into an input box and it generates an embedded video in a box container upon hitting ...

javascriptjqueryhtmlgoogle-chrome-extensionlocal-storage

Encountering an Unexpected Identifier Error in the JavaScript Console

const blogPosts = [{ title: "Dogs are just okay", author: "Jake", comments: ["Great Post", "You're awesome!"] }, { title: "Dogs are truly amazing", author: "Dog Lover" comments: ["<3", "Get lost, fool"] } ] I am aware ...

javascriptgoogle-chromeconsole

Customized wrapper for JQuery's ajax method. Callback is triggered without passing any parameters

As a newcomer to JavaScript, my questions may seem basic. I find myself frequently using GET and POST requests in my code, so I decided to create a wrapper function to streamline calling jQuery's ajax function. /** * Makes Get request * @param url ...

javascriptjqueryajax

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

I have a VueJS-based app that features a multistep form with a next button. You can check out the functioning of the app here: My current challenge is ensuring that once the user clicks the next button, the top of the following question becomes visible. I ...

javascriptvue.js

Received undefined response from Axios.get() request

While working with the code below, I encountered an issue. The axios get request from await axios.get('/products/api') is functioning properly and I can see the data in the console. However, for await axios.get('/users/api'), 'Unde ...

javascripthtmlnode.jsreactjsexpress

bespoke HTML elements and properties

I'm currently facing some difficulties and I am unsure of how challenging it can be. I have tried following various tutorials, including those on SO and YouTube, but they all provide different approaches leaving me stuck. My goal is to create a custo ...

javascripthtml

The modifications made to the input type="time" in View do not get updated in the Model within Angular

I have been attempting to validate the input type "time", but I am encountering an issue where changes in the view are not reflected in the model if any of the input fields are left empty. For example: https://i.sstatic.net/1U0sO.png When a user change ...

javascriptangularhtmltypescript

Is there a way to locate the final element in a specific angular ng-repeat loop subset?

The final entry in the labels section may not be checked, making $last unsuitable for this scenario. This results in the following sequence: peaches, bananas, cherries, watermelon, How can I locate the last item in an angular ng-repeat loop while using an ...

javascriptangularjs

instructions on modifying a singular row within a v-data-table (excluding design changes, focusing on the data itself)

For this specific scenario involving v-data-table, I encountered a challenge in finding an answer. While I am aware that templates and slots can be utilized to modify columns, my query pertains to reflecting values in only one row. Essentially, I aim to ad ...

javascriptvue.jsvuetify.jsv-data-table

Using [(ngModel)] in Angular does not capture changes made to input values by JavaScript

I have developed a custom input called formControl, which requires me to fetch and set its value using [(ngModel)]: import { Component, Injector, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCE ...

javascriptjqueryangulartypescriptangular-directive

Discovering a User's Current Game on Discord.js: How Can You Find Out?

Hello, I'm attempting to implement a feature on my gaming server that automatically assigns roles based on the game people are playing. I've searched for a solution, but I seem to be at a standstill. Could someone please point out what mistake I ...

javascriptnode.jsdiscorddiscord.js

Issue with Jquery UI sortables not functioning properly

Struggling with getting a sortable list to work using jQuery UI. The ul element is receiving the class 'ui-sortable' but nothing seems to be happening. To demonstrate this issue, I created an example since the original javascript code is quite c ...

javascriptjqueryjquery-uijquery-ui-sortable

"Customizing the appearance of Angular Formly forms by adding classes to the surrounding div element

<formly-form model="vm.model" fields="step.inputs" options="vm.options"> <div style="text-align:right"> <button type="submit" wz-next class="btn btn-primary submit-button" ng-disabled="innerForm.$invalid">Next</button> ...

javascriptangularjsangular-formly

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...

javascriptjquerycss

trouble combining two arrays of JavaScript objects

I'm facing a challenge with an object array. I need to add a new object "WITH" a specific index, but I'm unsure of the correct approach. This is my current attempt: //ORIGINAL DATA: this.fetchedData = [{ "startMinute": 0, //Remove "annotati ...

javascriptjqueryarrays

Create a typescript class object

My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...

javascripttypescript

Problem with jQuery form button in dynamic table detecting rows after the first

I am currently working on a file that generates a dynamic table based on the records in a database. Each row in the table has a button to delete that particular row. The code I have written works perfectly for the first row, but it fails to detect the row ...

javascriptphpjquerymysql