Is there a way to stop calc() from being simplified when applying the style using Javascript?

My JavaScript function is designed to apply a style.right property to an element based on the media width. There are three different styles that can be applied:

listElements[i].style.right = "calc(425 * " + portfolioScrollPosition + "px)";

or

listElements[i].style.right = "calc(33.333 * " + portfolioScrollPosition + "vw)";

or

listElements[i].style.right = "calc(50 * " + portfolioScrollPosition + "vw)";

I need these styles to be written into HTML with embedded styles exactly as shown above. However, the calc() function simplifies the output to something like calc(425px). Is there a way to prevent JavaScript from making this simplification?

javascriptcss

Answer №1

Adding a specific style to an element can be a challenge, but using template literals allows you to achieve the desired result when inspected in developer tools (check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

Elemement.setAttribute("style", `right:calc(425 * ${portfolioScrollPosition}px;`);

If you prefer to include it in the style sheet, you'll need to update the entire inner text of the style element. <style></style> works like any other element - you can reference it and modify its content with 

element.textContent = ""
or element.innerText. However, this may get messy with a large style sheet.

Edit I've created a working example demonstrating how to rewrite the innerText of the style element here: https://jsfiddle.net/DaveCP/8czrnhwe/1/ (the SO snippet tool struggles with new line characters in a string).

In the example, we transform the style rule aspect-ratio: calc(2 / 1); to aspect-ratio: calc(4 / 1)

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

What is causing child elements to not wrap to the next line when the parent element is set to display:flex?

In order for the div with 's' class to move to the next line, it should be displayed as a block element. Check out the code on jsfiddle here. <body> <div class="header"> <div class="header-fi ...

htmlcss

Use xmlhttprequest function during text input instead of traditional form submission

Is it possible to implement a search form xmlhttprequest that dynamically updates results as the user types, rather than requiring them to submit a form? function customersController($scope, $http) { $scope.search = function() { $scope.url = &apos ...

javascriptajaxangularjsformsxmlhttprequest

Utilizing React to retrieve API data and implement search input filtering with autocomplete functionality

Hey there, I have a query regarding a React filter search input component. Currently, I am working with two components: FirstPageComponent.js import React from "react" import AutoComplete from "./AutoComplete" export class FirstPageComponent extends Re ...

javascriptreactjsfetchgatsby

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

javascriptjquerycssvue.js

Bootstrap row divs that overlap

My fields are overlapping when I resize my window smaller. How can I create space between them? UPDATE: Changing it to <div class='row ml-1' style="width:100px;"> reveals the overlap, and this is where I need to add space between ...

htmlcss

Determine the presence of an image by using a wildcard in the URL

I need to show an image, and if it doesn't exist I want to display a default image. The challenge is that the image can come with any extension. Can someone suggest how I can modify the $.get() function in the code snippet below to make it search for ...

javascriptjquery

Show notifications after being redirected to a new page

My goal is to submit a form and have the page redirected to a different URL upon submission. Currently, everything works as expected, but there is an issue with the timing of the toast message. The toast message appears immediately after the user clicks th ...

javascriptphpjqueryajaxsymfony1

Why does having a floating div and a div positioned below an absolutely positioned div result in additional margin?

When trying to create a two-column layout with a left floating navigation div and an absolute positioned header, I encountered an issue where the navigation div had an extra margin of 4em. This seemed unnecessary to me as it disrupted the expected layout f ...

htmlcss

Why is it necessary to define a property outside the constructor in Typescript, when in Javascript I wouldn't have to do that?

When working with Javascript, creating a class like the one below allows us to avoid declaring and initializing a property named logs outside of the constructor: class Logger { constructor() { this.logs = []; } } However, transitioning to TypeScri ...

javascripttypescriptoop

React "react-transition-group" is malfunctioning

I am currently in the process of updating my project to the latest version of React and I have noticed that ReactCSSTransitionGroup is now considered deprecated. As recommended by React developers, I have switched to using the suggested package. Previously ...

javascriptcssfacebookreactjsanimation

Illuminate the active page on the menu bar

Is there a way to dynamically change the menu color based on the selected page? For example: home faq contact_us I need help displaying the currently selected page in the menu bar using CSS, but I'm not sure how to approach this. Here is my curr ...

htmlcss

Refresh meta tags in a Next.js/React app

In the process of optimizing a website for SEO, I am facing the challenge of updating the meta description's content dynamically without using any third-party libraries. While I have successfully implemented the functionality, it currently requires a ...

javascripthtmlreactjsnext.js

Why are the elements not found by their id when I check them, even though they were created dynamically using an ajax-generated form with php-inserted values through a

How can I prepopulate form fields displayed in a modal view using jQuery after retrieving the form HTML with an AJAX query? I am trying to set the values through a JavaScript function that retrieves PHP-generated values via document.getElementById. However ...

javascriptphpjqueryajax

Applying a CSS class to multiple instances of a control in ASP.NET

Incorporating the jQuery UI framework into my ASP.NET project is a current challenge I am facing. My approach involves applying CSS to the controls in order to achieve this objective. Specifically, I have multiple GridView controls that need styling. Is t ...

asp.netcssjquery-uiwebforms

Changing the information of objects stored in arrays using React Three Fiber

My challenge is with an array of roundedBox geometry shapes called myShape. I am trying to figure out if it's possible to change the position of one of the shapes within the array without creating a new shape altogether. Ideally, I would like to updat ...

javascriptreactjsthree.js

Retrieve a highly nested property within an array of objects

Below is the snippet of code: var ops = [{ label: 'Primary Colors', options: [{ label: 'Yellow', value: 'yellow' }, { label: 'Red', value: 'red' }, { ...

javascriptarraysnestedjavascript-objects

Only display the Google map marker when it is within the current view

I'm looking to enhance the animation of my Google map marker. I've successfully customized my map, implemented a unique marker, and enabled the animation feature. However, there are a couple of obstacles preventing it from functioning as desired. ...

javascriptjquerygoogle-mapsanimation

Discover the best way to connect your Chrome bookmarks to a server through an extension using an API

I have embarked on creating a unique Chrome extension that will enable users to not only view, update, create, and delete Chrome bookmarks but also save and retrieve bookmarks through our server without the need for Google account synchronization. One chal ...

javascriptjquerygoogle-chromegoogle-chrome-extensionbookmarks

Issues with Grunt functionality after installation on Ubuntu

I successfully installed Grunt by running the following commands in the terminal: sudo apt-get install nodejs sudo apt-get install npm npm install -g grunt-cli After executing npm install -g grunt-cli, here is the output from the terminal: (output he ...

javascriptnode.jsubuntugruntjsnpm

Logo-enhanced Navigation Bar in Bootstrap

Hey everyone, I've been experimenting with Bootstrap headers that include a logo before the "Brand" text. I'm facing an issue where the navbar doesn't resize properly, as shown in the screenshot below: - The navbar doesn't adjust to t ...

htmlcsstwitter-bootstrap