restore the HTML element to its initial position after being moved

I am utilizing

document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)';

in order to relocate an HTML element.

How can I return it to its original position for reusability without the user noticing the transition back?

My current solution involves:

document.getElementById(event.data.name).style['-webkit-transition'] = '0s';    
document.getElementById(event.data.name).style['-webkit-transform'] = 'translate(0px)';

Is there a more optimal approach?

Appreciate your assistance

javascriptjquerycsshtml

Answer №1

To begin with, store the current style['-webkit-transform'] value in a temporary variable. Then, after the translation, reassign it back to style['-webkit-transform'] as follows:

var temp = document.getElementById('Droping1').style['-webkit-transform'];
document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)';

Afterwards:

document.getElementById('Droping1').style['-webkit-transform'] = temp;

In order to hide the transition back to the original position from the client, set the -webkit-transition-duration property to 0s before 

document.getElementById('Droping1').style['-webkit-transform'] = temp;
so that the change occurs instantaneously, similar to how you modify the -webkit-transform property using JavaScript.

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

Filtering an Array of Objects on the Fly in Vue.js

I'm currently working on a Vue.js app where I need to dynamically apply filter values to an Array of objects based on their field values. Each object in the Array has various fields that I want to filter by. The challenge is that each field can have m ...

javascriptvue.js

Unable to process JSON data object

Having trouble with processing a json object. The form on the page contains a dropdown where selecting a truck number should autofill the rest of the form with data from a json file. Sample data: [ { "truckNum":"62-559", "description":"MOF ...

javascriptjqueryjsonexpresspug

The container is not showing the JSTree as expected

My current project in JavaScript involves integrating a JSTree structure, but I'm encountering an issue where the tree is not showing up or rendering within its specified parent container. Below is the snippet of code I have been using to attempt to d ...

javascripthtmljstree

Uncovering the class value of an element using CSS

Is there a way for me to use CSS to access the numbers (1 and 2 in this example) at the end of the paragraph's class attribute? <p class="cooking-step-1"><br> <!-- Second step ... --><br> </p> <p class="cooking-s ...

css

Object with a specific name sitting within an array nested within another object

I have a node.js model that includes an array called keys containing multiple objects. I am looking to display these named objects in the view. Below is the model: var mongoose = require('mongoose'); var website = require('./website' ...

javascriptnode.jsmongodbexpress

Hide the search results if the user leaves the input field blank

I am trying to implement Live Search JSON Data Using Ajax jQuery, and I want to be able to search through multiple JSON files. When the page initially loads with an empty input field, no results are displayed. However, if you type and then delete text in ...

javascripthtmljqueryjsonajax

Cloning Div repeatedly instead of the specified quantity

My JSON data contains four sections and I want to clone my html div based on the number of sections. For example, if there are 100 sections in my JSON, I would like the div to be cloned 100 times. Currently, my div is getting cloned with the JSON data app ...

javascriptjqueryjsonmethodsclone

Rule for restoring scroll position upon reloading web pages in browsers

When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...

javascripthtml

Immersive Bootstrap Header Design

I've been attempting to achieve a full-screen background within the header element, but for some reason it's not displaying properly? Code header { position: relative; width: 100%; min-height: auto; text-align: center; color: #fff; ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Symfony along with React router have encountered an error: route not found

In my current project, I am working with Symfony3 and integrating React.js along with react-router to create a bundle. One issue I have encountered is that when using the routing in React, if I refresh the page, the Symfony routing module displays 'N ...

javascriptphpreactjssymfonyreact-router

Importance of value attribute in <input ng-model ..>

Maybe a silly inquiry, but I'm curious about the purpose of having value="" in this particular situation: <input ng-model="something.name" value="" class="input-xlarge" /> Are there any alternatives to keeping the value attribute empty? I init ...

javascriptangularjs

Switching from real pixels to CSS pixels

The details provided in Mozilla's documentation on elementFromPoint clarify that the coordinates are specified in "CSS pixels" rather than physical pixels. This raises a question about what exactly CSS pixels entail. Many assume that a pixel in CSS is ...

css

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

javascripthtmlbuttonparent

Convert HTML content to a PDF file with Java

Welcome to the community! My project involves extracting data from a website containing information on various chemical substances and converting it into a PDF while preserving the original HTML formatting, including CSS styles. For example, here is a li ...

javahtmlcsspdf

Using JQuery to apply a CSS class or check for a CSS class on multiple button elements that

Being new to Jquery and Javascript, I am facing challenges in understanding how to implement the following. Throughout my site, I use the same button class, and I am attempting to make Jquery apply a "clicked" class only to the button that was clicked, no ...

jquerycssbuttonaddclass

How is it possible that this component is able to work with slotting without needing to specify the slot name

I have created two Web Components using Stencil.js: a Dropdown and a Card. Within my Dropdown, the structure is as follows: <div class='dropdown'> <slot name="button"/> <slot/> </div> The nested chil ...

javascripthtmlstenciljsslotslots

Unable to save object in JavaScript memory

Currently, I am in the process of implementing a Stack in JavaScript using a LinkedList. However, I encountered an issue when trying to instantiate a Node class. When attempting to create a variable let newNode = new Node(x), I am receiving undefined. I a ...

javascriptalgorithm

Populate a select list in real time with dynamically generated options

I'm facing a challenge at the moment; I am using JavaScript to dynamically generate select boxes, however, I require Ajax to populate them with options. At the moment, my code is returning undefined and I am unsure of how to proceed. While my PHP succ ...

javascriptajaxdynamic

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

I have a scenario where I need a table inside a div to take up the entire space of the div, with the second column and its inputs expanding as much as possible to fill the width (i.e. col1+col2 = div width). Due to being nested within another div, absolut ...

htmlcsshtml-tableflexbox

Error: Unable to access the property 'fn' of an undefined object in electron version 2 using Angular 6

I am currently utilizing Angular 6.0.3 and electronjs 2.0.2 with the package.json configuration shown below: { "name": "test", "version": "1.0.0", "license": "MIT", "main": "electron-main.js", "author": { "name": "Moh ...

javascriptangularelectronangular6