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.

javascriptjqueryhtmlcss

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

Tips for Navigating and Scrolling to an Element by its ID in a Next.js Page Enhanced with AnimatePresence

Currently, I am utilizing Framer Motion to add animations to the page transitions in a Next.js project. However, when implementing AnimatePresence, it seems to interfere with the navigation to specific elements using hash links (id). The seamless transitio ...

javascriptreactjsscrollnext.jsframer-motion

Duplicating labels with JavaScript

I need assistance with copying HTML to my clipboard. The issue I am encountering is that when I try to copy the button inside the tagHolder, it ends up copying <span style="font-family: Arial; font-size: 13.3333px; text-align: center; background-color: ...

javascripthtmlcopyclipboard

Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

When working with Javascript and using the extend function in the underscore.js library, I am curious about what happens in relation to memory. Consider this example: var obj = {hello: [2]}; var obj2 = {hola: [4]}; _.extend(obj, obj2) obj2.hola = 5; conso ...

javascriptpass-by-reference

Looping through multiple JSON requests using $.getJSON without the use of the let statement to ensure cross

Currently, I am developing a web application that loads JSON files into leaflet layers based on user actions. The code snippet below successfully accomplishes this task when using the "let" statement. However, removing it results in variables from the last ...

javascriptjqueryajax

Exploring the capabilities of referencing MongoDB documents with the populate method in Node.js

I have been working on referencing in Node.js using the populate method, but I am unsure about how exactly it works. In my code, I am creating a reference to the user collection from my child collection. I have two collections - one for children and anothe ...

javascriptnode.jsmongodb

Using JQuery functions from other JavaScript files is Simple

When it comes to my CSS, I have taken the approach of creating smaller files for specific functions and then using minification to merge and compress them into one file for easier download. I want to apply the same strategy to my JS Files by logically sep ...

jqueryhtmlcss

What is the proper way to detach an event listener from a class?

I am facing a challenge when trying to remove an event listener. After running the script, I receive an error message stating that changeGirl.off("click") is not a function. Despite this issue, everything else within the code is working perfectly fine. Any ...

javascript

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

My website using Dynamic Ajax technology is currently experiencing heavy traffic due to the number of getScript

I am facing an issue with my dynamic website where all links fetch new sections via ajax requests from other pages and replace the current section. The problem I encounter has two main aspects. When loading a new div from an Ajax get request, some sections ...

javascriptjqueryajaxgetscript

What is the trick to showing text underneath a font awesome icon?

My HTML code contains font awesome icons, and I'm looking to have text appear below each icon instead of next to it. Currently, the text is displayed midway to the right of each icon. <div class="icons"> <span class="fa-stack f ...

htmlcss

Experiencing challenges with socket io connectivity between my backend and Quasar application. Encountering a 403 Forbidden error while trying to establish a connection with

I recently updated my Quasar app and ran into issues with the websocket connection after switching from development to production mode. The app is hosted on an Express server via pm2 on my Ubuntu server, which also connects to a database. Here are some sn ...

javascriptnode.jsexpresssocket.ioquasar

Looking for assistance with transferring a data attribute to a form redirection

I'm seeking assistance with a coding dilemma I've encountered. To provide some background, I have a list of items on my website, each featuring a 'Book Now' button that redirects users to different pages. Recently, I incorporated a mod ...

javascriptjqueryhtmlformsexpressionengine

Safari is currently experiencing compatibility issues with iPad, resulting in a malfunction

I encountered a unique issue with my most recent website project. The website is built on WordPress, and the custom theme I created is presenting an unexpected problem: Despite functioning perfectly on all browsers and devices, the site fails to display p ...

phpioscsswordpressipad

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Is it possible to execute a MySQL query whenever a Facebook Like button is clicked on a webpage? I am aware that FB.Event.subscribe('edge.create', function(response) {} is used for such actions. However, my lack of knowledge in Javascript and AJA ...

phpjavascriptmysqlajaxfacebook-like

Do two Express JS applications run on separate threads?

Running two express apps on different ports raises the question of whether they assign themselves to different cores, knowing that express typically runs on a single thread. The cluster module, however, replicates the express app and allows them to utiliz ...

javascriptnode.jsexpress

What is the best way to ensure my button displays the complete description of a single country after showcasing all the countries?

I have designed a search feature for countries and I am looking to add a button next to the country names that will trigger one of my components responsible for displaying detailed information about the country. Currently, the details are shown only when t ...

javascriptjsonreactjs

Tips for setting NgForm value within an Observable and verifying its successful implementation

Exploring the functionality of NgForm, I am testing to validate if the value of a form gets updated when the state of the store changes. @ViewChild('form') form: NgForm; ngOnInit() { this.subscription = this.store.select('shoppingList&apos ...

javascriptangularunit-testingtesting

refresh Laravel 5.1 webpage content seamlessly without page reloading

Is there a way to update page content in Laravel 5.1 every second without reloading the page for all users? Here is my current view: I'm trying to refresh data without reloading the page using a foreach loop, but I'm not sure how to accomplish ...

javascriptphpjqueryjsonlaravel

"Reposition all elements contained within a div that have a specific class

I'm completely new to Javascript and I've been trying to move all elements with a specific class inside a particular div. After doing some research, I found a solution that worked using IDs. However, when I tried to adapt it to work with classNam ...

javascripthtmlnode.jsclassnodes

Is there a method to track the progress of webpage loading?

I am working on a website built with static HTML pages. My goal is to implement a full-screen loading status complete with a progress bar that indicates the page's load progress, including all images and external assets. Once the page has fully loaded ...

javascripthtmlcss