CODEWITHSUNDEEP
javascripthtmlcss
Kyudos
Kyudos

Reputation: 735

Float text outside of div?

I'm trying to modify this W3Schools example:

function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar">10%</div>
</div>
<br>
<button onclick="move()">Click Me</button>

(Code is from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js)

So that the text of the progress bar (the % value) is centred in the bar, and stays centred, rather than having it 'move' along with the progress div.

How do get the text to display outside of the div?

Upvotes: 0

Views: 1150

Answers (8)

Vash72
Vash72

Reputation: 622

You need to add an absolute element(#center) that has the same width (left: 0;right: 0; to stretch to #myBar size) and line-height (line-height: 30px so the text is vertical aligned with #myBar) of the background bar (#myBar) , center his text (text-aling: center) and than change the inner text as the width of the progress bar (#myProgress) increase using javascript (center.innerHTML = width * 1 + '%';)

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

#center{
position:absolute;
left: 0;
right: 0;
text-align:center;
line-height: 30px;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
<div id='center'>10%</div>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");
  var center = document.getElementById("center");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      center.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

Upvotes: 4

zebnat
zebnat

Reputation: 521

You need to create another div element for the innerHTML call in js. For the styling, i created a parent div, just to make sure it displays at the same place of the bar, and i created the percent div with centering styling.

function move() {
  var elem = document.getElementById("myBar"); 
  var percent = document.getElementById("percent"); 
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      percent.innerHTML = width * 1  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
  position: relative;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;

}

.parentBlock{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#percent {
 margin: 0 auto;
 display: block;
 width:30px;
 background: red;
 top: 5px;
 position: relative;
}
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div class="parentBlock"><div id="percent">10%</div></div>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
</body>
</html>

Upvotes: 1

ThS
ThS

Reputation: 4783

Without touching the HTML structure, only surrounding the "% value" in a span tag andand give it an ID of, for example 'value'. By adding position: relative to div#myProgress(the div#myBar MUST NOT have no any position rule applied to it, otherwise this won't work as you need) and by absolute positioning the span#value you'll achieve your goal.

Here's a demo:

function move() {
  var elem = document.getElementById("myBar");
  var value = document.getElementById("value");
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      value.textContent = width * 1  + '%';
    }
  }
}
#myProgress {
  position: relative; /* must be added here */
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
/* centering the span#value */
#value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar"><span id="value">10%</span></div>
</div>
<br>
<button onclick="move()">Click Me</button>

Hope I pushed you further.

Upvotes: 0

James
James

Reputation: 719

Similar to others, but I made it begin at 0 instead of 10:

function move() {
  var elem = document.getElementById("myBar");
  var textAboveBar =document.getElementById("aboveBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      textAboveBar.innerHTML = width * 1  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

#aboveBar{
    text-align:center;
}
<h1>JavaScript Progress Bar</h1>
<div id = "aboveBar">0%</div>
<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

Upvotes: 0

James Hamann
James Hamann

Reputation: 862

As the example is written you won't be able to make this happen because the text does not have a separate container than the div that gets resized. If it had it's own element, like a p tag, you could do something like:

#myBar p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#myProgress {
  position: relative;
}

This would make the position of the text relative to the parent container of #myBar, not #myBar itself. The 50% styles are an easy way to center absolutely positioned elements. But like I said this requires you to put the text in a different container. You'd then need to modify the js to change the text of the p tag, not the elem:

function move() {
  var elem = document.getElementById("myBar");
  var text = document.querySelector('#myBar p');

  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      text.innerHTML = width * 1  + '%';
    }
  }
}

Upvotes: 0

Sakib Anjum
Sakib Anjum

Reputation: 176

Here is an example to make it outside.

function move() {
  var elem = document.getElementById("myBar");  
  var ptext = document.getElementById("ptext"); 
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      ptext.innerHTML = width * 1  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  position: relative;
  margin-bottom: 10px;
}

#myBar span {
    position: absolute;
    bottom: -26px;
    color: #000;
    right: 15px;
}
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"><span id="ptext">10%</span></div>
</div>

<br>
<button onclick="move()">Click Me</button>

Upvotes: 0

cmaronchick
cmaronchick

Reputation: 416

Not sure if this is optimal, but here's a solution. Basically, you have to float the two divs and position the progress bar in absolute terms to the center of the myBar div.

<!DOCTYPE html>
<html>
<style>
#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  float: left;
}

#myBarText {
  float: left;
  position: absolute;
  margin-top: 5px;
  margin-left: 40%;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
  <div id="myBarText">10%</div>
  <div style="clear: both"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");
  var elem2 = document.getElementById("myBarText");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem2.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

Upvotes: 0

fila90
fila90

Reputation: 1457

<!DOCTYPE html>
<html>
  <style>
    #myProgress {
      position: relative;
      width: 100%;
      background-color: #ddd;
    }

    #myBar {
      width: 10%;
      height: 30px;
      background-color: #4CAF50;
      text-align: center;
      line-height: 30px;
      color: white;
    }

    #percentage {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 5px;
      height: 1em;
      margin: auto;
    }

  </style>

  <body>

    <h1>JavaScript Progress Bar</h1>

    <div id="myProgress">
      <div id="myBar"></div>
      <p id="percentage">10%</p>
    </div>


    <br>
    <button onclick="move()">Click Me</button>

    <script>
      function move() {
        var elem = document.getElementById("myBar");
        var percentage = document.getElementById("percentage")
        var width = 10;
        var id = setInterval(frame, 10);

        function frame() {
          if (width >= 100) {
            clearInterval(id);
          } else {
            width++;
            elem.style.width = width + '%';
            percentage.innerHTML = width * 1 + '%';
          }
        }
      }

    </script>

  </body>

</html>

this should do it.

#myProgress has relative position and #percentage is centered in it.

Upvotes: 3

Related Questions