Insert content into a designated DIV

Progress bars are essential for tracking certain metrics. Take a look at the progress bars below:

<div id="lifeBar-holder">
    <div id="lifeBar"></div>
</div>

<div id="discretionBar-holder">
    <div id="discretionBar"></div>
</div>

If you examine the CSS, you'll see the styling for these progress bars:

#lifeBar-holder{width:200px;height:15px;background:grey; position:absolute; top:20px; left:30px;}
#lifeBar{width:0;height:100%;background:green;}

#discretionBar-holder{width:200px;height:15px;background:grey; position:absolute; top:40px; left:30px;}
#discretionBar{width:0;height:100%;background:blue;}

For a live demonstration of these progress bars in action, click here.

To enhance these progress bars, I am looking for a way to add text and labels to each one. Any suggestions would be greatly appreciated!

As I am not very proficient with HTML and CSS, any help is welcome. Thank you! :)

htmlcss

Answer №1

The updated HTML content

 <div id="progressBar-holder">
   <div id="progressBar" style="width:40%"></div>
   <div class="loadNumber">40%</div>
</div>

<div id="statusBar-holder">
  <div id="statusBar" style="width:70%"></div>
  <div class="loadNumber">70%</div>
</div>

Updated CSS styling

#progressBar-holder{width:200px;height:15px;background:grey; position:absolute;top:20px;left:30px;position:relative;}
#progressBar{width:0;height:100%;background:green;}
#statusBar-holder{width:200px;height:15px;background:grey; position:absolute;top:40px;left:30px;position:relative;}
#statusBar{width:0;height:100%;background:blue;}

.loadNumber {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    text-align:center;
}

Check out

http://jsbin.com/EGAzAZEK/13/ http://jsbin.com/EGAzAZEK/13/edit?html,output

The concept involves adding an additional div within the bar, positioning it in the top left corner of the parent element with a width set to 100% of the parent element. Ensure the parent element has relative positioning for this to function properly. Set a z-index greater than 0 to have it displayed above other elements. Width should be set to 100% of the parent element with text alignment at the center.

Answer №2

Here is a suggestion for you to try out, incorporating both label and percentage count text:

You can achieve this by adding the following CSS code:

CSS

.label { 
    position:absolute; 
    top:40px; 
    left:0; 
    height:15px; 
    line-height:15px; 
 }

 #label_one { top:20px; }
 #label_two { top:40px; }

.percentage_txt { 
    position:absolute; 
    left:0; 
    top:0; 
    text-align:center; 
    width:100% 
 }

After adding the CSS, modify your HTML-code as follows:

HTML

<div class="label" id="label_one">SOME LABEL</div>  
   <div id="lifeBar-holder">
   <div id="lifeBar" style="width:40%"></div>
   <div class="percentage_txt">59%</div>
</div>


<div class="label" id="label_two">SOME LABEL</div>
<div id="discretionBar-holder">
    <div id="discretionBar" style="width:70%"></div>
    <div class="percentage_txt">1%</div>
</div>

Check out the JSBin link for a preview.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a line break within a loop in React?

I have a react component that I need to format into multiple lines, specifically having 2 boxes on top and 3 below in a looped return. The desired layout is to stack the boxes in 2x2 or 2x3 depending on the total number of boxes generated by the loop. So, ...

javascriptcssreactjs

Checking if the iframe location has been modified using Jquery

Looking to determine if the location of an iframe has been modified. function checkLocation() { setInterval(function(){alert("Hello")},3000); if (document.getElementById("myiframe").src = 'http://www.constant-creative.com/login';) { } ...

javascripthtml

When a checkbox is selected, new input fields will dynamically appear

I have a table with 3 text fields and I would like to dynamically add the same set of text fields when a checkbox is clicked. Below is the code snippet I have, how can I achieve this using PHP and JavaScript? echo "<td>Screen ".$i."</td>"; ...

javascriptphphtml

What is the best way to handle JSON data in JQuery when it is returned with a header type of "text/html"?

I'm attempting to utilize the jquery getJSON method in order to retrieve JSON data from a public API. However, I am consistently encountering errors when the callback of my getJSON request is executed. Warning: Resource interpreted as Script but trans ...

jqueryhtmljsongetjson

jQuery is malfunctioning following an AJAX request

Can anyone help me fix an issue with my jQuery code? I have a hidden div that should be shown when the mouse hovers over a sibling element. However, it seems like after my AJAX function is executed, the jQuery stops working. <div class="parent"> ...

javascriptjqueryhtmlajax

attempting to display an element using jQuery that belongs to the identical class

I have multiple buttons with the class .modif, each with a different title attribute such as title="one". All these buttons are associated with boxes that share the class .box_slide. However, I am trying to display only the box that also has the additional ...

jquerycss

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...

javascriptjqueryhtmlkeyup

Discovering the most recently selected element in jQuery

Currently reading a jQuery tutorial from the Head First series and practicing with an example where I need to identify the last selected element. In Chapter 2, there is a task involving four images on a page. When a user clicks on any of these images, the ...

javascriptjquerycss

I am facing an issue where the images (IMG) do not align properly when I test the responsiveness using Chrome

Seeking assistance with a design challenge I encountered. The first image showcases a well-structured table on desktop view, while the second image displays an undesired layout when examined using Chrome DevTools. A link to the problematic layout can be fo ...

htmlcssbootstrap-4

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

htmlangulartypescriptiframe

Receiving a notification when attempting to log in with incorrect credentials

I am currently working on an Angular login page implementation using a username and password setup. When the user enters incorrect credentials, I want to display an alert message indicating the same. Here is the HTML code snippet for the form: <form [f ...

javascripthtmljqueryangular

Iterate over the HTML elements within a class and retrieve a specific property in JSON

Currently, I am in the process of developing a straightforward application that involves making an Ajax request to retrieve a Json object and then passing it to an HTML document. Essentially, this application functions as a vending machine where the produc ...

javascriptjqueryhtmljsonajax

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

Setting the height of children within an absolutely-positioned parent element

I am facing an issue with adjusting the size of children elements based on their parent. The scenario is as follows: HTML <div class="video"> <div class="spot"> <img src="..." alt=""> <button>x</button> </div ...

htmlcsscss-position

Flexbox: Arrange header and footer in a sidebar layout using flexbox styling

In my content layout, I have structured the sections as header, content, and footer. While I want to maintain this order for small devices, I am looking to shift the header and footer to the sidebar on desktop. I have already implemented this using floats ...

htmlcssflexbox

Challenges with fading images using jQuery

I am currently working on animating a 5 image slideshow by creating a fading effect between the images rather than just switching abruptly. Here is my HTML structure: <div id="slides"> <ul class="pics"> <li><img src="imag ...

javascriptjqueryhtml

Tips for accessing an element using a specific identifier with the variable $key

PHP //This is the HTML code for quantity <p>Qty : <input type="number" value="" name="qty<?php echo $key ?> onChange="findTotal()"/> JS function function findTotal() { var arr = document.getElementsByName('qty'); // Calc ...

javascriptphpjqueryhtml

in vuejs, a legendary row is added to the table every 25 or 50 records

VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...

htmlvue.jsv-for