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.
javascript jquery html css
|
show 5 more comments
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.
javascript jquery html css
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 tostyle.padding
?
– trincot
Nov 10 at 17:21
|
show 5 more comments
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.
javascript jquery html css
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
javascript jquery html css
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 tostyle.padding
?
– trincot
Nov 10 at 17:21
|
show 5 more comments
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 tostyle.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
|
show 5 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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