Using percentages to convert CSS transforms from pixels is ineffective

Here is the code snippet I am currently working with: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div style="width:50%;height:30%;background:#65C6BB;position:absolute;transform: translate(20px,0px);">
    </div>
    
  </body>
</html>

My goal is to convert the CSS property ' transform ' to a percentage.

I am using the calculation rule: 

(100 / window.innerWidth) * pixels

When I applied this rule to a Window Width of 1920 pixels, it resulted in 1.0416666666666667

However, when I tried replacing ' translate ' in the CSS transform property with 

transform: translate(1.0416666666666667%,0px);

The div did not remain in the same position. I also attempted using window.document.body.offsetWidth but that did not work either.

Note: The width and height properties are functioning correctly.

Apologies for any language mistakes.

javascripthtmlcsstransform

Answer №1

By applying the transformation using percentage, it adjusts the element based on its own dimensions rather than the dimensions of its parent. The equation to achieve this is 

(100 / element.offsetWidth) * pixels

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

Guide to direct express.js requests straight to 404 page

I need guidance on how to direct a request to a specific route in express.js directly to a 404 error page if the user is not authenticated. Currently, my middleware includes the following code: exports.isAuthenticated = function (req, res, next) { if ( ...

javascriptnode.jsexpress

Utilizing knobs to dynamically incorporate components into templates on Storybook: A guide

I am a novice in the realm of storytelling, attempting to craft tales involving a basic button and a button adorned with icons. My objective is to have the ability to switch out the icons within the button utilizing the knobs section. For example: export c ...

javascriptvue.jsstorybookstorybook-addon-specifications

Three.js: Create a Custom Cube Panorama with Adjustable Orientation (Front, Back, Left, Right, etc.)

For my project, I am implementing a rotating cube panorama image with 6 sides: Check out the example here View the code on GitHub scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 ); cam ...

javascriptthree.jsvertex-shader

How can I simulate a callback function that was not tested?

Currently experimenting with the method below: startScriptLoad(): void { const documentDefaultView = this.getDocumentDefaultView(); if (documentDefaultView) { const twitterData: ICourseContentElementEmbedTweetWidgetData = this.getTwitterWid ...

javascriptangulartypescriptunit-testingjestjs

When onSucess is called within a Vue view, the metadata parameter returns undefined, whereas it works properly inside a

In my Vue component for Plaid Link, there is a function/action in my Vuex store called onSuccess. This function is supposed to call my backend API to exchange the public token for an access token and send some data about the link to the backend. However, I ...

javascriptvue.jsvuexplaid

The issue of background color not being applied to the entire page in Vue.js is currently being investigated

I am currently working on styling my Vue.js application, and I am trying to apply the background-color property. To have this color displayed on all pages, I have decided to add the CSS directly to the <style> tag in the index.html file: <head> ...

javascriptvue.js

Striking a balance between innovation and backward compatibility in the realm of Web Design/Development

Creating websites is my passion, and I enjoy optimizing them for various platforms, devices, and browsers. However, lately, I've been feeling frustrated. I'm tired of facing limitations in implementing my creative ideas due to outdated technolog ...

javascripthtmlcss

Tips for ensuring Accordion menu closes upon clicking a second time

I created a basic Accordion menu using just HTML and CSS. The functionality works well, but I'm facing an issue where clicking on an open accordion doesn't close it. Can this be achieved with CSS alone or would I need to use JavaScript? .midd ...

css

Retrieving Object ID in the Current Page with Vue.js After Making a POST Request

My goal is to have the functionality of Saving and Editing on the same page. Since I have a large number of input fields, I want to be able to Save with just a few fields without being Redirected to another page. The main thing I need is to retrieve the c ...

htmlvue.jsvuetify.js

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

htmlcssreactjssass

Utilize the keys in a separate array to filter a JSON response based on their values

I am attempting to extract values from a JSON response by using key values stored in a separate array. However, when I try to log the results, I am only getting 'undefined'. Here is my code: let fdName =["SerialNo","denDate","denShift","denTime" ...

javascriptarraysjsonvue.js

Utilizing JSON format for processing HTTP requests in JavaScript with Node.js

I'm working with a snippet that retrieves data in JSON format, but I'm interested in manipulating the data instead of just outputting it to the console. var request = require('request'); var headers = { 'Connection': ' ...

javascriptnode.jsjson

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

javascriptc#htmlasp.nethtml-table

Show variable outside callback function - Ionic2

When working with ionic2, I encountered a situation where I needed to pass a variable from an asynchronous method to my template and other methods within the component file. In the `ngOnInit` method of my controller, I have the following code: ngOnInit() ...

javascriptangulartypescriptscopeionic2

The onreadystatechange function in AJAX is malfunctioning

I am facing an issue with the onreadystatechange while making an ajax request. Previously, it would call the processRequest function successfully but now it seems to be malfunctioning. I'm uncertain if I inadvertently made any changes or modification ...

javascriptajaxhttp

What is the best way to implement a promise function in this scenario using JavaScript?

I am currently working on an app using AngularJS and the MediaFire JavaScript SDK to perform various tasks. One specific task I am struggling with is creating a folder during an upload process, which returns a 'folderkey'. I would like to use .t ...

javascriptangularjspromisemediafire

Collaboration of Bootstrap components

I am facing an issue with two divs that are supposed to be displayed side by side in a normal browser. However, when the browser window is resized, the first div loses its height and the second div overlaps into it. I attempted to set the body's min h ...

htmlcsstwitter-bootstrap

What is the most efficient method to refresh $scope following data retrieval from a service in AngularJS?

In my current project using angularJS, I have encountered a challenge while working with an API service to fetch and display data in different parts of the app under various controllers. Initially, everything ran smoothly until I centralized the API calls ...

javascriptangularjsservicescopeangularjs-scope

The absence of the 'Access-Control-Allow-Origin' header is reported even though it is actually present

I have been attempting to send a POST request from one website to my own site. Despite allowing CORS access explicitly, every time I try to make the actual POST request, I am faced with the No 'Access-Control-Allow-Origin' header is present on th ...

javascriptphpjqueryajaxcors

The issue of Storybook webpack failing to load SCSS files persists

I'm running into an issue where my styles are not loading in Storybook, even though I'm not getting any errors. Can someone help me out? My setup involves webpack 2.2.1. I've scoured Stack Overflow and GitHub for solutions, but nothing seem ...

javascriptreactjswebpacksassstorybook