I would like to create a circle (without any animation) which is surrounded by other circles, like this:
but i would like to build in a phonegap app, so i don't want to increase the file size to big.
somebody know a plugin/method or any other solution?
I searched on the internet, but the methods i found are increase the size of my files too big.
No one addressed the javascript aspect of this question. Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and javascript; it uses pure javascript so no need to reference a jquery library. You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc:
var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
var childdiv = document.createElement('div');
childdiv.className = 'div2';
childdiv.style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
childdiv.style.top = (y + totalOffset).toString() + "px";
childdiv.style.left = (x + totalOffset).toString() + "px";
parentdiv.appendChild(childdiv);
}
#parentdiv {
position: relative;
width: 150px;
height: 150px;
background-color: #ac5;
border-radius: 150px;
margin: 150px;
}
.div2 {
position: absolute;
width: 40px;
height: 40px;
background-color: #ac5;
border-radius: 100px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
</body>
</html>
To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.
Kind of like this: http://jsfiddle.net/yxVkk/
<div id="big-circle" class="circle big">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
<style>
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
position: absolute;
}
.circle.big {
width: 150px;
height: 150px;
background-color: blue;
margin: 100px;
}
.one {
left: -25px;
top: -25px;
}
.two {
top: -60px;
left: 50px;
}
.three {
right: -25px;
top: -25px;
}
.four {
left: -25px;
bottom: -25px;
}
.five {
bottom: -60px;
left: 50px;
}
.six {
right: -25px;
bottom: -25px;
}
</style>
Using css you can try something like that. but use circle tag of HTML5 will give you a better result.
http://jsbin.com/etuzis/1/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class=div2 style='top:12px; left:45px;'></div>
<div class=div2 style='top:4px; left:160px;'></div>
<div class=div2 style='top:94px; left:210px;'></div>
<div class=div1></div>
</body>
</html>
CSS
.div1{
margin:40px 10px 10px 50px;
position:relative;
width:150px;
height:150px;
background-color:#ac5;
border-radius:100px;
}
.div2{
position:absolute;
width:40px;
height:40px;
background-color:#ac5;
border-radius:100px;
}
Adding border-radius:50% to a <div> that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load).
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick.
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Create a class to take care of the styling for the smaller circles.
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle.
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
Here's a CodePen with a sample.
As somebody said in the comments, you have to set border-radius:50% and then, positioning absolutely. I've made a dummy jsfiddle for illustrate link:
circle{
width : 50px;
height : 50px;
border-radius : 50%;
background: red;
position : absolute;
top : 50px;
left : 150px;
}
.small_circle_1{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : -25px;
left : 15px;
}
.small_circle_2{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : -25px;
}
.small_circle_3{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 55px;
left : 15px;
}
.small_circle_4{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : 55px;
}
To display a radial array of items, center them and use trigonometry to rotate them around the center. This assumes all the items share the same width and height.
Notes about this approach:
Multiple radials can reuse the JS function in a wide variety of configurations
There should only be one .radial_center (though the code could be updated to allow multiple layered centers, taking the diameter of the largest for calculations)
There can be multiple .radial_edge items, and the function automatically adjusts the angle of rotation
Trig functions and coefficients are adjusted so the first edge is always on top
data fields in the .radial wrapper can manually set diameters for the center and edge items, as well as the percentage gap between them, which calculates to the radius for the edge items from the center item
The center item can be hidden to create a "ring only" effect, though the center still needs to exist
Yes, any code written in jQuery or any other lib can be re-written in vanilla (or asm or binary). I just used jQuery for my own convenience :)
const ns = {
radial: (r) => {
//capture radial edges
let el = $(r),
e = el.children('.radial_edge');
//avoid div zero
if (e.length) {
//calc orbital angle and radius
let c = el.children('.radial_center'),
sa = -360 / e.length, //-360 rotates clockwise, 360 rotates counter
i = 0, //0 sets first child at top
cw = el.data('center') || c.width() || 100,
ew = el.data('edge'),
gap = el.data('gap') || .2;
//calc x,y and reposition each edge
e.each(function() {
let re = $(this),
ewa = ew || re.width() || 50,
rad = (cw + ewa) * (1 + gap),
x = Math.cos((sa * i) * (Math.PI / 180)) * rad * -1, //-1 flips vertically
y = Math.sin((sa * i) * (Math.PI / 180)) * rad * -1;
re.css({
inset: x + 'px 0 0 ' + y + 'px'
});
i++;
});
}
}
}
$(document).ready(() => {
//parse each radial group
$('.radial').each(function() {
ns.radial(this);
});
});
:root {
/* decorative */
--bs: 1px 1px 3px 0px grey;
--b-soft: thin solid silver;
font-family: monospace;
color: gray;
}
img {
display: block;
}
.hidden {
display: none;
}
.examples {
display: flex;
flex-wrap: wrap;
}
.radial {
/* required */
position: relative;
/* dev only */
margin: 1em auto;
border: 1px solid lightgray;
width: 350px;
aspect-ratio: 1/1;
border-radius: 50%;
}
.radial_center {
/* required */
width: fit-content;
aspect-ratio: 1/1;
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
/* decorative */
border-radius: 50%;
box-shadow: var(--bs);
border: var(--b-soft);
}
.radial_edge {
/* required */
position: absolute;
width: 50px;
aspect-ratio: 1/1;
margin: auto;
/* decorative */
border-radius: 50%;
box-shadow: var(--bs);
border: var(--b-soft);
opacity: .7;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 2em;
}
.bigger .radial_center {
width: 150px;
}
.bigger .radial_edge {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="examples">
<div class="radial" data-gap=".3">
<img class="radial_center" src="https://picsum.photos/100" alt="center image" />
<div class="radial_edge">1</div>
<div class="radial_edge">2</div>
<div class="radial_edge">3</div>
<div class="radial_edge">4</div>
<div class="radial_edge">5</div>
</div>
<div class="radial bigger" data-gap=".05">
<img class="radial_center" src="https://picsum.photos/150" alt="center image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
</div>
<div class="radial" data-center="75" data-edge="75">
<div class="radial_center hidden"></div>
<div class="radial_edge">1</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="1" />
<div class="radial_edge">3</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="2" />
<div class="radial_edge">5</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="3" />
</div>
</div>
Related
I do this :
I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.
If you can help me to do this ?
And how to make this responsive with mobile ?
And can any one build like this with android or react ?
html :
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css :
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
js:
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
You can use Date.now() at two times (mouseover & mouseout) and calculate difference.
Get time difference between two dates in seconds
Edit:
Here's the code. It's responsive and it haves perfectly centered circles.
css transform
css units (length)
Enjoy your code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
I searched a lot and finding nothing on it. I want to make a progress bar with round corners.progress bar need to have shadow. All I did as of now is here :
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt( val.text(), 10);
$({p:0}).animate({p:per}, {
duration: 3000,
easing: "swing",
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
});
});
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>100</span>%
</div>
I want to make corners round and having shadow. below given image represent what actually i want. Shadow is missing because i don't know to draw. :
I have tried Progressbar.js also, but I don't have much knowledge about SVG. Any answer would be appreciated.
#jaromanda for suggestion of learning SVG.
Yes is looks very hard to achieve from border-radius. So i looked into SVG and find it pretty handy. Here is my snippet:
// progressbar.js#1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.SemiCircle(container, {
strokeWidth: 10,
color: 'red',
trailColor: '#eee',
trailWidth: 10,
easing: 'easeInOut',
duration: 1400,
svgStyle: null,
text: {
value: '',
alignToBottom: false
},
// Set default step function for all animate calls
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
var value = Math.round(bar.value() * 100);
if (value === 0) {
bar.setText('');
} else {
bar.setText(value+"%");
}
bar.text.style.color = state.color;
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(0.45); // Number from 0.0 to 1.0
#container {
width: 200px;
height: 100px;
}
svg {
height: 120px;
width: 200px;
fill: none;
stroke: red;
stroke-width: 10;
stroke-linecap: round;
-webkit-filter: drop-shadow( -3px -2px 5px gray );
filter: drop-shadow( -3px -2px 5px gray );
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>
I want to suggest some stupid but quick solution since you're already using position: absolute. You can add background color to the circles when your animation starts.
html:
<div class="progress-bar">
<div class="left"></div>
<div class="right"><div class="back"></div></div>
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>0</span>%
</div>
css:
/** all your css here **/
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float: left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
transform: rotate(45deg);
}
.progress-bar > .left {
position: absolute;
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
left: 0;
bottom: -4px;
overflow: hidden;
}
.progress-bar > .right {
position: absolute;
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
right: 0;
bottom: -4px;
overflow: hidden;
}
.back {
width: 15px;
height: 15px;
background: gray;
position: absolute;
}
jquery:
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt( val.text(), 10);
var $right = $('.right');
var $back = $('.back');
$({p:0}).animate({p:per}, {
duration: 3000,
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
}).delay( 200 );
if (per == 100) {
$back.delay( 2600 ).animate({'top': '18px'}, 200 );
}
if (per == 0) {
$('.left').css('background', 'gray');
}
});
https://jsfiddle.net/y86qs0a9/7/
Same as the answers above, I found it much easier to implement using SVG instead of pure CSS.
However I couldn't find a single simplistic implementation using only HTML and CSS, or at least with no libraries, no external scripts or no dependencies. I found that given the math that needs to be calculated to make the SVG transformations to represent the percentage, JS needs to be included (if someone knows how to achieve this with only HTML and CSS I'd love to learn how). But what the JS script does is not long or complex enough to justify the overhead of adding yet another dependency to my codebase.
The JS calculations are pretty easy once you read through. You need to calculate the coordinate for the end point of the gauge in the coordinate system of the SVG. so basic trig.
Most of the CSS is not even needed and I added just to style it and to make it pretty. You can add shadow or gradients same as you could with any HTML pure shape.
Here is the codePen https://codepen.io/naticaceres/pen/QWQeyGX
You can easily tinker with this code to achieve any kind of shape of circular gauge (full circle, lower half of the semi-circle, or any variation including ellipsis).
Hope this is helpful.
// # Thanks to mxle for the first rounded corner CSS only solution https://stackoverflow.com/a/42478006/4709712
// # Thanks to Aniket Naik for the styling and the basic idea and implementation https://codepen.io/naikus/pen/BzZoLL
// - Aniket Naik has a library, linked to that codepen you should check out if you don't want to copy-paste or implement yourself
// the arc radius in the meter-value needs to stay the same, and must always be x=y, not lower than the possible circle that can connect the two points (otherwise the ratio is not preserved and the curvature doesn't match the background path).
// to style the gauge, make it bigger or smaller, play with its parent element and transform scale. don't edit width and height of SVG directly
function percentageInRadians(percentage) {
return percentage * (Math.PI / 100);
}
function setGaugeValue(gaugeElement, percentage, color) {
const gaugeRadius = 65;
const startingY = 70;
const startingX = 10;
const zeroBasedY = gaugeRadius * Math.sin(percentageInRadians(percentage));
const y = -zeroBasedY + startingY;
const zeroBasedX = gaugeRadius * Math.cos(percentageInRadians(percentage));
const x = -zeroBasedX + gaugeRadius + startingX;
// # uncomment this to log the calculations of the coordinates for the final point of the gauge value path.
//console.log(
// `percentage: ${percentage}, zeroBasedY: ${zeroBasedY}, y: ${y}, zeroBasedX: ${zeroBasedX}, x: ${x}`
//);
gaugeElement.innerHTML = `<path d="M ${startingX} ${startingY}
A ${gaugeRadius} ${gaugeRadius} 0 0 1 ${x} ${y}
" stroke="${color}" stroke-width="10" stroke-linecap="round" />`;
}
percentageChangedEvent = (gauge, newPercentage, color) => {
const percentage =
newPercentage > 100 ? 100 : newPercentage < 0 ? 0 : newPercentage;
setGaugeValue(gauge, percentage, color);
};
function initialGaugeSetup(gaugeElementId, inputId, meterColor, initialValue) {
const gaugeElement = document.getElementById(gaugeElementId);
setGaugeValue(gaugeElement, 0, meterColor);
const inputElement = document.getElementById(inputId);
inputElement.value = initialValue;
setGaugeValue(gaugeElement, initialValue, meterColor);
inputElement.addEventListener("change", (event) =>
percentageChangedEvent(gaugeElement, event.target.value, meterColor)
);
}
// Gauge Initial Config
initialGaugeSetup(
"svg-graph-meter-value",
"svg-gauge-percentage-2",
"rgb(227 127 215)",
40
);
body {
background-color: rgba(0, 0, 0, 0.8);
color: #999;
font-family: Hevletica, sans-serif;
}
/* SVG Path implementation */
.svg-container {
margin: 20px auto 10px;
height: 80px;
width: 150px;
}
svg {
fill: transparent;
}
.input-percent-container {
text-align: center;
}
.input-percent-container>* {
display: inline;
}
input {
text-align: right;
width: 40px;
margin: auto;
background-color: #5d5d5d;
color: white;
border-radius: 6px;
border: black;
}
<div class="svg-container">
<svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 70
A 65 65 0 1 1 140 70
" stroke="grey" stroke-width="3" stroke-linecap="round" />
<g id="svg-graph-meter-value">
</g>
</svg>
</div>
<div class="input-percent-container"><input id="svg-gauge-percentage-2" /><span>%<span/></div>
My problem is:
there's a block containing variable number of HTML elements. Something like this...
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
</ul>
This block must have a skew on the right side (the content must not be skewed). The horizontal size of this skew must be fixed. So adding CSS rules like...
.list {
position: relative;
background: #A0A0FF;
}
.list:after {
content: " ";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -10px;
width: 20px;
transform: skewX(-15deg);
background: #A0A0FF;
}
...won't do because in this case the skew will have variable horizontal size depending on the number of items in the list. The only solution that comes to my mind is to calculate the number of degrees in js. But this is kinda meh.
So my question is: is it possible to somehow skew an element by a number of pixels instead of degrees/radians using CSS?
You can achieve the same skew appearance by using a linear gradient on a pseudo-element.
*,
::after,
::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
width: 200px;
background: #663399;
margin: 25px auto;
list-style-type: none;
position: relative;
}
ul::after {
position: absolute;
content: "";
top: 0;
left: 100%;
background: linear-gradient(to bottom right, #663399 0%, #663399 50%, transparent 50%, transparent 100%);
width: 16px;
height: 100%;
}
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
</ul>
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
</ul>
Sorry if my message is irrelevant to this exact case, but once I searched for "CSS skew in pixels" and although neither this question is about what I tried to find (provide the exact width in px to skew), nor the accepted answer solves my problem, I still believe this can help someone someday.
As we know, transform: skew() receives only angles as a parameter.
In order to get the exact width when the angle is unknown, one should calculate the angle using arctangent. Luckily, JavaScript 1.0 Math provides atan2() method to return the arctangent (in radians) by given X and Y coordinates.
Thus, calculating the skew angle has the solution on JS.
The example below draws diagonal lines (via border-bottom/border-left) based on the dimensions of the underlying elements.
let prevY = null;
document.querySelectorAll('.a').forEach(el => {
const top = el.style.top;
const left = el.style.left;
const width = el.style.width;
const height = el.style.height;
const xEl = document.querySelector('#x' + el.id.substr(1));
xEl.style.top = top;
xEl.style.left = left;
xEl.style.width = width;
xEl.style.height = height;
applySkew(el);
});
window.addEventListener('resize', function(e) {
prevY = null;
document.querySelectorAll('.a').forEach(el => {
applySkew(el);
});
});
function applySkew(el) {
const xEl = document.querySelector('#x' + el.id.substr(1));
const top = el.style.top;
const w = el.offsetWidth;
const h = el.offsetHeight;
const directionUp = prevY && prevY != top;
prevY = top;
if(w < h) {
xEl.style.borderBottom = 'none';
xEl.style.borderLeft = 'black 1px solid';
xEl.style.transform = 'skewX(' + Math.atan2((directionUp ? -1 : 1) * w, h) + 'rad) translateX(' + (w / 2) + 'px)';
} else {
xEl.style.borderLeft = 'none';
xEl.style.borderBottom = 'black 1px solid';
xEl.style.transform = 'skewY(' + Math.atan2((directionUp ? -1 : 1) * h, w) + 'rad) translateY(-' + (h / 2) + 'px)';
}
}
html, body {
margin: 0;
height: 100%;
}
body > div {
margin: 5% 0 0 5%;
background: yellow;
position: relative;
height: 40%;
width: 90%;
}
body > div > div {
position: absolute;
box-sizing: border-box;
}
<div>
<div id="a0" class="a" style="
top: 0;
left: 0;
width: 7.5%;
height: 70%;
background-color: rgba(0,255,255,.5);
"></div>
<div id="a1" class="a" style="
top: 40%;
left: 7.5%;
width: 17.5%;
height: 30%;
background-color: rgba(0,255,255,.2);
"></div>
<div id="a2" class="a" style="
top: 40%;
left: 25%;
width: 37%;
height: 55%;
background-color: rgba(0,255,255,.4);
"></div>
<div id="a3" class="a" style="
top: 25%;
left: 62%;
width: 3%;
height: 70%;
background-color: rgba(0,255,255,.1);
"></div>
<div id="a4" class="a" style="
top: 25%;
left: 65%;
width: 35%;
height: 50%;
background-color: rgba(0,255,255,.6);
"></div>
<div id="x0"></div>
<div id="x1"></div>
<div id="x2"></div>
<div id="x3"></div>
<div id="x4"></div>
</div>
I don't know what you are after, But is this what you are searching for?
.list {
position: relative;
background-color: yellow;
}
.list:after {
content: " ";
display: block;
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
right: 10px;
width: 20px;
transform: skewX(-15deg);
}
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
</ul>
please bear with me as i'm fairly new to jquery & js in general...
Here's what i have so far. http://jsfiddle.net/hqwxogqt/1/
$(function(){
var $ppc = $('.progress'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/5;
if (percent > 2.5) {
$ppc.addClass('gt-50');
}
$('.ss-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ss-percent span').html(percent);
});
I actually found this somewhere & was able to implement it but i don't know how to animate it.
the animation i want to do is similar to how to the round counter (counts from 1-10) works here: awwwards.com
basically just to have it move from 0 to the certain number obtained from the div element. the number needs to only be from 0-5 & i also want to include decimals to the count but i can't figure out how.
i tried using a while loop & anything i found online doesn't seem to work probably because i have no clue how to use it or it's just not applicable to what i want to do. i'm just out of options...
any help will be much appreciated.
This is the basic idea: If you want them to animate for a set time, calculate the step size so it is dynamic.
function updatePercentage () {
var elem = $(this);
var current = elem.data("percent-current") || 0;
var percent = parseFloat(current) + .1;
var max = parseFloat(elem.data("percent"));
if (percent > max) {
percent = max;
}
percent = percent.toFixed(1);
deg = 360*percent/5;
elem.data("percent-current", percent);
elem.toggleClass('gt-50', percent > 2.5);
elem.find('.ss-progress-fill').css('transform','rotate('+ deg +'deg)');
elem.find('.ss-percent span').html(percent);
if (percent != max) {
window.setTimeout( updatePercentage.bind(this), 100);
}
}
$(function(){
var $ppc = $('.progress');
$ppc.each(updatePercentage);
});
.progress {width: 200px; height: 200px; border-radius: 50%; background-color: #E5E5E5; position: relative;}
.progress.gt-50 {background-color: #81CE97;}
.ss-progress {content: ""; position: absolute; border-radius: 50%; left: calc(50% - 100px); top: calc(50% - 100px); width: 200px; height: 200px; clip: rect(0, 200px, 200px, 100px);}
.ss-progress .ss-progress-fill { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 100px); top: calc(50% - 100px);
width: 200px; height: 200px; clip: rect(0, 100px, 200px, 0); background: #81CE97; transform: rotate(60deg);}
.gt-50 .ss-progress {clip: rect(0, 100px, 200px, 0);}
.gt-50 .ss-progress .ss-progress-fill {clip: rect(0, 200px, 200px, 100px); background: #E5E5E5;}
.ss-percent {content: ""; position: absolute; border-radius: 50%; left: calc(50% - 173.91304px/2); top: calc(50% - 173.91304px/2);
width: 173.91304px; height: 173.91304px; background: #fff; text-align: center; display: table;}
.ss-percent span {display: block; font-size: 2.6em; font-weight: bold; color: #81CE97;}
.ss-percent-wrapper {display: table-cell; vertical-align: middle;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="progress" data-percent="1">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
<div class="progress" data-percent="2.5">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
<div class="progress" data-percent="3">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
<div class="progress" data-percent="5">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
I've been racking my brain trying to get two problems figured out. One is an image cropping and the other is and image resizing one. Here is a overview of the code I have:
HTML code:
<script src="main.js"></script>
<div class="mainDiv">
<div class="columnDiv1">
<!-- a div here a div there -->
</div>
<div class="columnDiv2">
<div class="iconDiv1">Icon 1</div>
<div class="iconDiv2"><img src="/images/div2Icon.png" id="div2IconImg" width="1" /></div>
</div>
<div class="columnDiv3">
<!-- a div here a div there -->
</div>
<div class="bottomRowDiv">
<!-- a div here a div there -->
</div>
</div>
CSS code:
<style type="text/css">
.mainDiv {
z-index: 2;
float: left;
width: 1112px;
position: relative;
overflow: hidden;
}
.columnDiv1 {
z-index: 20;
position: absolute;
width: 33.36%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv2 {
z-index: 20;
position: absolute;
width: 30.31%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv3 {
z-index: 20;
position: absolute;
width: 36.33%;
padding: 0px;
float: left;
border: 0px solid;
}
.bottomRowDiv {
z-index: 20;
position: absolute;
width: 100%;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv1 */
.iconDiv1 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 75px;
padding-right: 0px;
float: left;
border: 0px solid;
}
.iconDiv2 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv3 */
/* stuff in here for bottomRowDiv */
#iconDiv1_link {
display:block;
text-indent: -10000px;
background: url(/images/div1.png) no-repeat;
background-position: center top;
}
#iconDiv1_link:hover {
background-image: url(/images/div1hover.png);
}
</style>
JavaScript code:
_spBodyOnLoadFunctionNames.push('sizeImageMap()');
function sizeImageMap()
{
// get screen information
var currentScreenWidth = screen.width;
var currentScreenHeight = screen.height;
// get images' information
//define Image Icon Hash keys
var imgIconHash = {};
imgIconHash['image1_link'] = {};
...
...
imgIconHash['iconDiv1_link'] = {};
imgIconHash['div2IconImg'] = {};
...
...
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLinkStyle = imgLink.currentStyle || window.getComputedStyle(imgLink, false);
imgIconHash[imgLinkName]['src']=imgLinkStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
} else if (imgLink.nodeName === "IMG") {
imgIconHash[imgLinkName]['src']=imgLink.getAttribute('src');
} else {
// not A or IMG nodes
}
// get image width and height
var tmpImg = new Image();
imgIconHash[imgLinkName]['width']=tmpImg.width;
imgIconHash[imgLinkName]['height']=tmpImg.height;
}
// initialize scaling factors
var imgScale = 1;
//set scaling factors
if(currentScreenHeight >= /*given amount*/ ) // set scale
{
imgScale = 0.5676; // reset image scale
} else {
imgScale = 0.3784; // reset image scale
}
//resize images
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLink.style.background.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.background.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
} else if (imgLink.nodeName === "IMG") {
imgLink.style.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
}
}
}
Note, this is a webpage content part in SharePoint, hence the "_spBodyOnLoadFunctionNames.push('sizeImageMap()');" to perform an operation similar to document.onload.
So, two problems I am having:
The image in the 'columnDiv2' of 'iconDiv1' seems to be being cropped. It's size is 322px width and 128px height. The left and top don't appear to be being cropped, but the bottom and right do appear, or more so, don't appear, as though they have been cropped. I have seven other images in my code that are handled the same way, and have no problems with them, but this one appears to have the problem. It's not noticeable on the first loaded image, but on the image that shows after a 'hover', you can see the cropping.
I can get the IMG's width and height, but not the a-href link's background width and height. Any direction for this would be helpful. Also, I am doing this so that the images can be resized. Note the links are id's and not class's, as I was unable to find an easy way to access the existing images width and height, before loading, and then how to resize the a-href link's size after getting it. As said, the IMG works fine, just the A doesn't want to cooperate.
Thank you in advance.