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 insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

javascriptjqueryhtmldom

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

After naming a style sheet theme Basic and applying it to my web.config file, I created a Validator class in the css file. Utilizing the cssClass attribute with the Validator type, I successfully adjusted the font-weight property but struggled to change th ...

htmlcssasp.net

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

javascripthtml

Using HTML within a Material-UI Accordion component

I am attempting to display HTML content within an Accordion component. import {Accordion, AccordionDetails, AccordionSummary, Typography} from '@material-ui/core'; import { Badge } from 'reactstrap'; ... const buildAccordion = (f, i) ...

htmlreactjsmaterial-uiaccordion

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

javascripthtmlcssinput

Responsive design issues with Bootstrap 3 box layout

I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the b ...

javascripthtmlcssbootstrap-4responsive-design

What is the reason behind the overflow in the HTML body?

I am currently honing my skills in front-end development by attempting to replicate the functionality of . Everything seems to be working fine, except for the fact that there is an overflow issue identified within the <body> element when inspecting w ...

htmlcss

Sending checkbox selections to JavaScript

I am currently exploring Angular by working on a chat application project. My main focus right now is on passing checkbox values to my JS code. I have included snippets of the code below. The issue I'm encountering is that I can't seem to retriev ...

javascripthtmlangularjs

What is causing my anchor tags not to reflow properly?

I've been working on my new website and I'm facing a challenge that I just can't seem to solve. Here's the link: When I resize my browser to "mobile width", making it narrower than the row of oval "Tags" below my site menu, I want the ...

htmlcss

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

htmlcss

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

javascriptphpjqueryhtmlajax

Guide on programmatically choosing an option within a variable with the help of jQuery

Imagine having a variable named html, which holds select options like this: var html = '<select>'+ '<option value="10">10</option>'+ '<option value="20">20</option>'+ ...

javascriptjqueryhtmljquery-selectors

What is the best way to automatically direct users to their profile page after logging in?

After logging in, I need to redirect users to their profile page. The issue I'm encountering is figuring out how to pass the user_id into the URL for successful redirection. I've researched various solutions for this common problem without succe ...

pythonhtmldjango

Guide on applying a filter to the items in a listbox using the input from a text box

In my HTML form, I have the following elements: 1) A list box containing filenames: s1.txt2013 s2.txt2013 s3.txt2012 s4.txt2012 2) A text box where the user enters a pattern (e.g. 2013) 3) A button By default, the list box contains the 4 file ...

javascripthtml

Tips for creating animations with multiple elements that share the same classes

I am trying to create expandable boxes that can open onclick and close again by clicking on the X. The issue I'm facing is that the close jQuery function isn't working. However, my main concern is how to optimize the code so it doesn't becom ...

javascriptjqueryhtmlcssoptimization

Mobile Windows Z-Index

Struggling with the z-index issue on a video tag in Windows Mobile, particularly when it comes to my search box. <div portal:substituteby='common/search::search'></div> The goal is for the search box to appear above the video. ...

jqueryhtmlcsshtml5-videoz-index

Bug in Responsive Mega Menu Detected

Hey everyone, I've got a Mega Menu below for you to check out! <div id="menu-wrapper"> <ul class="nav"> <li><a href='#'>Brands</a> <div> <div class="nav-colu ...

htmlcss

Both Firefox and Chrome are unable to properly decode base64-encoded image or pdf files

I'm having trouble displaying base64 encoded images on Chrome and Firefox browsers using the data uri scheme. My current HTML code is: <img src="data:image/png;base64,base64_string_here" alt="base64 image name" width="600" height="400" border= ...

htmlimagefirefoxgoogle-chromebase64

What is the best way to implement the 'setInterval' function in this code to effortlessly fetch forms or data on my webpage without any need for manual refresh?

I am using ajax and javascript to fetch a modal on another page or in a separate browser. While I am able to retrieve the modal, I require the page to refresh before displaying the modal. I have come across suggestions to use the setInterval function but I ...

javascriptphphtmlajax

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index