Hello, I'm currently facing a challenge in changing my css3 -webkit-animation-play-state property from paused to running upon clicking on another div. Does anyone have any suggestions on how I can achieve this? I believe JavaScript might be the way to go.
It seems like accomplishing this task without the use of JavaScript is unlikely. By implementing JavaScript, you can retrieve the style.webkitAnimationPlayState of the specific element you want to modify. If the value is an empty string, then it indicates that it is currently set to its initial state, which is "running".
In the provided code snippet, clickDiv refers to the div that triggers the action when clicked, while animationDiv corresponds to the div whose webkit-animation-play-state property is being altered:
clickDiv.addEventListener("click", function(){
if (animationDiv.style.webkitAnimationPlayState == "paused") {
animationDiv.style.webkitAnimationPlayState = "running";
}else if(animationDiv.style.webkitAnimationPlayState == "running" || animationDiv.style.webkitAnimationPlayState == ""){
animationDiv.style.webkitAnimationPlayState = "paused"; // toggling assumption
}
console.log(animationDiv.style.webkitAnimationPlayState);
});
Check out this amazing example at http://jsfiddle.net/JCzpd/37/
var animationDiv = document.getElementById("aD");
var clickDiv = document.getElementById("cD");
clickDiv.addEventListener("click", function(){
if (animationDiv.style.animation == "") {
animationDiv.style.animation = " anim .5s forwards";
//change the line below for a different animation effect
//animationDiv.style.animation = " anim running .1s infinite";
}else{
animationDiv.style.animation = ""; // assuming you want to toggle
}
}); #aD{ background-color:green;
height:30px;
margin:2px 0 5px 2px;}
#cD{background-color:blue;}
@keyframes anim{
0%{ background-color:green;}
100%{ background-color:red;}
}
#aD:hover{animation: anim 1s infinite;
cursor:pointer;}<div id="aD">animated div</div>
<div id="cD">click div</div>Modify the commented line to try out different animations
My code seems to be having issues as the PHP file is not receiving the POST-variables. I am unsure of what could be going wrong, so I am reaching out for some guidance. Here is the HTML: <div id="preloader" class="preload"></div> <div id=" ...
Looking for a way to create a single column layout with items of equal width using the Material-UI Grid system? Check out this sample code: <Grid container align="center" direction="column"> <Grid item className={classes.item}> < ...
Utilizing Javascript, NodeJS, MongoDB, Express Within my application, a user is expected to enter text in an input field and upon clicking the submit button, the text should appear on the page. I have succeeded in posting text to the page; however, after ...
My current component handles sending a payment order to my stripe account on the client-side. Everything seems to be working fine, but I'm struggling to find a way to retrieve the response or token from stripe containing the order details, which I nee ...
** I'm still learning React, so any assistance is greatly appreciated! ** A Little Background I have a modal (bootstrap4) hidden within the main app component, containing a form. The form is automatically filled with information from the selected re ...
I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...
I'm developing a plugin using jQuery and knockout.js. Currently, I have a scenario where I need to manipulate radio buttons with knockout data-bindings. However, I've encountered an issue when trying to uncheck a radio button by clicking another ...
I managed to recreate the modifications of my complex script in a simple jsfiddle, which can be found here. Below is the code I am working with locally: HTML <input type="text" id="rangeStart" value="updateMe" /><br/> <input type="text" c ...
As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...
When I click on the first delete link, I want to display the value from the first input box. Similarly, when I click on the second delete link, I want to show the value from the second input box. Currently, it is always showing the value from the first del ...
I am attempting to append a node tree to the DOM that has been created using createHTMLDocument. Originally, I approached it like this: (doc represents the node tree) while(doc.head.children.length > 0){ iframewin.document.head.appendChild(doc. ...
Currently, I am utilizing an external library within my Angular 6 application that incorporates customizable event listeners. Specifically, I am employing flowchart.js, although similar issues may arise with other libraries. In the case of flowchart.js, i ...
Currently, I am facing an issue with an empty JSON array. shoppingCart: [] In addition to the empty array, I also have a JSON object defined as follows: let product = {"name": "name", "price": "price", "quantity": "quantity", "logoPath": "logoPath"}; M ...
Having an issue with my material-UI datepicker where the date is not updating correctly when I try to select a new one. The initial value set in useState works fine, but I want the datepicker to smoothly update when I choose a different date. You can see a ...
I am encountering an issue with a 100mb object that I am trying to return using a GET request: function completeTask(req, res) { // generates a large object on a child process, then sends it back to the main process res.json(bigObject); // <--- p ...
Currently, I am utilizing Valum's Ajax File uploader for handling same-page file uploads. The issue I'm facing is that despite numerous attempts and variations in my script, I consistently receive "undefined" when trying to access responseJSON[&a ...
I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing ...
Seeking assistance to utilize all available values in my code. bericht.find({ room: room }).toArray(function(err, docs) { assert.equal(err, null); str2 = str2 + docs.message; The function I'm using can successfully loca ...
I'm attempting to validate whether the sha256 hash stored in my sqlite database corresponds with the sha256 hash of the password that the user transmitted to my NodeJS server. The Auth() method is meant to deliver either a true or false result. Is the ...
I'm attempting to perform a depth-first search on a complex JSON object, such as the one available through this link. My goal is to generate a modified object structure that looks like this: [ { name: "Original Object", children : [ ...