Transform pixel padding into percentage ratios

I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario.

My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are currently set using pixels, but I'm interested in adjusting them using percentages.

For instance:

<a id="original" href="www.google.com" style="display: inline-block; position:absolute; left: 150px; top: 300px; padding: 100px 100px;" />

would become:

<a id="inserted" href="www.google.com" style="display: inline-block; position: absolute; left: 18.38235294117647%; top: 28.40909090909091%; padding: 9.469696969696969% 12.254901960784313%;"></a>

The example on this jsfiddle page illustrates what I am trying to accomplish. However, you may notice that the converted paddings do not match the original link's size in terms of height.

I hope this explanation is clear enough. If not, please let me know ;)

javascripthtmlcsspositionpadding

Answer №1

When setting padding in percentage, it is based on the width and not the height. Therefore, the value should be specified as

element.style.padding = elementWidth / 816 * 100 + "%" +
                        elementWidth / 816 * 100 + "% ";

Check out this modified sample code for reference

If you're looking for a workaround, visit this link

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

`Take action on a row by selecting the Edit option in CodeIgniter`

In my table, I have data displayed with an edit button in each row. What I want is for a pop-up or lightbox to appear when the edit button is clicked, without refreshing the page, and display all fields within that box. I am familiar with updating in the c ...

phpjqueryhtmlajaxcodeigniter

The callback function does not get invoked when using JSONP

Learning jsonP has been a challenge for me as I am relatively new to it. I have done my research by reading various articles but when trying out a simple example, the callback function fails to execute. Surprisingly, there are no errors or exceptions logge ...

javascriptajaxjsonp

The function Object.defineProperties() allows for reassigning a property's value after it has been initially

The issue arises in the initial code snippet provided below, specifically when dealing with the object book. Initially, the value of book.year is set to 2013. Even after updating the value by setting book.year = 2015, retrieving the value using book.year s ...

javascriptoop

Continuously running React useEffect even with an empty dependency array

In my React application, I have implemented a hook system. Each sub-hook that is generated within this main hook is assigned a unique ID automatically. This ID is incremented by 1 every time a new sub-hook is created, ensuring uniqueness. const App = ...

javascriptreactjsreact-hooks

The Jquery tooltip feature consistently displays the title of the header as the tooltip

Currently, I am utilizing the default Jquery tooltip library, and it functions wonderfully with one exception. In Firefox, the tooltip always displays the title of the page (within <head>). For example: <title>My Title</title></head> ...

javascriptjquerytooltip

Avoid form submission when the 'enter' key is pressed in Edge, but not in Chrome or Firefox

I'm dealing with an issue in HTML where a 'details' tag is set to open and close when the user presses enter. However, on Edge browser, pressing enter on the 'details' tag actually submits the form. I've been tasked with preve ...

javascriptjqueryhtml

Version 10.0 of sails is having trouble with an undefined 'schema' when using mysql

i'm currently experimenting with sails js version 0.10.0 using the sails-mysql adapter 0.10.6 I have set up two models: Customer.js module.exports = { connection: 'someMysqlServer', attributes: { name: { type: 'string& ...

javascriptmysqlnode.jssails.js

The webpage loaded through ajax is not rendering correctly

One of the challenges I'm facing is getting a JavaScript script to load an HTML page into a specific div element on another HTML page: The page that's being loaded, startScreen.html, looks like this: <!DOCTYPE html> <html lang="en ...

javascripthtmlajax

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

I came across this snippet of code while working with ng-repeat: <div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div> Here, parameter represents a string variable in the $scope... I started exploring if it was possible to c ...

javascriptangularjs

AngularJS is experiencing issues with the sorting filter 'orderBy'

I am experiencing an issue with sorting a table list that has three columns. I have implemented the ability to sort all columns in ascending and descending order. However, when I click on the -Tag to initiate the sorting process, I encounter the following ...

javascriptangularjsangularjs-filter

Designing a navigation system that revolves around a central logo image

I have created a navigation bar that you can see in this image: https://i.stack.imgur.com/eT4TL.jpg Using foundation to construct a website, I have designed the nav bar in the following manner: HTML: <nav class="top-bar"> <ul> ...

csshtmlzurb-foundation

Troubleshooting a problem with the interactive YouTube player in Safari

I have successfully implemented a custom YouTube player on my website, allowing users to watch videos within a modal box. Below is the code for reference: JS & HTML: <script src="https://www.youtube.com/iframe_api"></script> <script typ ...

javascriptjqueryhtmlyoutubesafari

Is there a way to manipulate the DOM without relying on a library like jQuery?

My usual go-to method for manipulating the DOM involves jQuery, like this: var mything = $("#mything"); mything.on("click", function() { mything.addClass("red"); mything.html("I have sinned."); }); Now I am looking to achieve the same result usin ...

javascriptdom

How can I retrieve the current session's username when passport.js is returning a promise containing `{false}` for `req.user`?

While working in Node.js, I implemented the passportJS LocalStrategy to handle user authentication. One of the functionalities I used was req.getAuthenticated() This function allows me to check if the current session is authenticated. Next, I needed to r ...

javascriptnode.jsexpresspassport.js

CakePHP allows developers to easily include images in their links using the `$this->Html->link` method. However, instead of generating HTML code for the image, it outputs ASCII characters

I can't seem to find the solution in the CakePHP 2.3.0 manual. I am trying to use $this->Html->link with $this->Html->image to create a clickable image. However, I'm encountering an issue where the ASCII rendering of quotes is being generated ins ...

htmlcakephp

Having trouble with `request.auth.session.set(user_info)` in HapiJS?

I've encountered an issue with my strategy that is defined on a server.register(). Although I followed a tutorial, the code seems to be copied verbatim from it and now it's not functioning as expected. server.auth.strategy('standard&apo ...

javascriptnode.jshapi.js

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

TL;DR: Struggling to position and display tooltips in a table due to the constraints of overflow: hidden. An example has been created to demonstrate the issue with tooltips not displaying correctly within a table. The problem arises because the table nece ...

htmlcsshtml-table

Customize your select element's background using jQuery when the content changes

Here is a select element with different options to choose from: <select class="state"> <option value="1">Done</option> <option value="2">Closed</option> <option value="2">Open</option> <option v ...

javascriptjqueryhtml

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

I'm currently working on a script that utilizes fetch to retrieve an external HTML file. The goal is to perform some operations to create two HTMLCollections and then iterate over them to display a div containing one element from each collection. Here ...

javascripthtmldomchild-nodes

Tips for ensuring session token verification remains intact upon reloading

I am currently in the process of developing a website using the Next.js framework and I am seeking advice on how to prevent the reload effect that occurs when transitioning from the login page back to the main page for just a fraction of a second. Below i ...

javascriptreactjstypescriptnext.jsreact-hooks