Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated!

Here's an example of the HTML for objects on the page:

<div class="getwidth" style="background-image: url('//domain.de/picture1.jpg?w=putwidth');">...
</div>

<div class="getwidth" style="background-image: url('//domain.de/picture2.jpg?w=putwidth');">...
</div>

And here is the jQuery onload function I'm using:

jQuery('.getwidth').each(function() {
    var wrapper = jQuery(this);
    var width   = wrapper.width();
    wrapper.html(wrapper.html().replace(new RegExp(/putwidth/, 'g'), width));
});

If an element is 245px wide, the desired output should look like this:

<div class="getwidth" style="background-image: url('//domain.de/picture2.jpg?w=245');">...
</div>

The code successfully retrieves the element's width, but I'm having trouble replacing the string.

Answer №1

Employ the use of replace along with css:

wrapper.css("background-image", wrapper.css("background-image").replace(/putwidth/g, width));

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

Troubles encountered when converting JSON data into JSONP

I'm having trouble getting data in jsonp format for use with phonegap. The code seems to be not working on the web browser and there are no errors showing up in the console. It's clear that something must be wrong with the code, but since I have ...

Delete the "img" and "a" elements from the content within the specified node

Is it possible to only extract text from my HTML content? var sb = new StringBuilder(); doc.LoadHtml(inputHTml); foreach (var node in Doc.DocumentNode.ChildNodes) { if (node.Name == "strong" || node.Name == "#text" || node.Name == "br" || no ...

Steps to modify the look of text upon button click using jQuery and utilizing the information from a table row

Currently, I am working on a jquery code. My issue revolves around utilizing strike-through in a row that contains "101", with each number being stored in a table. For example: 1 0 1 1 1 0 1 All this data is within a table structure. My goal now i ...

Problem with see-through images against a see-through backdrop

I'm experiencing a strange issue with a graphic that has rounded corners. On my HTML page, I have the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;"), and within this body is a div containing a PN ...

Display an image when the link is hovered over within a table

I'm looking for a way to display a scanned receipt image when hovering over a link within a table. I've written some code but it's not working as expected. Can anyone help me figure out what's wrong? Here is the current state of my cod ...

Stop span elements from being removed within a `contenteditable` container

I am facing a challenge with an editable div that contains a span element which I would like to prevent users from deleting. My development environment is Vue3. Currently, if the user presses backspace while their cursor is to the right of the span or sel ...

datepicker in bootstrap 4 obscured by the div

I am currently utilizing Bootstrap datepicker v4. However, I am facing an issue where the datepicker view is getting hidden behind the 'map' div. I have attempted to solve this problem by adding overflow: visible, but unfortunately, it does not s ...

What's the best way to mount a file on a field?

Can you assist in resolving this issue by utilizing a form on JSFiddle? If a user fills out the following fields: name, email, phone, message The data should be output to the console. However, if a user adds a file to the field attachment No output ...

Building a multi-page application with ExtJs MVC

I'm new to MVC, especially when it comes to extJs. I want to implement the MVC approach in my project. I came across a tutorial at , which provided an example with only one page. In this example, they used app.js to load extjs views. My question is, w ...

`How can I define dependencies and build an npm package?`

I have authored several npm modules, all of which are designed to enhance existing libraries such as three.js or react. While the packages appear to be downloaded, I have not received any feedback confirming whether they have been implemented correctly. ...

Struggling to make the Bootstrap 4 Datatables example work on my website

Trying to implement the code example from the second snippet in the answer of this thread Bootstrap - How to sort table columns. Should I just insert the js snippet into a script tag in the html or am I misunderstanding how it should be done? I also attemp ...

Load Materialize autocomplete with data from a JSON file

After hours of research, I am struggling to populate my autocomplete input using the Materialize plugin for a website project. Since I am not well-versed in json or ajax, implementing the original example from the documentation with static data has been qu ...

While using axios to make a GET request, I encountered errors when checking for .isSuccess in react

const searchInvoiceList = async ( plantLocation: string, invoiceType: string ) => { let dataList: InvoiceData[] = []; await axios .get(`${linkURL}inv/getControlList/${plantLocation}/${invoiceType}`) .then((response) => { dataLis ...

Can one determine if a webpage is being displayed within an Infragistics igDialog?

Occasionally, my web page is displayed without a container and other times it's embedded within an igDialog of another container page, based on the user's navigation throughout our web application. Is there a way, using pure javascript or jQuery ...

Ajax is functional, however the server is not responding

After many attempts to resolve the issue with my website, I am turning to this community in hopes of finding a solution. The problem lies in the fact that while the ajax success function appears to be working and shows a status code of 200 in the network ...

Jquery fails to display errors or provide validation feedback

I have been struggling to implement form validation on my website without using jQuery validate. Unfortunately, the code I have written is not functioning properly and is causing some CSS issues in my local environment. My main objective is to validate fo ...

Managing Pagination with Jquery for a Seamless User Experience

My pagination bar is displaying too many pages due to the large amount of data being returned. I've searched for solutions but haven't found anything that meets my needs. I want to limit the pages displayed in the pagination bar, something like t ...

I prefer to avoid using the "#" sign in URLs

<a href="#" onClick="load_page()">intro</a> I am trying to avoid displaying the # sign in the URL, and I would like it to appear like this instead: www.mydomain.com/ However, it currently displays as follows: www.mydomain.com/# Is there a ...

I want to save the information for "KEY" and "textValue" in JSON format and then return it as a response when I make a request to app.get("/api"). How can I achieve this?

Working with GCP Document AI using Node.js and react.js, I have created a JSON structure (var jsonResult) in the provided code. In the for loop, I am extracting key and text value data by using console.log(key); and console.log(textValue);. However, my g ...

Enhancing x-axis presentation in D3.js-generated charts

I created a bar chart using D3.js, but I have encountered an issue with one of the values on the x-axis being too long. I attempted to use CSS properties like text-overflow: ellipsis, width: 10px, and overflow: hidden to abbreviate values that exceed a cer ...