Prevent the left margin from causing the element to be pushed off the

Question

Prevent the left margin from causing the element to be pushed off the

Here is the code I've been working on:

This code includes a function called "isItANumber" that calculates and determines specific results based on certain conditions. The function also controls the position of a circle element on a line, representing different percentage values.

However, there seems to be an issue when the percentage value in the circle reaches its maximum (100%). This causes the circle to go off the page due to its margin-left property being set too far. Is there a way to keep the circle within the visible area at all times, even when it's positioned at the extremes (0% or 100%)?

html css

Answer 1

Answer №1

I made a modification by adding the code snippet

var percent =  "calc("+parseFloat(element1)*100+"% - 50px)";

. This adjustment ensures that we achieve 100%, while also subtracting the width of the circle (50px).

function isItANumber(el) {

var element1 = document.getElementById("circle").innerHTML;
var percent =  "calc("+parseFloat(element1)*100+"% - 50px)"; 

  var increased = parseInt(el.innerText);
  var element = document.getElementById("Value");

  if (isNaN(increased) || element1 >= 0) {
    document.getElementById("Result").innerHTML = "KanBan";
    document.getElementById("circle").style.marginLeft = percent;
  };
  if (isNaN(increased) || element1 >= 0.33) {
    document.getElementById("Result").innerHTML = "ScrumBan";
    document.getElementById("circle").style.marginLeft = percent;
  };
  if (isNaN(increased) || element1 >= 0.66) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginLeft = percent;
  }
    if (isNaN(increased) || element1 > 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginRight = '0%';
  }
}
var element = document.getElementById("circle");
isItANNumber(element);

#line {
  width: 100%;
  /* 2 */
  height: 5px;
  background: gray;
  position:relative;
  margin-top: 30px;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  position:absolute;
  margin-top:-22.5px;
}

<div id="Result"></div>
<div id="line">
  <div id="circle">
    1.0
  </div>
</div>

Answer 2

I made a modification by adding the code snippet

var percent =  "calc("+parseFloat(element1)*100+"% - 50px)";

. This adjustment ensures that we achieve 100%, while also subtracting the width of the circle (50px).

function isItANumber(el) {

var element1 = document.getElementById("circle").innerHTML;
var percent =  "calc("+parseFloat(element1)*100+"% - 50px)"; 

  var increased = parseInt(el.innerText);
  var element = document.getElementById("Value");

  if (isNaN(increased) || element1 >= 0) {
    document.getElementById("Result").innerHTML = "KanBan";
    document.getElementById("circle").style.marginLeft = percent;
  };
  if (isNaN(increased) || element1 >= 0.33) {
    document.getElementById("Result").innerHTML = "ScrumBan";
    document.getElementById("circle").style.marginLeft = percent;
  };
  if (isNaN(increased) || element1 >= 0.66) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginLeft = percent;
  }
    if (isNaN(increased) || element1 > 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginRight = '0%';
  }
}
var element = document.getElementById("circle");
isItANNumber(element);

#line {
  width: 100%;
  /* 2 */
  height: 5px;
  background: gray;
  position:relative;
  margin-top: 30px;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  position:absolute;
  margin-top:-22.5px;
}

<div id="Result"></div>
<div id="line">
  <div id="circle">
    1.0
  </div>
</div>

Answer 3

Answer №2

Instead of using the marginLeft property, you can utilize the left property since it's a positioned element. Below is your accepted output or some helpful information:

function isItANumber(el) {

var element1 = document.getElementById("circle").innerHTML;
var percent =  parseFloat(element1)*100;

percent+='%';

  var increased = parseInt(el.innerText);
  var element = document.getElementById("Value");

  if (isNaN(increased) || element1 >= 0 && element1 < 0.33 ) {
    document.getElementById("Result").innerHTML = "KanBan";
    document.getElementById("circle").style.left = percent;
    
  };
  if (isNaN(increased) || element1 >= 0.33 && element1 < 0.66) {
    document.getElementById("Result").innerHTML = "ScrumBan";
    document.getElementById("circle").style.left = percent;
    
  };
  if (isNaN(increased) || element1 >= 0.66 && element1 < 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.left = percent;
   
  }
    if (isNaN(increased) || element1 > 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.left = 'auto';
    document.getElementById("circle").style.right = '0';
  }
}
var element = document.getElementById("circle");
isItANNumber(element);

#line {
  box-sizing: border-box;
  /* 2 */
  height: 5px;
  background: gray;
  position:relative;
  margin: 30px auto 0 auto;

}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  position:absolute;
  margin-top:-22.5px;
  transition: 0.3s;
  left: 0;
}

<div id="Result"></div>

<div id="line">
  <div id="circle">
    1.0
  </div>
</div>

=== Thank you ===

Answer 4

Instead of using the marginLeft property, you can utilize the left property since it's a positioned element. Below is your accepted output or some helpful information:

function isItANumber(el) {

var element1 = document.getElementById("circle").innerHTML;
var percent =  parseFloat(element1)*100;

percent+='%';

  var increased = parseInt(el.innerText);
  var element = document.getElementById("Value");

  if (isNaN(increased) || element1 >= 0 && element1 < 0.33 ) {
    document.getElementById("Result").innerHTML = "KanBan";
    document.getElementById("circle").style.left = percent;
    
  };
  if (isNaN(increased) || element1 >= 0.33 && element1 < 0.66) {
    document.getElementById("Result").innerHTML = "ScrumBan";
    document.getElementById("circle").style.left = percent;
    
  };
  if (isNaN(increased) || element1 >= 0.66 && element1 < 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.left = percent;
   
  }
    if (isNaN(increased) || element1 > 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.left = 'auto';
    document.getElementById("circle").style.right = '0';
  }
}
var element = document.getElementById("circle");
isItANNumber(element);

#line {
  box-sizing: border-box;
  /* 2 */
  height: 5px;
  background: gray;
  position:relative;
  margin: 30px auto 0 auto;

}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  position:absolute;
  margin-top:-22.5px;
  transition: 0.3s;
  left: 0;
}

<div id="Result"></div>

<div id="line">
  <div id="circle">
    1.0
  </div>
</div>

=== Thank you ===

Answer 5

Answer №3

Eliminated the javascript code that was setting 100% margin-left and replaced it with margin-left:auto. This adjustment positions the circle on the right side and utilized margin-top: -22.5px to align it above the line. Much obliged!

function isItANumber(el) {

  var element1 = document.getElementById("circle").innerHTML;
  var percent = parseFloat(element1) * 100;
  percent += '%';


  var increased = parseInt(el.innerText);
  var element = document.getElementById("Value");

  if (isNaN(increased) || element1 >= 0) {
    document.getElementById("Result").innerHTML = "KanBan";
    document.getElementById("circle").style.marginLeft = percent;
  };
  if (isNaN(increased) || element1 >= 0.33) {
    document.getElementById("Result").innerHTML = "ScrumBan";
    
  };
  if (isNaN(increased) || element1 >= 0.66) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginLeft = percent;
  }
  if (isNaN(increased) || element1 > 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginRight = '0%';
  }
}
var element = document.getElementById("circle");
isItANumber(element);

#line {
  width: 100%;
  /* 2 */
  height: 5px;
  background: gray;
  position: relative;
  margin-top: 30px;
  padding-top: 1px;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  /* position: absolute; */
  margin-top: -22.5px;
  /* margin: auto; */
  /* margin-top: 100px; */
  margin-left: auto !important;
}

<div id="Result"></div>


<div id="line">
  <div id="circle">
    1.0
  </div>
</div>

Answer 6

Eliminated the javascript code that was setting 100% margin-left and replaced it with margin-left:auto. This adjustment positions the circle on the right side and utilized margin-top: -22.5px to align it above the line. Much obliged!

function isItANumber(el) {

  var element1 = document.getElementById("circle").innerHTML;
  var percent = parseFloat(element1) * 100;
  percent += '%';


  var increased = parseInt(el.innerText);
  var element = document.getElementById("Value");

  if (isNaN(increased) || element1 >= 0) {
    document.getElementById("Result").innerHTML = "KanBan";
    document.getElementById("circle").style.marginLeft = percent;
  };
  if (isNaN(increased) || element1 >= 0.33) {
    document.getElementById("Result").innerHTML = "ScrumBan";
    
  };
  if (isNaN(increased) || element1 >= 0.66) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginLeft = percent;
  }
  if (isNaN(increased) || element1 > 0.9) {
    document.getElementById("Result").innerHTML = "Scrum";
    document.getElementById("circle").style.marginRight = '0%';
  }
}
var element = document.getElementById("circle");
isItANumber(element);

#line {
  width: 100%;
  /* 2 */
  height: 5px;
  background: gray;
  position: relative;
  margin-top: 30px;
  padding-top: 1px;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  /* position: absolute; */
  margin-top: -22.5px;
  /* margin: auto; */
  /* margin-top: 100px; */
  margin-left: auto !important;
}

<div id="Result"></div>


<div id="line">
  <div id="circle">
    1.0
  </div>
</div>

Prevent the left margin from causing the element to be pushed off the

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing difficulties with the footer design in bootstrap framework

Information regarding Django and managing static files during deployment through pythonanywhere

Troubles with horizontal list incompatibility in Internet Explorer 6 and 7

The issue arises when the Javascript function is triggered twice, resulting in only 3 out of 4

Tips for utilizing the sticky-top class with Bootstrap 4 grid system

How can Vue assign a distinct v-model parameter during iteration?

Mobile devices offer a seamless vertical scrolling experience

Substitute the text with various phrases that include the specified pattern

Angular 2 form validation enhancements

"Seamlessly transition between items in a ng-repeat loop

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

The div element does not have an inline display style

Create a function that adds an event listener to a button that is

Troubleshooting: Font-Awesome Symbols are not Showing up

Is it possible to hide a class by toggling it with jQuery mobile's click event?

What could be the reason for only the First DIV showing up? Is there a way to display the other DIV

Problems with navigation alignment in Flask website due to HTML, CSS, and

Firefox: repeated occurrences of style sheet in developer tools

Use the onClick attribute with Iframe

In PHP, when a variable matches a value in a dropdown menu, include the 'selected' attribute to that option