<img class="cl" src="photo/198.jpg"/></br>
<audio class="cs" controls>
<source src="audio/198 banu nagamothu.mp3" type="audio/mpeg">
</audio>
I prefer not to have audio controls initially, but when the image is clicked, the audio should play using JavaScript and HTML.
Try using the AudioElement.paused property!
$('.cl').click(function() {
var DOMElem = $('.cs').get(0);
DOMElem.paused ? DOMElem.play() : DOMElem.pause();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>Check out the following code snippet:
$('.clickable').on('click', function() {
if ($('.video').paused == false) {
$('.video').pause();
alert('Video paused');
} else {
$('.video').play();
alert('Video playing');
}
});
I'm looking to retrieve the current URL path in my /page/_document.js file. I've created a class and my goal is to implement a conditional statement based on this value. Below is the code snippet (similar to the example provided in NextJS docume ...
Wondering if it's possible to set up a Node.js https server in the cloud9 IDE? Check out this example of a basic https server setup in Node.js. var https = require('https'); var fs = require('fs'); var app = require('./app& ...
Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...
I have a file called [slug].js. What I am attempting to do is add a query parameter to this dynamic route. Here's the code: await router.replace({ pathname: `${router.pathname}`, query: { coupon }, }, undefined, ...
I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...
I have a JSON file containing placeholder articles for testing purposes. I'm using jQuery to parse the data from the JSON file and create an array of objects with the retrieved information. Take a look at my JSON file: { "news": [ { ...
My latest project involves a menu with three separate divs: logo, nav-bar, and right-bar. I decided to use justify-content: space-around to position the elements - the logo on the left, navigation in the center, and right-bar on the right. However, when I ...
As I was working on the following code snippet that triggers a function when the user modifies the wj-input-time value: @Component({ selector: 'my-app', template: '<wj-input-time [step]="1" (valueChanged)="test()"></wj-inpu ...
When clicking on the a href, I am attempting to retrieve a value in my pop-up window. I am using magnificPopup JavaScript Below is the code for my a href tag and I want to fetch the "data-stream" value in the pop-up window. <a class="popup-with-zoom ...
In my Typescript constructor, I am working on constructing a datatable with properties like 'orderable', 'data' and 'name'. One thing I'm trying to figure out is how to control the visibility of one column based on the va ...
Does anyone know how to prevent duplicate records from appearing in a jQuery autocomplete dropdown? I am pulling data from an XML file and want to ensure that each record is unique and only displayed once. You can see the issue here ...
I'm having issues creating an image that plays a GIF on hover. I came across some jQuery code on this website that should work, but it's not working for me. Any thoughts on what the problem might be? Here is the HTML and JavaScript code: $(doc ...
After receiving the JSON Response, { "user_data": { "id": 22, "first_name": xxx, "last_name": xxx, "phone_number": "123456789", }, "question_with_answers" : [ { "id": 1, ...
Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...
Three separate input fields are being used, each with its own name for identification. A validation method is called to ensure that the files selected in these input fields are not duplicates and that they are either images or PDFs but not both. While thi ...
I have the code below in my JavaScript file. $scope.addLookupAction = function () { $("#importForm").attr("action", 'xyz.com'); success:function(response) { $log.info("Redirecting to lookup home page"); ...
My current challenge involves creating space between the menu and the submenu. However, I've noticed that when there is this space, the submenu doesn't function correctly. It only works when the design has no gap between the menu and the submenu. ...
There comes a point when passing the args variable to an anonymous function in Dojo becomes necessary, even though the function itself may not visibly need it. This can lead to confusion as there is no clear indication on the Dojo help page regarding whe ...
I am experiencing an issue with a .js file. The change event is only triggering when the page loads, rather than when the selection changes as expected. $(document).ready(function(){ $("#dropdown").on("change keyup", colorizeSelect()).change(); }); f ...
Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...