Recently I've been facing a problem that whenever I try to use transform with a certain image, it just goes blank. The picture below (before transform):
Also, this is the information of the file:
CSS:
[id^=addition] {
width: 75px;
height: 75px;
margin: auto;
border-radius: 45%;
cursor: pointer;
display: inline-block;
margin: 15px;
color: rgba(0, 0, 0, 0);
line-height: 55px;
vertical-align: top;
transition: box-shadow 0.4s, filter 0.5s, transform 0.3s;
background-image: url(https://image.ibb.co/gLLYdU/bottom_buttons_min.png);
background-size: 19199px 75px;
}
[id^=addition]:hover {
transform: scale(1.1)
}
<div id=addition_example> </div>
some JS code that splits the big file into pieces:
$('#addition_' + additions[i] + ', #addition_search_' + additions[i] + ', #addition_category_' + additions[i] + ', #addition_colorizing_' + additions[i]).css({
'background-size': additions_buttons_scale[$.inArray(additions_type[i], addition_type_symbol)][1] * 69 + 'px 69px',
'background-position': -69 * random_number + 'px',
'background-color': 'rgba(255, 255, 255, 0)'
})
Related
I am trying to use this Codepen to create inside each section of my grid container on the profile page separate progress circles, but I get only one visible circle, the others are just empty squares without progress circles.
Could someone please give me a clue what went wrong? I tried to re-name classes and tweaked the code, but it didn't work.
Part of html:
<div class="grid-container">
<div class="counter" data-cp-percentage="75" data-cp-color="#00bfeb"></div>
<div class="counter" data-cp-percentage="65" data-cp-color="#EA4C89"></div>
<div class="counter" data-cp-percentage="35" data-cp-color="#FF675B"></div>
<div class="counter" data-cp-percentage="44" data-cp-color="#FF9900"></div>
</div>
CSS
.profile_intro {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
margin-top: 0px;
width: 100%;
height: 20%;
}
.profilepic-img {
vertical-align: center;
border-radius: 100px;
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.userinfo {
margin: auto;
width: 50%;
padding: 5px;
text-align: center;
}
.useremail {
margin-top: 5%;
}
table {
border: 2px solid #cccccc;
width: 80%;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: center;
color: grey;
}
th,
td {
padding: 5px;
text-align: center;
}
th {
font-size: 18px;
}
.grid-container {
display: grid;
/*important!
justify-content: space-evenly;
grid-template-columns: auto auto; /*important!!
/* grid-template-columns: 50px 50px; /*Make the grid smaller than the container*/
*/ grid-gap: 10px;
background-color: #f1eee3;
padding: 10px;
align-content: center;
left: 0px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
/* padding: 10px 0; */
font-size: 3vw;
border-radius: 25px;
background: #faf8f4;
width: 35vw;
height: 35vw;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #383e3f;
text-decoration-style: solid;
}
/*progress Bar */
h1 {
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.2);
border-bottom: 3px solid #00bfeb;
font-size: calc(1em + 1vmax);
}
.counter {
display: -webkit-inline-box;
display: inline-flex;
cursor: pointer;
width: 300px;
height: 300px;
max-width: 100%;
position: relative;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
font-size: calc(1em + 1vmin);
-webkit-transition: height .2s ease-in-out;
transition: height .2s ease-in-out;
background: #fff;
border-radius: 50%;
box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.2);
margin: 1em 0;
}
.percentage {
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
vertical-align: middle;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
Javascript
document.addEventListener("DOMContentLoaded", function() {
var circleProgress = (function(selector) {
var wrapper = document.querySelectorAll(selector);
Array.prototype.forEach.call(wrapper, function(wrapper, i) {
var wrapperWidth,
wrapperHeight,
percent,
innerHTML,
context,
lineWidth,
centerX,
centerY,
radius,
newPercent,
speed,
from,
to,
duration,
start,
strokeStyle,
text;
var getValues = function() {
wrapperWidth = parseInt(window.getComputedStyle(wrapper).width);
wrapperHeight = wrapperWidth;
percent = wrapper.getAttribute('data-cp-percentage');
innerHTML = '<span class="percentage"><strong>' + percent +
'</strong> %</span><canvas class="circleProgressCanvas"
width="' + (wrapperWidth * 2) + '" height="' + wrapperHeight *
2 + '"></canvas>';
wrapper.innerHTML = innerHTML;
text = wrapper.querySelector(".percentage");
canvas = wrapper.querySelector(".circleProgressCanvas");
wrapper.style.height = canvas.style.width = canvas.style.height
= wrapperWidth + "px";
context = canvas.getContext('2d');
centerX = canvas.width / 2;
centerY = canvas.height / 2;
newPercent = 0;
speed = 1;
from = 0;
to = percent;
duration = 1000;
lineWidth = 25;
radius = canvas.width / 2 - lineWidth;
strokeStyle = wrapper.getAttribute('data-cp-color');
start = new Date().getTime();
};
function animate() {
requestAnimationFrame(animate);
var time = new Date().getTime() - start;
if (time <= duration) {
var x = easeInOutQuart(time, from, to - from, duration);
newPercent = x;
text.innerHTML = Math.round(newPercent) + " %";
drawArc();
}
}
function drawArc() {
var circleStart = 1.5 * Math.PI;
var circleEnd = circleStart + (newPercent / 50) * Math.PI;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(centerX, centerY, radius, circleStart, 4 * Math.PI,
false);
context.lineWidth = lineWidth;
context.strokeStyle = "#ddd";
context.stroke();
context.beginPath();
context.arc(centerX, centerY, radius, circleStart, circleEnd,
false);
context.lineWidth = lineWidth;
context.strokeStyle = strokeStyle;
context.stroke();
}
var update = function() {
getValues();
animate();
}
update();
var btnUpdate = document.querySelectorAll(".btn-update")[0];
btnUpdate.addEventListener("click", function() {
wrapper.setAttribute("data-cp-percentage",
Math.round(getRandom(5, 95)));
update();
});
wrapper.addEventListener("click", function() {
update();
});
var resizeTimer;
window.addEventListener("resize", function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
clearTimeout(resizeTimer);
start = new Date().getTime();
update();
}, 250);
});
});
function easeInOutQuart(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
});
circleProgress('.counter');
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
});
Found the bug: I didn't have in my HTML some elements that had been mentioned in JavaScript. Changed names of classes and it works fine at the moment. Thank you all!
I am trying to create a custom cursor that changes when hovering over a <div>, but there is a flicker when moving left to right across it, but not when moving right to left. Why this is happening and what I can do to fix it?
document.addEventListener('mousemove', (ev) => cursorMove(ev));
function cursorMove(ev) {
let circle = document.getElementById('circle');
let posY = ev.clientY;
let posX = ev.clientX;
circle.style.top = posY + 'px';
circle.style.left = posX + 'px';
}
body {
margin: 0;
height: 100vh;
background-color: #acd1d2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
}
#wrapper {
position: relative;
width: 70%;
height: 80%;
}
.box {
height: 25%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box-1 {
background-color: #e8edf3;
}
#box-1:hover ~ #circle {
background-color: #e6cf8b;
box-shadow:inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
}
#box-2 {
background-color: #e6cf8b;
}
#box-2:hover ~ #circle {
background-color: transparent;
border: 3px solid #E91E63;
}
#box-3 {
background-color: #b56969;
}
#box-3:hover ~ #circle {
height: 1em;
width: 1em;
background-color: #e6cf8b;
}
#box-4 {
background-color: #22264b;
color: white;
}
#box-4:hover ~ #circle {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
#circle {
position: fixed;
border-radius: 50%;
z-index: 5;
height: 32px;
width: 32px;
background-color: white;
}
<div id="wrapper">
<div id="box-1" class="box">Sphere</div>
<div id="box-2" class="box">Circle outline</div>
<div id="box-3" class="box">Circle pin</div>
<div id="box-4" class="box">Circle color gradient</div>
<div id="circle"></div>
</div>
That's because your mouse moves faster than the circle and you hover over it, so the styles that apply to it are the same ones than when the cursor is on the background green/blue-ish area of the page.
You can fix that by adding pointer-events: none to the circle so that it feels a bit like this:
Ok, where were we? Oh yes... So you should use position: fixed instead of absolute (as you really want your cursor to be positioned relative to the top-left corner of the viewport) and probably window.requestAnimationFrame to get a smoother animation and translate3d(0, 0, 0) to promote the element to its own layer and enable hardware-accelerated rendering, which will also contribute to make it feel smoother.
You could also hide the default cursor with cursor: none and center the circle where the arrowhead of the cursor is to make it feel just like a real cursor.
const circle = document.getElementById('circle');
const circleStyle = circle.style;
document.addEventListener('mousemove', e => {
window.requestAnimationFrame(() => {
circleStyle.top = `${ e.clientY - circle.offsetHeight/2 }px`;
circleStyle.left = `${ e.clientX - circle.offsetWidth/2 }px`;
});
});
body {
margin: 0;
height: 100vh;
background-color: #acd1d2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
cursor: none;
}
#wrapper {
position: relative;
width: 70%;
height: 80%;
}
#circle {
position: fixed;
border-radius: 50%;
z-index: 5;
height: 32px;
width: 32px;
background-color: white;
pointer-events: none;
transition:
background ease-in 10ms,
box-shadow ease-in 150ms,
transform ease-in 150ms;
/* Promote it to its own layer to enable hardware accelerated rendering: */
transform: translate3d(0, 0, 0);
}
.box {
height: 25%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box-1 {
background-color: #e8edf3;
}
#box-1:hover ~ #circle {
background-color: #e6cf8b;
box-shadow: 0 0 0 0 transparent, inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
}
#box-2 {
background-color: #e6cf8b;
}
#box-2:hover ~ #circle {
background-color: transparent;
/* Use box-shadow instead of border to avoid changing the dimensions of the
cursor, which will make it be off-center until the mouse moves again: */
aborder: 3px solid #E91E63;
box-shadow: 0 0 0 3px #E91E63;
}
#box-3 {
background-color: #b56969;
}
#box-3:hover ~ #circle {
background-color: #e6cf8b;
/* Change its size with scale() instead of width and height for better
performance performance: */
transform: scale(0.5) translate3d(0, 0, 0);
}
#box-4 {
background-color: #22264b;
color: white;
}
#box-4:hover ~ #circle {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
<div id="wrapper">
<div id="box-1" class="box">Sphere</div>
<div id="box-2" class="box">Circle outline</div>
<div id="box-3" class="box">Circle pin</div>
<div id="box-4" class="box">Circle color gradient</div>
<div id="circle"></div>
</div>
Here you can see another cool example I made of a custom cursor using CSS that resembles a torch: How to darken a CSS background image but keep area around cursor brighter.
Also, you can check out the cursor on my website, which is quite similar to what you have done as it has animations/transitions between its different shapes or states.
🚀 Check it out here: https://gmzcodes.com/.
👨💻 Check the code here: https://github.com/Danziger/gmzcodes
I try to make an image slider which will show a picture when a mouse hovers over a dot. I tried too switch between images by using z-index but nothing moved.
.slider {
counter-reset: index 1000;
}
.slider input[name='slide_switch']:hover+label+img {
counter-increment: index;
z-index: counter(index);
}
The way you were trying to use counter wasn't going to work even if you used JavaScript/jQuery. The counter properties are used to number elements like an ordered list it has nothing to do with z-index. The best you can do is to rely on CSS animation which you can see in the following snippet. The key properties were:
transition: all 3s a long duration is needed to view z-index animated.
color: rgba(R, G, B, A) A is an opacity value that can change from totally visible to invisible, plus the levels of transparency between.
position: absolute/relative is not only required for z-index but also helpful for vertical and horizontal dimensions for elements as well.
calc() a function that will apply a simple equation for CSS properties. One of it's best features is that will work with a combination of absolute (e.g. px, pt, etc.) and/or relative (e.g. em, %, etc.) values.
When hovering over a circle, keep the cursor there for 3 sec. Animating z-index is a slow process because at faster speeds the progressive fading won't be noticeable.
Snippet
html {
font: 400 12px/1.2 'Consolas';
}
.slider {
position: relative;
width: 250px;
height: 250px;
}
output {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 3s;
display: block;
}
output b {
position: absolute;
font-size: 5rem;
top: calc(125px - 2.5rem);
text-align: center;
display: block;
width: 100%;
}
label {
z-index: 100;
position: relative;
height: 25px;
width: 25px;
padding: 5px;
cursor: pointer;
display: inline-block;
}
label b {
z-index: 100;
position: relative;
height: 15px;
width: 15px;
border: 1px solid #fff;
border-radius: 12px;
cursor: pointer;
margin: 5px;
display: inline-block;
padding: 1px 1px 0;
text-align: center;
color: #fff;
}
#A {
z-index: 10;
background: rgba(190, 0, 0, .5);
}
#B {
z-index: 20;
background: rgba(0, 0, 190, .5);
}
#C {
z-index: 30;
background: rgba(255, 50, 0, .5);
}
#D {
z-index: 40;
background: rgba(50, 200, 50, .5);
}
#E {
z-index: 50;
background: rgba(210, 100, 55, .5);
}
#F {
z-index: 60;
background: rbga(255, 200, 0, .5);
}
#a:hover~#A {
z-index: 70;
transition: all 3s;
background: rgba(190, 0, 0, 1);
}
#b:hover~#B {
z-index: 70;
transition: all 3s;
background: rgba(0, 0, 190, 1);
}
#c:hover~#C {
z-index: 70;
transition: all 3s;
background: rgba(255, 50, 0, 1);
}
#d:hover~#D {
z-index: 70;
transition: all 3s;
background: rgba(50, 200, 50, 1);
}
#e:hover~#E {
z-index: 70;
transition: all 3s;
background: rgba(210, 100, 55, 1);
}
#f:hover~#F {
z-index: 70;
transition: all 3s;
background: rgba(255, 200, 0, 1);
}
label:hover {
background: rgba(255, 255, 255, .1);
color: #000;
}
.top {
z-index: 75;
background: rgba(255, 255, 255, 1);
position: absolute;
width: 250px;
height: 205px;
transition: all 3s
}
label:hover~.top {
z-index: 0;
background: rgba(255, 255, 255, .1);
transition: all 3s
}
hr {
position: relative;
z-index: 101;
}
<fieldset class='slider'>
<label id="a" for="A"><b>A</b></label>
<label id="b" for="B"><b>B</b></label>
<label id="c" for="C"><b>C</b></label>
<label id="d" for="D"><b>D</b></label>
<label id="e" for="E"><b>E</b></label>
<label id="f" for="F"><b>F</b></label>
<hr/>
<output id="A"><b>A</b></output>
<output id="B"><b>B</b></output>
<output id="C"><b>C</b></output>
<output id="D"><b>D</b></output>
<output id="E"><b>E</b></output>
<output id="F"><b>F</b></output>
<div class='top'> </div>
</fieldset>
This is a neat idea, but runs into one or two problems:
The CSS counter() function returns a <string> but the z-index property is looking for an <integer>.
Browsers don't really support it anyway.
The MDN counter() docs note that:
The counter() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
It's not completely clear what they mean by "the type-or-unit parameter" since none is discussed on that page. The attr() function does allow returning alternate types (e.g. an integer) via a <type-or-unit> parameter. I wonder if someone was toying with adding the same parameter to counter() at some point; if so, this appears to have been abandoned long ago.
I'm working on 3D bloc following mouse move on it. I'm updating CSS values to create a 3D effect.
The Base look like:
document.addEventListener('DOMContentLoaded', function() {
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(3)
let delta_y = parseFloat(e.offsetY / el.offsetHeight).toFixed(3)
var transform = "rotateY(" + ((delta_x - 0.5) * 50) + "deg) " +
"rotateX(" + (-(delta_y - 0.5) * 50) + "deg)"
var boxShadow = parseInt(-(delta_x - 0.5) * 8) +"px " +
parseInt(-((delta_y - 0.5) * 8) + 2) +
"px 4px rgba(34, 25, 25, 0.4);"
el.setAttribute('style',
"transform: " + transform + "; " +
"box-shadow: " + boxShadow);
}
let els = document.getElementsByClassName("el")
let len = els.length
for(let i=0; i<len; i++) {
let el = els[i]
el.addEventListener("mousemove", mouseMove)
}
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
/*font-family: 'Open Sans', sans-serif; */
font-weight: 400;
font-size: 14px;
display: flex;
flex-wrap: wrap;
perspective: 500px;
}
.container {
position: relative;
margin: auto;
width: 20%;
height: 40%;
transition: all .25s;
transform-origin: 50% 50%;
}
.container:hover {
transform: translateZ(25px);
}
.el {
height: 100%;
background: #FFF; color: #000;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
}
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
<div id="wrapper">
<div class="container">
<div class="el"></div>
</div>
</div>
The JS concept is simple: When the mouse move on the bloc, I got the position (in %: position / bloc size) of the mouse on x and y.
For x (0 -> 1) I move the transform property from rotate: rotateY(-12deg) to rotate: rotateY(12deg)
Same thing for y (0 -> 1) from rotate: rotateX(-12deg) to rotate: rotateX(12deg)
I also move the box-shadow (with x and y) to help visualization.
The result look good, but if I add a background to this bloc the result look weird.
(Same code with background)
document.addEventListener('DOMContentLoaded', function() {
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(3)
let delta_y = parseFloat(e.offsetY / el.offsetHeight).toFixed(3)
var transform = "rotateY(" + ((delta_x - 0.5) * 50) + "deg) " +
"rotateX(" + (-(delta_y - 0.5) * 50) + "deg)"
var boxShadow = parseInt(-(delta_x - 0.5) * 8) +"px " +
parseInt(-((delta_y - 0.5) * 8) + 2) +
"px 4px rgba(34, 25, 25, 0.4);"
el.setAttribute('style',
"transform: " + transform + "; " +
"box-shadow: " + boxShadow);
}
let els = document.getElementsByClassName("el")
let len = els.length
for(let i=0; i<len; i++) {
let el = els[i]
el.addEventListener("mousemove", mouseMove)
}
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
/*font-family: 'Open Sans', sans-serif; */
font-weight: 400;
font-size: 14px;
display: flex;
flex-wrap: wrap;
perspective: 500px;
}
.container {
position: relative;
margin: auto;
width: 20%;
height: 40%;
transition: all .25s;
transform-origin: 50% 50%;
}
.container:hover {
transform: translateZ(25px);
}
.el {
height: 100%;
background: #FFF url(https://images-na.ssl-images-amazon.com/images/M/MV5BMjQyODg5Njc4N15BMl5BanBnXkFtZTgwMzExMjE3NzE#._V1_SY1000_SX686_AL_.jpg);
background-size: cover;
background-position: 50% 50%;
color: #000;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
}
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
<div id="wrapper">
<div class="container">
<div class="el"></div>
</div>
</div>
Now, it's look like only the top part working, and the bottom isn't moving in the good direction. (Best reproduction when the mouse is moving from top-left to bottom-right).
Did I made a mistake ? Or it's a perspective problem ?
Update Some browser didn't like the CSS bellow, if the white box didn't move when you move the mouse on it, just remove this.
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
You need to have perspective applied on the immediate parent of the transformed element.
I solved using perspective: inherit
document.addEventListener('DOMContentLoaded', function() {
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(3)
let delta_y = parseFloat(e.offsetY / el.offsetHeight).toFixed(3)
var transform = "rotateY(" + ((delta_x - 0.5) * 50) + "deg) " +
"rotateX(" + (-(delta_y - 0.5) * 50) + "deg)"
var boxShadow = parseInt(-(delta_x - 0.5) * 8) +"px " +
parseInt(-((delta_y - 0.5) * 8) + 2) +
"px 4px rgba(34, 25, 25, 0.4);"
el.setAttribute('style',
"transform: " + transform + "; " +
"box-shadow: " + boxShadow);
}
let els = document.getElementsByClassName("el")
let len = els.length
for(let i=0; i<len; i++) {
let el = els[i]
el.addEventListener("mousemove", mouseMove)
}
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
/*font-family: 'Open Sans', sans-serif; */
font-weight: 400;
font-size: 14px;
display: flex;
flex-wrap: wrap;
perspective: 500px;
}
.container {
position: relative;
margin: auto;
width: 20%;
height: 40%;
transition: all .25s;
transform-origin: 50% 50%;
perspective: inherit;
}
.container:hover {
transform: translateZ(25px);
}
.el {
height: 100%;
background: #FFF url(https://images-na.ssl-images-amazon.com/images/M/MV5BMjQyODg5Njc4N15BMl5BanBnXkFtZTgwMzExMjE3NzE#._V1_SY1000_SX686_AL_.jpg);
background-size: cover;
background-position: 50% 50%;
color: #000;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
}
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
<div id="wrapper">
<div class="container">
<div class="el"></div>
</div>
</div>
I have questions about angular-ui-switch (http://ngmodules.org/modules/angular-ui-switch). I would like to let the switch show different background colors based on the name of each object. Below is what I did:
-- I the color defined in the css file as below:
.switch {
background: #fff;
border: 1px solid #dfdfdf;
position: relative;
display: inline-block;
box-sizing: content-box;
overflow: visible;
width: 50px;
height: 30px;
padding: 0px;
margin: 0px;
border-radius: 20px;
cursor: pointer;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: 0.3s ease-out all;
-webkit-transition: 0.3s ease-out all;
top: -1px;
}
.switch small {
background: #fff;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
width: 30px;
height: 30px;
position: absolute;
top: 0px;
left: 0px;
transition: 0.3s ease-out all;
-webkit-transition: 0.3s ease-out all;
}
.switch.checked {
background: rgb(100, 189, 99);
border-color: rgb(100, 189, 99);
}
.switch.checked small {
left: 22px;
}
.switch.red
{
background: rgb(187, 2, 2);
}
.switch.primary
{
background: rgb(74, 124, 173);
}
.switch.green
{
background: rgb(16, 124, 42);
}
Here is my Html view:
<div ng-repeat="es in allEventSources track by $index" style="margin-top:5px; vertical-align:middle; line-height:40px">
<span style="float:left; margin-top:8px; font-size:16px;">{{es.name}}:</span>
<span style="float:right; margin-top:8px;"><switch class="{red: es.name=='Boston', primary: es.name=='New York', green: es.name=='Washington' }" ng-model="es.enabled" ng-click="toggleEventSource(es)"></switch></span>
</div>
However, my switch is always ONLY showing the green as the background color. Does any one here know why?
Any help would be great appreciated. Thank you very much :-)
(tested with angular-ui-switch version 0.1.0)
If you edit .switch.checked css class, you will globally alter all switches.
However, you could tweak the style of individual <switch/> with ng-style attribute, in order to override background color resulting from .switch.checked css class being applied to switches in "on" state.
For example:
<switch id="enabled" name="enabled" ng-model="enabled" ng-style="getStyle(enabled, 'red')" />
In your angular controller define a function:
$scope.getStyle = function(enabled, color) {
return {
'background': enabled?color:'white',
'border-color': enabled?color:'white'
}
}