Issue
I have a program that dynamically changes size of CSS shapes based on user input. I have text labels as well too. I am trying to get this text to stay vertically centered no matter the size of the shapes. This is my current issue, the first picture is okay, but the second picture is not what I want to happen. How should I fix this?
jsFiddle: https://jsfiddle.net/Kaevonz/dr7o1k3p/22/
jQuery(document).ready(function($) {
$(function() {
$('.div3 span').hide();
$('.div5').hide();
$('.div5brother').hide();
function hideObjects($) {
$('.div1').hide();
$('.div2').hide();
$('.div3').hide();
}
function hideErrors($) {
$('#error').hide();
$('#error2').hide();
$('#error3').hide();
$('#error4').hide();
$('#error5').hide();
}
$(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() {
mainCode()
})
function mainCode() {
const $multiplier = 7.5; //pixel sizing multiplier for user inputs
//Declare Variables for User Inputs
const $outer_diameter = parseFloat($("#field_wg4s2").val());
const $wall_thickness = parseFloat($("#field_d6hwp").val());
const $cutter_diameter = parseFloat($("#field_2w269").val());
//Convert diameters to radii
const $cutter_radius = ($cutter_diameter / 2);
const $pipeOutsideRadius = ($outer_diameter / 2);
const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness);
//Find Cutter Travel
const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2))));
//Convert sizes for Visual Representation
const $visualPipeOD = ($outer_diameter * $multiplier);
const $visualWallThk = ($wall_thickness * $multiplier);
const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk));
const $visualCutDia = ($cutter_diameter * $multiplier);
const $visualCutTravel = ($cutterTravel * $multiplier);
if ($cutter_diameter > $outer_diameter) {
$('#error').text('Cutter cannot be larger than Pipe O.D.').show();
hideObjects($);
return false;
}
if ($visualCutDia > $visualPipeID) {
$('#error2').text('Cutter cannot be larger than Pipe I.D.').show();
hideObjects($);
return false;
}
if ($cutter_diameter < 0) {
$('#error').text('Please input a positive value').show();
hideObjects($);
return false;
}
if ($wall_thickness >= 0.33 * $outer_diameter) {
$('#error4').text('Wall Thickness is invalid').show();
hideObjects($);
return false;
}
$('#error4').hide();
if ($wall_thickness < 0) {
$('#error3').text('Please input a positive value').show();
hideObjects($);
return false;
}
if ($outer_diameter < 0) {
$('#error').text('Please input a positive value').show();
hideObjects($);
return false;
}
if ($cutter_diameter > 72) {
$('#error').text('Cutter is too big.').show();
hideObjects($);
return false;
}
if ($outer_diameter > 100) {
$("#error").text($outer_diameter + " is too big").show();
hideObjects($);
return false;
}
$('.div1').css({
height: ($visualCutTravel),
width: ($visualCutDia)
});
$('.div1').fadeIn(300);
$('.div2').css({
height: ($visualPipeOD),
width: ($visualPipeOD),
});
$('.div2').fadeIn(300);
$('.div3').css({
height: ($visualPipeID),
width: ($visualPipeID),
});
$('.div3').fadeIn(300);
$('.div5').css({
height: ($visualCutTravel),
width: ($visualCutDia)
});
$('.div5brother').css({
height: ($visualCutTravel),
right: (102.5 - $visualCutDia / 2 - 80),
});
$('.div5brother').fadeIn(300);
hideErrors($);
}
$(document).on('change', '#field_2w269', function() {
$('.div1 span').fadeIn(100);
})
$(document).on('change', '#field_wg4s2', function() {
$('.div3 span').fadeIn(100);
})
$(document).on('change', '#field_2w269', function() {
$('.div5').fadeIn(100);
})
});
});
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 0px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 0px;
height: 0px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 0px;
height: 0px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div3>span {
transform: translate(-10%, -55%) rotate(-45deg);
font-size: 11px;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 120px;
height: 90px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
}
.div5brother {
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.div5brother>span {
font-size: 9px;
line-height: 50px;
display: block;
position: absolute;
top: 5px;
right: -40px;
text-transform: uppercase;
}
.div5container {
width: 205px;
height: 50px;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p id="error"></p>
<p id="error2"></p>
<p id="error3"></p>
<p id="error4"></p>
<p id="error5"></p>
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3"><span>Pipe O.D.</span>
<div class="div5container">
<div class="elem div5">
</div>
<div class="elem div5brother">
<span>Min. Cutter Travel</span>
</div>
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
<input type="number" id="field_2w269" placeholder="Enter Cutter O.D."> <br>
<input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br>
<input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">
Solution
The problem is height of div.div5brother should be the same as line-height of div.div5brother>span.
So if you make them equal and remove top: 5px;
from .div5brother > span
styles it should work.
jQuery(document).ready(function($) {
$(function() {
$('.div3 span').hide();
$('.div5').hide();
$('.div5brother').hide();
function hideObjects($) {
$('.div1').hide();
$('.div2').hide();
$('.div3').hide();
}
function hideErrors($) {
$('#error').hide();
$('#error2').hide();
$('#error3').hide();
$('#error4').hide();
$('#error5').hide();
}
$(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() {
mainCode()
})
function mainCode() {
const $multiplier = 7.5; //pixel sizing multiplier for user inputs
//Declare Variables for User Inputs
const $outer_diameter = parseFloat($("#field_wg4s2").val());
const $wall_thickness = parseFloat($("#field_d6hwp").val());
const $cutter_diameter = parseFloat($("#field_2w269").val());
//Convert diameters to radii
const $cutter_radius = ($cutter_diameter / 2);
const $pipeOutsideRadius = ($outer_diameter / 2);
const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness);
//Find Cutter Travel
const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2))));
//Convert sizes for Visual Representation
const $visualPipeOD = ($outer_diameter * $multiplier);
const $visualWallThk = ($wall_thickness * $multiplier);
const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk));
const $visualCutDia = ($cutter_diameter * $multiplier);
const $visualCutTravel = ($cutterTravel * $multiplier);
if ($cutter_diameter > $outer_diameter) {
$('#error').text('Cutter cannot be larger than Pipe O.D.').show();
hideObjects($);
return false;
}
if ($visualCutDia > $visualPipeID) {
$('#error2').text('Cutter cannot be larger than Pipe I.D.').show();
hideObjects($);
return false;
}
if ($cutter_diameter < 0) {
$('#error').text('Please input a positive value').show();
hideObjects($);
return false;
}
if ($wall_thickness >= 0.33 * $outer_diameter) {
$('#error4').text('Wall Thickness is invalid').show();
hideObjects($);
return false;
}
$('#error4').hide();
if ($wall_thickness < 0) {
$('#error3').text('Please input a positive value').show();
hideObjects($);
return false;
}
if ($outer_diameter < 0) {
$('#error').text('Please input a positive value').show();
hideObjects($);
return false;
}
if ($cutter_diameter > 72) {
$('#error').text('Cutter is too big.').show();
hideObjects($);
return false;
}
if ($outer_diameter > 100) {
$("#error").text($outer_diameter + " is too big").show();
hideObjects($);
return false;
}
$('.div1').css({
height: ($visualCutTravel),
width: ($visualCutDia)
});
$('.div1').fadeIn(300);
$('.div2').css({
height: ($visualPipeOD),
width: ($visualPipeOD),
});
$('.div2').fadeIn(300);
$('.div3').css({
height: ($visualPipeID),
width: ($visualPipeID),
});
$('.div3').fadeIn(300);
$('.div5').css({
height: ($visualCutTravel),
width: ($visualCutDia)
});
$('.div5brother').css({
height: ($visualCutTravel),
right: (102.5-$visualCutDia/2-80),
});
$('.div5brother > span').css({
lineHeight: `${$visualCutTravel}px`,
});
$('.div5brother').fadeIn(300);
hideErrors($);
}
$(document).on('change', '#field_2w269', function() {
$('.div1 span').fadeIn(100);
})
$(document).on('change', '#field_wg4s2', function() {
$('.div3 span').fadeIn(100);
})
$(document).on('change', '#field_2w269', function() {
$('.div5').fadeIn(100);
})
});
});
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 0px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 0px;
height: 0px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 0px;
height: 0px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div3 > span {
transform: translate(-10%, -55%) rotate(-45deg);
font-size: 11px;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 120px;
height: 90px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
}
.div5brother {
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.div5brother > span {
font-size: 9px;
line-height: 50px;
display: block;
position: absolute;
right: -40px;
text-transform: uppercase;
}
.div5container {
width: 205px;
height: 50px;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p id="error"></p>
<p id="error2"></p>
<p id="error3"></p>
<p id="error4"></p>
<p id="error5"></p>
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3"><span>Pipe O.D.</span>
<div class="div5container">
<div class="elem div5">
</div>
<div class="elem div5brother">
<span>Min. Cutter Travel</span>
</div>
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
<input type="number" id="field_2w269" placeholder="Enter Cutter O.D."> <br>
<input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br>
<input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">
Answered By - Sergii Shvager
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.