What is the reason behind jQuery(this).css('background-image') returning the browser's URL?

There are three divs in the code snippet below.

<div id="div#product_img_wrapper">
    <div id="product_design1" class="timage"  style="z-index: 20; background-image: url('');"></div>
    <div id="product_design2" class="timage"  style="z-index: 20; background-image: url('');"></div>
    <div id="product_design3" class="timage"  style="z-index: 20; background-image: url('');"></div>
</div>

The following jQuery function is used to iterate through the divs above.

jQuery('div#product_img_wrapper div').each(function(){

            var background = jQuery(this).css('background-image').replace('url(','').replace(')','');

            if(background != 'none')
            {
                console.log(jQuery(this));
                console.log(background);
            } 


        });

Output

"http://localhost/project/index.php?option=com_project&controller=project&task=project&method=1"
"http://localhost/project/index.php?option=com_project&controller=project&task=project&method=1"
"http://localhost/project/index.php?option=com_project&controller=project&task=project&method=1"

The goal is to retrieve the background-image attribute of each div. However, the code returns the browser URL instead. What could be the issue with the above code? Why does jQuery(this).css('background-image') retrieve the browser URL?

javascriptjqueryhtmlcssforeach

Answer №1

url('') is a special relative URL that actually points to the current page.

What you're seeing is the URL you input being transformed into an absolute URL rather than remaining in its original relative form.

Answer №2

The source of the link is local and it has been changed to absolute.

To obtain the background, use the following code snippet :

var backgroundImage = jQuery(this).css('background-image').replace('url(' + location.href,'').replace(')','');

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

Stop the link height from changing when hovered over

Incorporating Angular, Angular Material, and Angular Flex-Layout, I have designed a collection of links that resemble cards or tiles. The links initially display an icon and title but transition to show informational text upon hovering. However, for links ...

cssangularjsflexboxangular-materialangular-flex-layout

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...

javascriptjqueryhtml

Using JQuery, retrieve an array of values for each distinct data attribute (which is dynamic) in the element

I am working with an HTML table that displays dates and values. The table is dynamically generated from a database upon loading, so the number of unique dates and corresponding "data-day" attribute values can vary. <table id="pricehistory"> <tr d ...

jqueryarrayscustom-data-attribute

How would the input value change if the clock time changed?

I am working with dynamic inputs that allow me to add and delete rows with inputs. These inputs include material-ui timepickers, which have an icon of a clock next to the input field. When I click on the clock icon, a clock widget appears. However, the val ...

javascriptreactjsinputmaterial-uionchange

The Android Webview is experiencing difficulties with loading CSS styles and displaying the blockquote font color effect

I am facing an issue with loading HTML content in CSS through Android WebView. Despite having the code executed, I don't see any observable changes in font color for the text inside blockquote tags Here is the HTML code: <html> <head> ...

androidhtmlcss

Learning about the functions Promise.all and Array.map()

My current project involves retrieving data from multiple APIs and aggregating them into a final array that will be displayed in the UI using React. Let me explain the scenario. First, I retrieve the main data from the primary API: const response = await ...

javascriptnode.jsarraysasynchronouspromise

A guide on updating an item in a basic JavaScript file with Node.js

This query pertains to Workbox and Webpack, but no prior knowledge of these libraries is necessary. Background Information (Optional) Currently using the InjectManifest plugin from Workbox 4.3.1 (workbox-webpack-plugin). While this version provides the o ...

javascriptnode.jswebpackfsworkbox

What can be done to prevent function from being treated as instance members within a controller's scope?

When using angularJS 1.3, the following code snippet showcases the functionality: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http ...

javascriptangularjs

What could be causing the unresponsive hamburger button on my navbar?

As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Lo ...

htmlcssflask

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

Implementing a PHP redirection for an API after a jquery ajax get request results in a 302 status code

When I make a call to a PHP page using jQuery Ajax to connect to an API and get the request token, I then redirect back to the same page with a header. However, I am encountering a 302 error when returning a JSON encoded string. My main concern is how can ...

phpjqueryajaxhttp-redirect

Strategies for selecting glyphs in SVG fonts based on their Unicode properties

My goal is to extract specific characters from SVG fonts created for music engraving. Music fonts typically include a large collection of characters (> 3500), but I only require a small subset of them for caching glyphs in compressed form to ensure quic ...

javascriptjquerycsssvgunicode

Can anyone help me recreate the stacked bar chart seen in Apple Health's Cardio Fitness article using chart.js and Bootstrap tabs?

On Apple Health, there is a fascinating article titled "Learn About Cardio Fitness" (located in the Browse tab at the bottom > Activity, then scroll down). While reading the article, I came across a chart that caught my eye, and I am eager to replicate ...

javascriptchart.jsbootstrap-5

What is the best way to transfer form input data from a child component to the parent component in React?

Recently delving into the world of React, I decided to experiment with forms. My project idea was straightforward - create a form component with input fields that, upon clicking submit, would pass the input values to the parent component ('App') ...

javascripthtmlreactjsformsreact-hooks

In Internet Explorer, the toggle div expands to fill the available space, but this behavior is not consistent in

Utilizing the toggle function in jQuery, I created a mechanism to switch between 4 different blocks of content. You can view a demonstration of how the functionality operates correctly in Google Chrome here: If you encounter any issues with the functiona ...

jqueryhtmlcss

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter

Grid layout showcasing masonry gallery

I've spent some time looking for a Masonry gallery with a grid layout, but couldn't find one that suited my needs. So, I decided to create my own. I implemented a customElement with grid layout, but encountered an issue when trying to assign grid ...

javascriptcssgrid-layoutcss-grid

Executing a void C# web method using jQuery AJAX: A step-by-step guide

Could you enlighten me on the process of invoking this particular C# web method using AJAX and jQuery? public class Default { [WebMethod] public static void Example() { //perform action } } ...

c#jqueryajaxwebmethod

A margin is set on a div element that occupies 100% width and 100% height, nestled within another div element also occupying 100% width and

As I work on constructing a website with a video background, my goal is to ensure that all divs are centered and responsive by setting the width and height to 100%. Additionally, I have implemented an overlaying div that fades in and out upon clicking usin ...

htmlcssmargincentering

Sizing Bootstrap Carousel Controls

Is there a way to adjust the size of controls in the bootstrap carousel using CSS? I'm working with Bootstrap 4 and have attempted the following, but it only seems to reposition them. .carousel-contol-prev { height: 26%; top: 33%; wid ...

cssbootstrap-carousel