Is there a way to add text before and after this container, as illustrated in the image below?
<div class="volume-container">
<div class="pb1">
<div id="progress-bar"></div>
</div>
</div>
I have included a link to my codepen fiddle demonstrating the same.
For the desired effect, you can utilize display:inline-block within a div. This allows the div to behave like an inline element while still enabling you to establish the element's height. Another approach would involve using float: left with block-level elements, but using display:inline-block is generally preferred:
http://codepen.io/anon/pen/hsFLi
HTML:
<div class="volume-container">
<span>Pre</span>
<div class="pb1">
<div id="progress-bar"></div>
</div>
<span>after</span>
</div>
CSS:
.volume-container {
width: 100%;
margin: 0 auto;
}
.pb1 {
width: 17.5%;
border: 1px solid;
background: #dddddd;
display:inline-block;
}
#progress-bar, #progress-bar2 {
width: 0;
height: 20px;
line-height: 20px;
background: #79a151;
font-family: calibri;
color: white;
display:inline-block;
text-align: center;
overflow: hidden;
}
To achieve this effect, simply utilize Pseudo elements and data-* attributes on the .pb1 class as shown below:
Html:
<div class="volume-container">
<div class="pb1">
<div id="progress-bar"></div>
</div>
</div>
Ensure that .pb1 has a position of relative and add content:attr(data-percentage)" Usage"; to it.
Css:
.volume-container {
width: 100%;
margin: 0 auto;
}
.pb1 {
margin-left:100px;
width: 17.5%;
border: 1px solid;
background: #dddddd;
position:relative;
}
.pb1:before,.pb1:after{
position:absolute;
top:0;
}
.pb1:before{
left:-100px;
content:"analysis volume"
}
.pb1:after{
content:attr(data-percentage)" Usage";
right:-100px;
}
#progress-bar, #progress-bar2 {
width: 0;
height: 13px;
line-height: 20px;
background: #79a151;
font-family: calibri;
color: white;
text-align: center;
overflow: hidden;
}
Next, set $('.pb1').attr('data-percentage',width); to .pb1
Js:
var progressBar = $('#progress-bar'),
width = 0;
progressBar.width(width);
var interval = setInterval(function() {
width += 1;
$('.pb1').attr('data-percentage',width);
progressBar.css('width', width + '%');
document.getElementById("progress-bar").innerHTML = width;
if (width >= 100) {
clearInterval(interval);
}
}, 100);
I'm having trouble implementing the Angular Material list with checkboxes, where the text needs to be truncated instead of word-wrapped due to limited UI space. I have modified an example on the Angular Material site to demonstrate the issue. The text ...
I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...
I noticed that in this specific example, the image is not centered properly. Can someone explain why this might be happening? For context, I am using Google Chrome v10 on a Windows 7 machine, not Internet Explorer. <img src="/img/logo.png" style="mar ...
Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...
Looking to create a unique ascii chart using an old-school <table> as the canvas? Check out the striped design below: https://i.sstatic.net/bE2m6.png How can you move from left to right seamlessly on this table display? To achieve the optical illus ...
I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...
Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate you ...
In my SVG, there are several rectangles that change their fill color in a gradient effect as they move down the SVG. Users have the option to choose a solid fill color to customize their experience, which replaces the gradient color of the rectangles. I am ...
I am attempting to align the text in this scenario, but I am encountering difficulties. <div class="col-md-10"> <br> <br> <div class="navbar navbar-default"> <div class="container"> <p style="font-size: ...
Reference Code: See Example on Code Sandbox I am looking to implement a swiper that allows for navigating one slide at a time with a layout where slidesPerView: "auto" and fixed width are used. The first two slides behave as expected, but the la ...
How can I arrange divs with varying heights to be positioned close together, regardless of their height, and with a specific margin similar to buildings? I am aiming for a layout like the one on this website . I tried using float:left but it only float ...
I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...
How can I horizontally center an image within a <span> element? https://i.sstatic.net/40IL0.png <div class="col-1"> <span class="dot"> <h:graphicImage library="imgs" name="campus.png" width="25" height="25" style="ali ...
Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...
I'm struggling to figure this out. Trying to modify the background color of a highcharts chart. Here's the link: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/polar-spider/ I can& ...
My <font> element is having line wrapping issues in IE7, where padding-left:30px; or margin-left:30px only affect the first line. Unfortunately, since it's a web-app, I can't replace the <font> element with something else like a div. ...
I'm facing an issue where I have a small CSS file for a loading animation included in my head section. While downloading a large Angular2 application, I want to display this loading animation. However, it seems that the animation doesn't start un ...
Currently, I am facing an issue with my graphs. I have a line graph and a boxplot, but the boxplot is appearing below the line graph when I want it to be next to it. Any suggestions on how I can achieve this layout? Thank you! I attempted to use 2 differe ...
On my website, I have a large form where pressing the tab key switches between input fields. The inputs will also jump to the top if we reach the bottom of the form. The issue is that I have a fixed header at the top, covering the first 60px. Is there a w ...
I am having some trouble with my image gallery. Each image is displayed as a vertical column and has zooming effects when hovered over. Clicking on an image should show it in full screen with a caption. The problem arises when dealing with images that are ...