Set the padding of an element using other elements









up vote
1
down vote

favorite












I would like to change the padding of ten divs using javascript. The divs are used to create a border around the centered main text which changes color, so I can't use box shadows and flex box(already tried it). I am doing this so it works well responsively. This is how I set it up in html:



<span id="title-text" class="head-text center">Tudor Popescu</span>
<div id="[one - ten]" class="center border-ring"></div>



The equation I am using to set the padding of each 'border-ring' is:



N = ring number



CW = content width (text width)



CH = content height(text height)



B = border width



W = window height



W = window width



side padding = N(((0.5 * W) - (0.5 * CW) - (10 * B)) / 11)



vertical padding = N(((0.5 * H) - (0.5 * CH) - (10 * B)) / 11)



What I tried already:
I tried using jQuery so it is easier to work with. I only tried with one div to make sure it works:



var totalWidth = $(window).width(),
totalHeight = $(window).height();

var hOne = ((0.5 * totalHeight) - (0.5 * $('#title-text').height()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
var wOne = ((0.5 * totalWidth) - (0.5 * $('#title-text').width()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
hOne = hOne.toString();
wOne = wOne.toString();

document.getElementById('one').style.padding = `$hOnepx $wOnepx
$hOnepx $wOnepx`;


I would like to know how to do this properly and how to make the code work as right now the padding are bigger than the view port of the website.










share|improve this question



















  • 1




    What's your question? Is something not working, or not working the way you expect?
    – T.J. Crowder
    Nov 10 at 17:02










  • @T.J.Crowder The code is not working and I wan to find out how to do it properly.
    – Tudor Popescu
    Nov 10 at 17:10










  • Not working how? What are you expecting to see, and what are you seeing instead? How do you run the code you've shown? Do you get any errors? (BTW, it may help you to get answers if you demonstrate the problem with a runnable example; here's how to do one.)
    – T.J. Crowder
    Nov 10 at 17:13










  • @T.J.Crowder The code doesn't work in the sense that the way I expressed the equation doesn't add the desired padding. They are set to the default which is 0px.
    – Tudor Popescu
    Nov 10 at 17:16






  • 3




    The string you have in the last line of code is not going to replace the variable names with their values. For that you must use the backquotes (template literal) instead of normal quotes. Did you not think of debugging and inspecting the actual value assigned to style.padding?
    – trincot
    Nov 10 at 17:21















up vote
1
down vote

favorite












I would like to change the padding of ten divs using javascript. The divs are used to create a border around the centered main text which changes color, so I can't use box shadows and flex box(already tried it). I am doing this so it works well responsively. This is how I set it up in html:



<span id="title-text" class="head-text center">Tudor Popescu</span>
<div id="[one - ten]" class="center border-ring"></div>



The equation I am using to set the padding of each 'border-ring' is:



N = ring number



CW = content width (text width)



CH = content height(text height)



B = border width



W = window height



W = window width



side padding = N(((0.5 * W) - (0.5 * CW) - (10 * B)) / 11)



vertical padding = N(((0.5 * H) - (0.5 * CH) - (10 * B)) / 11)



What I tried already:
I tried using jQuery so it is easier to work with. I only tried with one div to make sure it works:



var totalWidth = $(window).width(),
totalHeight = $(window).height();

var hOne = ((0.5 * totalHeight) - (0.5 * $('#title-text').height()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
var wOne = ((0.5 * totalWidth) - (0.5 * $('#title-text').width()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
hOne = hOne.toString();
wOne = wOne.toString();

document.getElementById('one').style.padding = `$hOnepx $wOnepx
$hOnepx $wOnepx`;


I would like to know how to do this properly and how to make the code work as right now the padding are bigger than the view port of the website.










share|improve this question



















  • 1




    What's your question? Is something not working, or not working the way you expect?
    – T.J. Crowder
    Nov 10 at 17:02










  • @T.J.Crowder The code is not working and I wan to find out how to do it properly.
    – Tudor Popescu
    Nov 10 at 17:10










  • Not working how? What are you expecting to see, and what are you seeing instead? How do you run the code you've shown? Do you get any errors? (BTW, it may help you to get answers if you demonstrate the problem with a runnable example; here's how to do one.)
    – T.J. Crowder
    Nov 10 at 17:13










  • @T.J.Crowder The code doesn't work in the sense that the way I expressed the equation doesn't add the desired padding. They are set to the default which is 0px.
    – Tudor Popescu
    Nov 10 at 17:16






  • 3




    The string you have in the last line of code is not going to replace the variable names with their values. For that you must use the backquotes (template literal) instead of normal quotes. Did you not think of debugging and inspecting the actual value assigned to style.padding?
    – trincot
    Nov 10 at 17:21













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I would like to change the padding of ten divs using javascript. The divs are used to create a border around the centered main text which changes color, so I can't use box shadows and flex box(already tried it). I am doing this so it works well responsively. This is how I set it up in html:



<span id="title-text" class="head-text center">Tudor Popescu</span>
<div id="[one - ten]" class="center border-ring"></div>



The equation I am using to set the padding of each 'border-ring' is:



N = ring number



CW = content width (text width)



CH = content height(text height)



B = border width



W = window height



W = window width



side padding = N(((0.5 * W) - (0.5 * CW) - (10 * B)) / 11)



vertical padding = N(((0.5 * H) - (0.5 * CH) - (10 * B)) / 11)



What I tried already:
I tried using jQuery so it is easier to work with. I only tried with one div to make sure it works:



var totalWidth = $(window).width(),
totalHeight = $(window).height();

var hOne = ((0.5 * totalHeight) - (0.5 * $('#title-text').height()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
var wOne = ((0.5 * totalWidth) - (0.5 * $('#title-text').width()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
hOne = hOne.toString();
wOne = wOne.toString();

document.getElementById('one').style.padding = `$hOnepx $wOnepx
$hOnepx $wOnepx`;


I would like to know how to do this properly and how to make the code work as right now the padding are bigger than the view port of the website.










share|improve this question















I would like to change the padding of ten divs using javascript. The divs are used to create a border around the centered main text which changes color, so I can't use box shadows and flex box(already tried it). I am doing this so it works well responsively. This is how I set it up in html:



<span id="title-text" class="head-text center">Tudor Popescu</span>
<div id="[one - ten]" class="center border-ring"></div>



The equation I am using to set the padding of each 'border-ring' is:



N = ring number



CW = content width (text width)



CH = content height(text height)



B = border width



W = window height



W = window width



side padding = N(((0.5 * W) - (0.5 * CW) - (10 * B)) / 11)



vertical padding = N(((0.5 * H) - (0.5 * CH) - (10 * B)) / 11)



What I tried already:
I tried using jQuery so it is easier to work with. I only tried with one div to make sure it works:



var totalWidth = $(window).width(),
totalHeight = $(window).height();

var hOne = ((0.5 * totalHeight) - (0.5 * $('#title-text').height()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
var wOne = ((0.5 * totalWidth) - (0.5 * $('#title-text').width()) - (10 *
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
hOne = hOne.toString();
wOne = wOne.toString();

document.getElementById('one').style.padding = `$hOnepx $wOnepx
$hOnepx $wOnepx`;


I would like to know how to do this properly and how to make the code work as right now the padding are bigger than the view port of the website.







javascript jquery html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 17:28

























asked Nov 10 at 16:58









Tudor Popescu

1579




1579







  • 1




    What's your question? Is something not working, or not working the way you expect?
    – T.J. Crowder
    Nov 10 at 17:02










  • @T.J.Crowder The code is not working and I wan to find out how to do it properly.
    – Tudor Popescu
    Nov 10 at 17:10










  • Not working how? What are you expecting to see, and what are you seeing instead? How do you run the code you've shown? Do you get any errors? (BTW, it may help you to get answers if you demonstrate the problem with a runnable example; here's how to do one.)
    – T.J. Crowder
    Nov 10 at 17:13










  • @T.J.Crowder The code doesn't work in the sense that the way I expressed the equation doesn't add the desired padding. They are set to the default which is 0px.
    – Tudor Popescu
    Nov 10 at 17:16






  • 3




    The string you have in the last line of code is not going to replace the variable names with their values. For that you must use the backquotes (template literal) instead of normal quotes. Did you not think of debugging and inspecting the actual value assigned to style.padding?
    – trincot
    Nov 10 at 17:21













  • 1




    What's your question? Is something not working, or not working the way you expect?
    – T.J. Crowder
    Nov 10 at 17:02










  • @T.J.Crowder The code is not working and I wan to find out how to do it properly.
    – Tudor Popescu
    Nov 10 at 17:10










  • Not working how? What are you expecting to see, and what are you seeing instead? How do you run the code you've shown? Do you get any errors? (BTW, it may help you to get answers if you demonstrate the problem with a runnable example; here's how to do one.)
    – T.J. Crowder
    Nov 10 at 17:13










  • @T.J.Crowder The code doesn't work in the sense that the way I expressed the equation doesn't add the desired padding. They are set to the default which is 0px.
    – Tudor Popescu
    Nov 10 at 17:16






  • 3




    The string you have in the last line of code is not going to replace the variable names with their values. For that you must use the backquotes (template literal) instead of normal quotes. Did you not think of debugging and inspecting the actual value assigned to style.padding?
    – trincot
    Nov 10 at 17:21








1




1




What's your question? Is something not working, or not working the way you expect?
– T.J. Crowder
Nov 10 at 17:02




What's your question? Is something not working, or not working the way you expect?
– T.J. Crowder
Nov 10 at 17:02












@T.J.Crowder The code is not working and I wan to find out how to do it properly.
– Tudor Popescu
Nov 10 at 17:10




@T.J.Crowder The code is not working and I wan to find out how to do it properly.
– Tudor Popescu
Nov 10 at 17:10












Not working how? What are you expecting to see, and what are you seeing instead? How do you run the code you've shown? Do you get any errors? (BTW, it may help you to get answers if you demonstrate the problem with a runnable example; here's how to do one.)
– T.J. Crowder
Nov 10 at 17:13




Not working how? What are you expecting to see, and what are you seeing instead? How do you run the code you've shown? Do you get any errors? (BTW, it may help you to get answers if you demonstrate the problem with a runnable example; here's how to do one.)
– T.J. Crowder
Nov 10 at 17:13












@T.J.Crowder The code doesn't work in the sense that the way I expressed the equation doesn't add the desired padding. They are set to the default which is 0px.
– Tudor Popescu
Nov 10 at 17:16




@T.J.Crowder The code doesn't work in the sense that the way I expressed the equation doesn't add the desired padding. They are set to the default which is 0px.
– Tudor Popescu
Nov 10 at 17:16




3




3




The string you have in the last line of code is not going to replace the variable names with their values. For that you must use the backquotes (template literal) instead of normal quotes. Did you not think of debugging and inspecting the actual value assigned to style.padding?
– trincot
Nov 10 at 17:21





The string you have in the last line of code is not going to replace the variable names with their values. For that you must use the backquotes (template literal) instead of normal quotes. Did you not think of debugging and inspecting the actual value assigned to style.padding?
– trincot
Nov 10 at 17:21


















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241263%2fset-the-padding-of-an-element-using-other-elements%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241263%2fset-the-padding-of-an-element-using-other-elements%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo