I am trying to keep these two circles concentric but not have them interfere with the text and stuff on the web page. I am currently using position: fixed, but I want them within a textbox below that can also limit the size of the circles so that they don't take up the whole screen if user inputs something unreasonable value.

*EDIT:

I am now trying to make it so that when an input value of 85 or greater is inputted into outer diameter on jsFiddle or "Pipe O.D." on the actual web page, an error message/some time of message pops up saying "Too big".

Additionally, on the web page itself, there is a calculator button using Formidable Forms. After hitting calculate, it displays the output calculated values, but when the values of the inputs are changed, the circles no longer change size until the page is refreshed. Why is this and how do I fix it?

Actual webpage being used on: https://schallertenterprises.com/cutter-travel-calculator/

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 10).toFixed(3);
    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
      top: "calc(50% - "   ($converted)   "px)",
      left: "calc(50% - "   ($converted)   "px)"
    });
    $('.circle').fadeIn(300);
    $('#error').hide();
  })

  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted_2 = (($outer_diameter * 10) - ($inner_diameter * 10)).toFixed(3);
    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - "   ($converted_2)   "px)",
      left: "calc(50% - "   ($converted_2)   "px)"
    });
    $('.circle2').fadeIn(300);
  })
});

body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  z-index: -1;
  left: 50%;
  top: 50%;
}

.circle2 {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  z-index: -1;
  left: 50%;
  top: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <h1>
      Cutter Calculator
    </h1>
  </div>
  <div >
    <input type="number" id="outer_diameter" placeholder="Enter Outer Diameter"> <br>
    <input type="number" id="inner_diameter" placeholder="Enter Thickness"> <br>
    <input type="button" id="bttn" name="calculate" value="Calculate">
  </div>
  <div >
    <span ></span>
    <span ></span>
  </div>
</div>

jsFiddle: https://jsfiddle.net/Kaevonz/6rc9jbo3/3/

Actual webpage being used on: https://schallertenterprises.com/cutter-travel-calculator/

CodePudding user response：

I tried something

    .circles
    {
      margin-top:15px;
      position:relative
    }
    .circle {
      display: inline-block;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;
      border-color: blue;
      background-color: rgba(0, 0, 0, 0);
      z-index: -1;
      left: 50%;
      top: 50%;
      position:absolute;
    }

    .circle2 {
      display: inline-block;
      position:absolute;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;
      border-color: red;
      background-color: rgba(0, 0, 0, 0);
      z-index: -1;
      left: 50%;
      top: 50%;
    }

      $('#outer_diameter').on('change', function() {
        var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
        var $converted = ($outer_diameter * 10).toFixed(3);
        console.log($outer_diameter, $converted);
        $('.circle').css({
          height: (2 * $converted),
          width: (2 * $converted),
          top: "calc(50% - "   ($converted)   "px)",
          left: "calc(50% - "   ($converted)   "px)"
        });
        $('.circle').fadeIn(300);
        $('.circles').css({height:(2 * $converted)   10, width: (2 * $converted)   10})
        $('#error').hide();
      })

https://jsfiddle.net/p4w6gzov/7/

Basically I added in the css:

position:relative to the .circles

and position:absolute to the .circle and .circle2

And for the js, I added:

$('.circles').css({height:(2 * $converted)   10, width: (2 * $converted)   10})

finally, to limit the use (as for the size), you just need to add a small condition in the change event and if the input is too big, just do nothing and notify the user.

Hope this helped