I want to create a slider for progress
if say it's at 1% how can I calculate the right px/% for the border-radius?
when it's a big % it looks good
<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 15%" />
</div>
when it's small like 1% it looks like this
<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>
try adding:
overflow: hidden;
for your green filler. It will hide inside the container. What you're trying to do is close to impossible. Can you imagine adding a border-radius on an element that is < 2px in width?
<div style="background: grey;
height: 25px;
border-radius: 12.5px;
width: 100%;
overflow: hidden;">
<div style="background: green;
height: 25px;
border-radius: 12.5px;
width: 1%" />
</div>
A 1% is supposed to look small in my opinion. just add overflow: hidden to your parent div, then that should look better.
<div style="overflow:hidden; background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>
If you would like to completely keep the radius of the progress bar, you may try cloning a same element as the progress bar container and set its left.
This example is working with Javascript or you may use pure css only by editing its left.
Please see if this is your another good choice as well.
set_progress(2); // percentage of progress
function set_progress(p) {
$('.progress-container span').css('left', (p-100)+'%');
}
.progress-container {
position: relative;
display: block;
width: 100%;
height: 24px;
background-color: #555;
border-radius: 12px;
overflow: hidden;
}
.progress-container > span {
position: absolute;
display: block;
top: 0;
left: -100%;
width: 100%;
height: 24px;
background-color: #0c0;
border-radius: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-container">
<span></span>
</div>
You are losing the border-radius because you are altering the width of your green progress element.
Instead, if you set the green div to the same 100% width, you can represent the progress by using CSS transform to move the green div to the left.
transform: translateX(-90%);
This is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) and so on.
Use overflow: hidden; on the outer div to hide the extra green.
.progress-bar {
overflow: hidden; /* hide the green that overflows */
background: grey;
height: 25px;
width: 100%;
border-radius: 12.5px;
}
.progress {
display: block;
background: green;
height: 100%;
width: 100%; /* same width as outer div */
border-radius: 12.5px;
transform: translateX(-90%); /* this is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) */
}
<div class="progress-bar">
<div class="progress"></div>
</div>
Related
I have stumbled upon a frontend problem where I cannot figure out what the best approach is.
The simplified layout I need to achieve can be looked up here: https://jsfiddle.net/kw56sa84/
content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
position: relative;
transform: translateY(50%);
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9)
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
Basically what I have are content and footer and there is a block that should be 50% in the body and 50% in the footer, and have both element contents moved by a dynamic half-height of the connecting element. In the jsfiddle example, the footer content should have some sort of padding. The height of all elements is dynamic.
The main question I suppose here is - is it possible to achieve this with CSS (solution may include grids, flexboxes), or am I out of luck and should seek a JS solution?
EDIT Here you can see a simplified design that should be achieved:
Thanks in advance!
Based on your explication you want that class: "end-of-body-block" be positionned dynamicly between body and footer.
The basic idea is to remove the red box from the normal flow by using position: absolute; but by doing that, it is loosing basic position strucutre. So we fix it with parent with position: relative;. Which is classic move.
To do so, I added position:relative; in .content:
.content{
position:relative;
}
And then I postionned absolute your red block as followed:
.end-of-body-block{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
EDIT
JS to add dynamic padding on content and footer.
DEMO:
var heightRed = document.getElementsByClassName('end-of-body-block')[0].offsetHeight;
heightRed = (heightRed / 2) + 2 + 'px';
var content = document.getElementsByClassName('content')[0]
var footer = document.getElementsByClassName('footer')[0]
content.style.paddingBottom = heightRed;
footer.style.paddingTop = heightRed;
.content{
position:relative;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
/*position: relative;
transform: translateY(50%);*/
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
After a few hours of trial and error, I came up with an idea of how to solve this. It's a real hacky solution, but in my case it actually works, maybe someone else will find it useful.
So in my case the footer had an image background, thus making it more difficult to think of this, however.. solution here could be to simulate the same background as the other part where your element isn't.
To elaborate, instead of trying to move the other element's content, make it seem that it does so. I moved the red box to the footer instead, so it takes up the whole height it needs. Then add a pseudo (before) element as absolute to the red box's parent and make it full width and 50% of it's height. See here for example https://jsfiddle.net/co35svtd/4/
.content {
position: relative;
z-index: 0;
width: 100%;
display: inline-block;
}
.wrapper {
background: #eee;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.footer-block-wrapper {
position: relative;
}
.end-of-body-block {
width: 50%;
margin: 0 auto 0;
padding: 30px;
border: 1px solid #a00;
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
box-sizing: border-box;
z-index: 10;
}
.end-of-body-block:before {
content: '';
z-index: -1;
position: absolute;
height: 50%;
width: 100%;
top: 0;
left: 0;
right: 0;
background: #fff;
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
position: relative;
z-index: 100;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
</div>
<div class="footer">
<div class="footer-block-wrapper">
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
Links and other information that should be visible
</div>
</div>
I know it's not the answer I was looking for, but this hack does the job for me.
I am making a simple card, where an array creates the number of squares. The objective is that the squares fit the div, no matter the number. Ex: if in the div there are only 2 squares, the size of the squares is bigger to fit the div. If the div have like 5 squares, they should resize to fit inside de div, and so go on.
I spent hours and hours trying to create that i and couldnt.
I have the code in thje editor if anyone want to see it:
https://stackblitz.com/edit/angular-ivy-kdapqa?file=src/app/app.component.css
When the order array, have like only 1 object, the square should fit the div squares. If the order have two objects. The two squares must be 50% of the div and so go on.
I dont know if i am expalining this right or not, but the squares should be responsive to the div
body{
width: 100%;
height: 100%;
}
#card{
position: relative;
height: 300px;
margin: auto;
width: 400px;
border-radius: 25px;
}
#background{
position: absolute;
width: 100%;
height: 100%;
background-color: #5e8d93;
border-radius: 10px;
}
#cardDescription{
position: absolute;
top: 5%;
width: 90%;
margin: 0;
right: 5%;
z-index: 11;
height: 50px;
bottom: 20px;
}
#squares{
border-top: 1px solid white;
position: absolute;
width: 100%;
z-index: 10;
text-align: center;
margin: 0 auto;
top: 30%;
height: 100%;
}
.square{
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #1e2023;
margin: 5px;
display: inline-block
}
<body>
<div id="card">
<div id="background"></div>
<p id="cardDescription" color="primary" style="text-align: center; font-size: 20px;color: white;font-weight: bold">
tittle
</p>
<div id="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<p id="companyName" color="primary" style="text-align: center; font-size: 15px;color: white">
restaurant
</p>
</div>
</body>
function fun(){
var x = document.getElementsByClassName("square").length;
var y = 100/x;
var myDiv = document.getElementsByClassName("square");
myDiv.setAttribute("style", "width: "+y+"%; height:"+y+"%;");
}
Add this function in the <script> tag and change<body onload="fun()">
Hope this works
i need to build a dynamic template to create a flow chart diagram, but only with HTML and CSS
See Image.
enter image description here
The black DIV should have a defined width and height.
The red DIV represent a row in the black DIV.
The green DIV are boxes with a border and a defined size with 100px height and 200px width.
It should be possible to add two or more green DIVs into one red DIV (See yellow rect)
All the content should align in the middle (See blue line)
.page {
position: relative;
width: 800px;
height: 800px;
}
.row{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.element{
display: inline-block;
text-align: center;
width: 200px;
height: 50px;
border: 1px solid #000;
}
<div class="page">
<div class="row">
<div class="element">Start</div>
</div>
<div class="row">
<div class="element">Step_1</div>
<div class="element">Step_2</div>
</div>
<div class="row">
<div class="element">Step_1_2</div>
</div>
<div class="row">
<div class="element">Ende</div>
</div>
</div>
Maybe someone can help me to implement the layout.
Thank you
I think you are looking for something like this: https://jsfiddle.net/m1pz6zcu/
.page {
width: 400px;
height: 400px;
border-style: solid;
border-width: 1px;
text-align: center;
}
.row {
width: calc(100% - 2px);
border-style: solid;
border-width: 1px;
border-color: red;
display: flex;
height: calc(25% - 2px);
}
.element {
min-width: 20%;
border-style: solid;
border-width: 1px;
border-color: green;
margin-right: auto;
margin-left: auto;
height: 50px;
height: calc(100% - 2px);
}
I am trying to implement bigtext on a dynamic container. I get this to work with fittext neatly but I like the resizing of bigtext better.
Does anyone know how to prevent the text overlap with bigtext?
This is the bit of HTML test code:
<div id="fittextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
<div id="fittext" class="containerText">
Fittext. Make better decisions where location matters
</div>
</div>
<div id="bigtextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
<div id="bigtext" class="containerText">
<span>BigText</span><span>Make better</span><span>decisions where location matters</span>
</div>
</div>
This is the CSS:
#fittextContainer {
position: relative;
width: 100%;
height: auto;
background-size: cover;
}
#bigtextContainer {
position: relative;
width: 100%;
height: auto;
background-size: cover;
}
.imgTower {
width: 100%;
height: auto;
}
.containerText {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
width: 80%;
height: auto;
text-align: center;
color: white;
line-height: 1em;
font-weight: 700;
opacity: 0.8;
text-shadow: 3px 3px #3f51b5;
}
And this is how it looks like:
Hi There. It's difficult to test it for myself because I don't have the measures of your image (It would be nice if you could write it down). First of all, I would recommend you to integrate the image in the div with the css line:
background-image: url();
You can also try to use some padding and don't use a solid value (like x em) or something sometimes instead of auto. Auto messes many things up in my experience.
Cheers,
Daniel.
Ok, I got this fuzzed out now. Line height needs to be set to normal and the page is game.
line-height: normal;
I previously removed the line-height property completely and assumed that normal would be the default value for line-height. But this doesn't seem to be the case. Or I might have changed the presumed default by using normalize CSS.
I also removed the height: auto instructions which are not required to make this work.
Here is the updated html:
<div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
<div id="fittext" class="containerText">Make better decisions where location matters</div>
</div>
<div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
<div id="bigtext" class="containerText"><span>Make better</span><span>decisions where location matters</span></div>
</div>
Here is the updated CSS:
.imgContainer {
position: relative;
width: 100%;
background-size: cover;
}
.imgTransparent {
width: 100%;
}
.containerText {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
width: 80%;
text-align: center;
color: white;
line-height: normal;
font-weight: 700;
opacity: 0.8;
text-shadow: 3px 3px #3f51b5;
}
Here is the result (fittext on top):
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.