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
I am facing an issue with my array variable that contains objects. Here is an example of how it looks: [{name: 'Name 1', price: '10$'}, {name: 'Name 2', price: '20$'}, ...] In my view, I have a list of products bei ...
Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...
Is there a way to create a navigation menu in Windows 8 Metro JavaScript that includes header menus and section labels, similar to the example shown below? ...
The dropdown menu that lists states works fine in Google Chrome, but duplicates groups in Internet Explorer. In Chrome, there are 2 groups, but in IE there are 4. How can I fix this issue in IE as well? Thank you. Here is the code snippet: <!DOCTYPE h ...
In my current project, I've been attempting to integrate react-tinder-card. After running the command: npm install --save react-tinder-card I encountered this error in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency ...
My Django application is successfully deployed on Heroku, but I'm facing an issue with executing Ajax in the template. The Ajax functionality works perfectly fine on my local machine, however, it's not working on Heroku. I've included a snip ...
I'm facing some challenges with clearing floats (or it could be something else?). My goal is to have the #newsbar div free from the previous floats so that its width can extend 100% across the page/browser. I believe I've tried everything within ...
Is it possible to retrieve the absolute URL of a web font specified within an @font-face rule using tools like Firebug? For example: When inspecting the main.css file for a website in Firebug, you may come across this code snippet: @font-face { font ...
One of my Angular controllers has the following line. The event handler works when the initial page loads, but it stops working when navigating to a different item with the same controller and template. document.getElementById('item-details-v ...
Starting with what I have: core.app.get('/download/:key', function (req, res) { require("./../../module/fileupload.js").download(req.params.key, function(file, filename) { console.log(file + " - " + filename); if (file != nul ...
Is there a way to dynamically update the background color of a div element within a table based on values stored in a json array from a database? ...
In my scenario, I am displaying data in a child action and utilizing buttons to modify the displayed information. Here is an example of how I am achieving this: Index.cshtml <head> <script type="text/javascript"> $("#RefreshView").on ...
Is ISR working for anyone in the NextJS 13 Beta version? I have set revalidate to 15 as follows. export const revalidate = 15; However, even after running `npm run build`, the page still remains a statically generated site (SSG). The symbol is showing u ...
In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...
I've been working on pushing data to the firebase rtdb and I want to make sure I can easily access it from other places. Here's the code snippet that I'm using to add data to the rtdb: function addStudentHandler(studentData) { fetch( ...
I am facing a challenge when trying to remove an event listener. After running the script, I receive an error message stating that changeGirl.off("click") is not a function. Despite this issue, everything else within the code is working perfectly fine. Any ...
My route configuration using react-router v3 is as follows: <Route component={App}> <Route path="login" component={Login} /> <Route path="logout" component={Logout} /> <Route path="/" component={Admin}> <IndexRoute com ...
I have multiple divs structured like this: <div id="income"> <h5 onclick="toggle_visibility('incometoggle');">INCOME</h5> <div id="incometoggle"> <h6>Income Total</h6> </div> </div> <d ...
Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...
Looking for a solution to dynamically receive input from the user in my function: divResize = { myDiv:function(width, height) {...} } divResize.myDiv(100,400); I want to make these numbers interactive and changeable based on user input. How can I achie ...