retrieve the present image from the picture HTML element

<picture>
    <source media="(min-width: 992px)" srcset="/images/xxxxxxxxxx.jpg">
    <source media="(min-width: 768px)" srcset="/images/yyyyyyyyyy.jpg">
    <img src="/images/zzzzzzzzzz.jpg">
</picture>

What is the best way to retrieve the active image or another tag using jQuery or CSS?

Answer №1

Upon reviewing the feedback, I now have a clearer understanding of your needs.

Consider testing out this solution:

$('picture').on('change',function(){
    console.log($('picture > img').attr('src')); //this will display the image URL
})

I trust that you will find this suggestion helpful.

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

Upon clicking the button, my objective is to showcase the table and initiate a new window

Once the first execution is complete, the table is displayed and the outs_print.php file opens in a new tab. Upon executing outward_print.php again, it stays within the same tab. I am looking to have the table (outs_print.php file) open in a new tab after ...

How can jQuery be used to populate input fields?

I am trying to find a way to use jQuery to automatically add the word "username" to the value field in the code snippet below. The goal is to have the word disappear when the user clicks on the input box, leaving it empty for the user to input their userna ...

Updating the CSS link href in ASP.NET using code behind

I'm struggling with changing the CSS href in the code-behind of my .ASPX page. I've tried various methods but haven't found a solution that works as intended. HTML Markup: <link id="linkCSS" runat="server" href='/css/1.css' re ...

What are the steps for loading JSON data into a select dropdown with the help of AJAX?

I am trying to create a dropdown list of schools using the select tag. Currently, I have hard coded values for the list, but I want to fetch the data from a RESTful service instead. Can someone please provide guidance on how to achieve this? <html& ...

The list marquee in HTML, JS, and CSS is not being properly rendered on

I recently made changes to a code that showcases a marquee scrolling a basic HTML list. Check it out here: I am facing 3 issues that I am struggling to resolve: JS: I want the marquee to continuously show text re-entering from the right just after it ...

The issue lies in the fact that the customization of the Ant Design theme is not being properly implemented

I'm in the process of customizing the antd theme in conjunction with next.js. After researching online, I came across a helpful example and implemented the setup like so: // package.json "dependencies": { "@ant-design/icons&quo ...

Utilize Angular directive to encapsulate JQuery

I am struggling to integrate the jquery codepen provided by mnpenner into an angular directive. This is my first time working with directives and I can't seem to get it functioning... http://codepen.io/mnpenner/pen/mFokd I attempted to add the code ...

Unable to stop the default action in IE for certain code

I am facing an issue on my website where the JavaScript I have implemented to prevent page reload is not working in Internet Explorer. The code functions properly in all other browsers, except IE. Here is the JavaScript code snippet that should prevent pa ...

Adding a class-matched element with a corresponding ID

Despite finding similar questions, I am still unable to achieve the desired outcome. Here is a list: <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> <li class="class4"&g ...

The auto setting in the CSS clamp function is not functioning properly when used as the minimum, value,

I have been trying to use the css function clamp() to control the height of my div, but for some reason it is not behaving as I expected. .container{ height: clamp(200px, auto, 400px); } Interestingly, it works perfectly fine when I define the heights ...

What is the best way to ensure that my program runs nonstop?

Is there a way to have my program continuously run? I want it to start over again after completing a process with a 2-second delay. Check out my code snippet below: $(document).ready(function () { var colorBlocks = [ 'skip', 'yell ...

Obtain Data Grid from Website

I need to extract a table with the following columns: "Date|Open|High|Low|Close|No.of Shares|No.of trades|Total Turnover|Deliverable Qty" from the website "" Below is the code I am using: Sub Macro_BSE() Application.ScreenUpdating = False Dim File ...

"I am facing an issue where the button does not appear centered after using jQuery

I can't help but notice that when applying CSS directly, my buttons end up centered horizontally. Yet, when I insert the same code using append(), the buttons seem to align towards one side instead. Here is the HTML/CSS code snippet: <div style=" ...

Launch Bootstrap modal when clicking on an Iframe

I'm currently working on implementing a button that triggers a modal with an iframe inside. The goal is for the iframe to load only when the modal is opened. However, upon clicking the button to open the modal, nothing loads and there are no error mes ...

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

Working with HTML5 canvas to draw multiple images

Here is the code I'm working with: http://jsfiddle.net/zyR9K/4/ var Enemies = { x: 25, y: 25, width: 20, height: 30, speed: 0.5, color: "#000", draw: function () { canvas.fillStyle = ...

fetch information using ajax and jquery

I'm facing an issue with my ajax request on my website. I'm trying to dynamically fetch pages from a database using jquery and ajax. However, I'm not getting any response, and I'm unsure whether the problem lies in my php code or my j ...

Automate the vertical resizing of a div element using code

Currently, I am utilizing Angular4+. I am looking to dynamically resize a div vertically, but I am unsure of how to go about it. I am uncertain about where to even begin and how to accomplish this task without resorting to using jQuery. Are there any sugg ...

Encountering the 'data is null' error when making a Twitter API request, yet the data is successfully displayed in the browser

I am attempting to show the number of followers for a Twitter account, but when I connect to the API using this code: $.getJSON("https://api.twitter.com/1/users/show.json?screen_name=uswitchTech&include_entities=true", function(data) { console.log ...

Steps to invoke a function to add an element into a list

Every time a user clicks on a button, I want to generate a new tab. In this tab, when the user clicks again, I want a function to be called like: onclick('+reportname+','+report type+') onclick("'+reportname+'","'+repor ...