How to get the gradient effect in the circle? I have such an initial code:
HTML:
<div class="progresss">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>10</span>%
</div>
<div class="progresss">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>75</span>%
</div>
SCSS:
.progresss{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
position: relative;
//overflow: hidden; /* Comment this line to understand the trick */
width: 145px; height: 45px; /* Half circle (overflow) */
margin-bottom: -14px; /* bring the numbers up */
&:after {
content: '';
position: relative;
display: block;
top: -75px;
width: 145px;
height: 90px;
background-color: #f3f5f6;
}
}
.bar{
position: relative;
top: 0; left: 0;
width: 145px; height: 145px; /* full circle! */
border-radius: 50%;
box-sizing: border-box;
border: 27px solid red; /* half red, */
border-bottom-color: green; /* half green */
border-right-color: green;
}
JS:
$(".progresss").each(function(){
var $bar = $(this).find(".bar");
var $val = $(this).find("span");
var perc = parseInt( $val.text(), 10);
$({p:0}).animate({p:perc}, {
duration: 3000,
easing: "swing",
step: function(p) {
$bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
// 45 is to add the needed rotation to have the green borders at the bottom
});
$val.text(p|0);
}
});
});
what I want is:
I did something similar back in the day and as I discovered that only way to implement gradient border was (and I guess still is) using CSS border-image property, I came up with completely different approach:
Create 3 nested div elements:
wrapper, which we need to hide the overflow,
out, which is the one with gradient background color - that's the one we are going to rotate,
in, which is the inner circle on which growing percentage numbers are displayed,
Inside first wrapper add some element to hold the percentage number and using position: absolute, place it in the middle of the parent: we do not display percentage in the in element, because it is rotating with out one, and it's easier to just create another element than synchronize rotation of two circles.
Make wrapper a circle and hide it's overflow - it helps in 4.:
Give out element gradient background, bottom half green-ish, top half transparent - it is shaped as circle due to it's parent overflow.
Whole the rest is just math: you can check it out in my fiddle.
It is not perfect solution and I would not mind posting it in case where you used percentage width and height. But, as I saw fixed (px) dimensions I thought that you can use my approach as well.
It is all matter of adjusting it to your needs - gradient as well as dimensions, and if you have trouble positioning the whole thing, just do it with wrapper element, and children will "follow".
Related
I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm creating a responsive site and I'd like to use a really wide image slider (I'm sure you've seen the type of thing).
What I'd like to happen is for the main site to be, for example, maximum 1,200 pixels wide and use a fluid width. I'd then like the image slider to be, for example, 2,000 pixels wide. On a static site this is relatively straightforward as I could simply give the image slider a negative left margin of -400 pixels to center it. Sadly in the case of a responsive site this isn't possible as that offset needs to be fluid.
I did come across some script that made the offset fluid but this only worked when the screen was wider than the site width (i.e the max width of the main content area). When the window then becomes narrower than this max width the script fails to keep the image slider centered .
Any ideas how this could be written to keep the image slider centered horizontally in the window, whether the users window is wide or narrow?
<script type="text/javascript">
function setMargins() {
width = $(window).width();
containerWidth = $("#flexslider_width").width();
leftMargin = (containerWidth-width)/2;
$("#flexslider_width").css("marginLeft", -leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
</script>
Thanks for any thoughts in advance,
Tom
EDIT: I understand now. Try this: http://codepen.io/anon/pen/azoRwo
.outer{
position: relative;
width: 100%;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
.image {
position: absolute;
left: 50%; /* Move to the middle of the parent */
margin-right: -50%; /* Remove that extra width */
transform: translate(-50%, 0); /* Move left again; No IE8 support*/
width: 1000px;
height: 96px;
border: 2px solid cyan; /* Just useful for debugging */
background: url('http://i.imgur.com/rBkbXS3.jpg');
overflow: hidden;
}
Basically we move right, then left, using percentages of the parent's width. If you want the same functionality in IE8, you'll have to use JavaScript.
Reference: http://www.w3.org/Style/Examples/007/center.en.html
Alright, check this out: http://codepen.io/anon/pen/LEPgLp
html, body {
margin: 0;
}
.image-slider{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.main{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
#media only screen and (max-width: 800px) {
body {
overflow: hidden;
}
.image-slider {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0;
}
.main {
margin-top: 100px;
}
}
When your window is smaller than 800px (was easier to develop. just change the values), I'll position your slider absolute and in the middle. Because of the absolute position, your .main div will move to the top so I'll add a margin-top. Just change your margin-top to the hight of your slider. Good luck!
A convenient way to make an absolutely-positioned hovering element that lets height vary with content using Javascript is to specify the width, top and left as style fields. For instance:
popup.style.width = foo.offsetWidth - 10 + 'px';
popup.style.top = document.getElementById(bar)
.getBoundingClientRect().top + 'px'; // for IE7, can't use offsetTop
popup.style.left = '15px';
How can I adapt this code to absolutely position the popup based on its center, rather than its top? I'd like to do popup.style.center instead of popup.style.top, but that's not how CSS works. A completely naive solution is to add it to the DOM, then measure its height, and subtract half the height from the top.
Alternatively, is there a completely different approach that would still allow setting an arbitrary position for each corner of the element?
I'm looking for a pure Javascript solution (e.g. no jquery).
Important: I'm not trying to center the popup inside another element. Rather, I want the center point of the popup to be specified as a pixel offset from the top of the screen. This pixel offset may be based on another element, or it may be a raw number.
In your important note you are dealing with two different notions:
The first one, offset from the top of the screen, can be achieved with position:fixed.
The second one, offset based on another element, is where absolute positioning is useful, and will be relative to the first position:relative parent element.
As suggest Table-Cell centering (thanks to Itay comment) it makes sense in your case to use table display because it's exactly its purpose: adapt the container to its content.
You need some extra html:
<div class="container">
<div class="popup">
<div class="content">
<!-- CONTENT -->
</div>
</div>
</div>
And apply this css:
.container {
position: absolute; /* or fixed */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.popup {
display: table;
height: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
}
Thanks to the table-cell display you can use vertical-align: middle, no more need of javascript.
For horizontal centering you can still add a classic width: 50%; margin: 0 auto; on popup class.
To do this in jquery would be pretty simple
DEMO jsFiddle
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}
$("div.target").center(true);
I had been thinking about this for a while. You can actually absolute position an element from the center of a container instead of the corners by adding a div inside the container. This inner container, or reference container, is 50% height and 50% width of the parent container. Then you can position relative to the bottom right corner.
HTML
<div class="container">
<div class="container-inner">
<div class="pointer pointer-1" data-name="pointer-1"></div>
<div class="pointer pointer-2" data-name="pointer-2"></div>
</div>
</div>
CSS
This is the container we want to place pointers in
html, body {
height: 100%;
}
.container {
height: 80%;
width: 80%;
margin: 0 auto;
border: 1px solid blue;
}
We use this container to get a center point that we can use as a reference. We use the bottom right corner of this div as our reference point.
.container-inner {
border: 1px dashed red;
height: 50%;
width: 50%;
position: relative;
}
Create a couple of targets 60px in diameter
.pointer {
height: 40px;
width: 40px;
background-color: orange;
border: 10px solid red;
border-radius: 60px;
position: absolute;
}
Center target one in the center of the container
.pointer-1 {
bottom: calc(-0% - 30px);
right: calc(-0% - 30px);
}
Position target 2 25% right and down from the container center.
.pointer-2 {
bottom: calc(-50% - 30px);
right: calc(-50% - 30px);
}
You can see a working demo of this JSBin.
Would this work?
.popup {
margin-top: -50%;
}
In the end, I decided to just add the element to the DOM, measure its height, and subtract half the height from the top. I make the element invisible before adding it, and visible again after adjusting the height, to avoid flickering.
I have being researching regarding this question for a long time but I was not lucky. Here is the situation. Assume you have a blue rectangle in the center of the page. When you go full screen, we can use percentage for height and width to preserve the ratio of rectangle. However, the position of rectangle changes and it moves up and you end up with extra space at the bottom of the page.
So what should I do to keep rectangle in the center of the page (equal vertical and horizontal distance) when full screen mode is enabled? In other words, if your screen is 1280x800, center of rectangle be at (640,400)
If you check home page of Chrome browser, when you go full screen, the position of apps stay the same and you don't end up with extra space at the bottom. Appreciate your help
Define width of the rectangle and use margin: 0 auto; to center it in page horizontally.
If you want to center a div horizontally and vertically, use something like this
HTML
<div id="rectangle"></div>
CSS
#rectangle {
width: 30%; //can set any value here
height: 20%; //can set any value here
position: absolute;
left: 50%;
top: 50%;
margin-left: -15%; //negative half of width
margin-top: -10%; //negative half of height
background-color: red;
}
See the fiddle here.
OR
HTML
<div id="wrapper">
<div id="container">
<div id="rectangle"></div>
</div>
</div>
CSS
body, html {
height: 100%;
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
}
#wrapper[id] {
display: table;
position: static;
}
#container[id] {
display: table-cell;
vertical-align: middle;
width: 100%;
}
#rectangle {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
See the fiddle here.
Have you tried also using percentages for the margins, for example if you centre square was 60% tall and wide you could add the 20% as a margin so that would also scale up. Without trying I don't know if it would give you the desired effect but it should fix the issue of the square moving up.
oops,
I forget that I am working on an iMac.
the if addition in the script solved my problem.
function vertical_center()
{
var ww = $(window).width();
if (ww < 1600)
{
$("#character").css({'width': ww + 'px','height': (ww/4) + 'px', 'margin-top': -(ww/8) + 'px'});
}
else
$("#character").css({'width': ww + 'px'})
}
Yet, I would be glad if someone looks over my code telling me where some silly things remain.
Hope this post added something nevertheless, thank you guys
let me preface this by saying I don't really know CSS at all. I'm trying to make a performance bar using CSS and Javascript and what I have so far creates a bar background and then a bar inside that one that fills it up to the specified percentage. My problem is that the "inner bar" comes down from the top instead of up from the bottom. I could just subtract the percentage from 100 and take the absolute value, but that seems like kind of a dirty hack. I would like to just see how I could make this be aligned at the bottom and "grow" up as the height grows rather than starting at the top and growing down.
CSS Code
.cssSmall .performanceBack
{
position: absolute;
z-index: 1;
height: 20px;
width: 18px;
top: 4px;
left: 81%;
background-color: Brown;
}
.cssSmall .performanceBar
{
font-size: 6px;
vertical-align: top;
background-color: Orange;
}
Javascript code
this.performanceBack = gDocument.createElement("performanceBack");
this.performanceBack.className = "performanceBack";
div.appendChild(this.performanceBack);
this.performanceBar = document.createElement('div');
this.performanceBar.className = 'performanceBar';
//Hard coded value for testing
this.performanceBar.style.height = '30%';
this.performanceBack.appendChild(this.performanceBar);
Thanks.
Since you've already set .performanceBack to position: absolute I would do the same for .performanceBar but set the bottom property to 0 which will make it anchored to the bottom-left corner of .performanceBack.
.cssSmall .performanceBar
{
font-size: 6px;
background-color: Orange;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
You can see it in action at http://jsfiddle.net/U5V2b