I need assistance with changing the background color of a div based on whether an audio file is playing or not.
$('.uprow2').on('click', function() {
$('#karma')[0].play();
});.uprow2 {
width: 680px;
height: 60px;
background: #000000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uprow2">
<p class="song">LISTEN - KARMA POLICE</p>
</div>Please provide any suggestions or solutions to achieve this functionality.
Thank you!
To improve this, it is recommended to listen for events directly on the audio element itself. This way, the state will not be dependent on the button, and it will still function properly even if the user changes the playing state using the player controls. You can try implementing the following code:
$('#music').on('playing', function() {
$('.soundbar').addClass('active');
}).on('ended pause suspend error', function() {
$('.soundbar').removeClass('active');
});
Give this a shot
$('.uprow2').on('click', function(){
if ($(this).hasClass('play')) {
$(this).removeClass('play');
} else {
$(this).addClass('play');
}
});.uprow2 {
width: 680px;
height: 60px;
background-color: #000000;
}
.play {
background-color: #FF0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<div class="uprow2"><p class="song">LISTEN - KARMA POLICE</p></div>
</html>To alter the background-color of this particular div, simply include jQuery code like so:
$(this).css('background-color', 'desired-color');
Take a look at the solution provided below:
$('.uprow2').on('click', function(){
$('#karma')[0].play();
$(this).css('background-color', 'yellow');
});.uprow2 {
width: 680px;
height: 60px;
background: #000000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="uprow2"><p class="song">LISTEN - KARMA POLICE</p></div>
</html>If you want to change the button background, you can utilize Media events for that purpose.
var $audioElement = $('#karma');
$audioElement.on('playing abort stalled ended pause suspend error', function(ev) {
$('.uprow2').toggleClass('myPlayingClass',ev.type == "playing");
});.uprow2 {
width: 680px;
height: 80px;
background: #000000;
color:white;
}
.myPlayingClass{
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uprow2">
<audio id="karma" controls src="https://www.w3schools.com/tags/horse.ogg">
Your browser does not support the audio element.
</audio>
<p class="song">LISTEN - KARMA POLICE</p>
</div>Having trouble passing the "filename" variable from main.php to save_sign.php. Can anyone provide assistance? main.php <? $filename="222222"; ?> <script> $(document).ready(function() { $('#signArea').signat ...
I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...
I'm encountering an issue where the CSS styling applied to every button in my NavBar is causing a specific button labeled 'Search' to disappear when it shouldn't. The problem stems from NavBar.css, which contains a media query that unin ...
I am currently facing an issue where the focus is not being ignored when the drawer is closed. Even with the showDrawer reference set to false, I can still tab through links in the closed drawer. Setting tabindex="-1" on the <nav> element does not pr ...
Trying to create an HTML Email with fixed height blocks? Let's align those blocks! The attached demo shows disproportionate heights and misalignment issues. How can we resolve this problem? DEMO: http://jsfiddle.net/smu0gyx7/ ...
My system includes an input search field where I can enter the make and/or model of a vehicle to conduct a search based on that term. The challenge arises when attempting to distinguish between the make and model, especially for makes with multiple words ...
I have implemented 3-tier architecture in my demo application. Currently, I am facing an issue while trying to invoke a method from the business logic layer using Ajax in the presentation layer. It seems like there is an error related to passing the URL. ...
This specific code snippet is utilized within my application to format numbers accordingly, resulting in a decimal number paired with a symbol. The function expects the maximum value to establish the symbol and the number needing formatting as the argument ...
I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...
I have upgraded my vbulletin to version 4.2.0 and I successfully added a custom button to its editor following this tutorial: Now, I am trying to incorporate a syntax highlighter code using this button. When I use the code provided below, it works perfec ...
I am currently working on a website layout where I want to display an image with some information below it, and the information should have a colored background with some margin around it. However, when I try to view the code I have written, the margin i ...
Here is the structure of my folder: modules module-and index.js module-not index.js module-or index.js module-xor index.js moduleBundler.js The file I'm currently working on, moduleBundler.js, is re ...
I have been attempting to retrieve a response from the following URL using PhantomJS:- https://www.trivago.com/api/v1/bin/accommodation/2891353/deals?iPathId=34812&iRoomType=1&aRooms=&aDateRange%5Barr%5D=2017-05-24&aDateRange%5Bdep%5D=2017 ...
Hello there, I'm a beginner so please forgive me for any lack of knowledge. const example = { myFunction(){ console.log(this); }, myFunction2(){ function myFunction3(){ console.log(this) } return ...
I'm facing a challenge that I've been trying to resolve using just CSS, but I've hit a roadblock. The issue at hand involves aligning multiple spans next to each other and making them equal in height. The height is not fixed and depends on ...
Just a heads-up, I'm new to HTML development... Currently working on a website using Bootstrap. There are some buttons on the left side shown in the screenshot, and my goal is to update the content on the right without having to reload the entire pag ...
Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...
Working within Angular 4, I've set up a navbar and menu component that lists various tasks pulled from a web service. Clicking on a task in the menu component opens up the edit task component, which displays a form for editing the task. The form fiel ...
Incorporating angularjs and bootstrap3, I'm in search of the best way to center widgets within a panel and achieve responsive behavior. Interestingly, the results vary across browsers, particularly in Firefox. Within my code, I have 4 column divs str ...
Having recently transitioned from on-premise databases using Oracle 11g to the Cloud where I needed to connect to Oracle 12c, I encountered an issue with my nodejs application. While it worked fine on-premises, in the cloud it threw the following error: e ...