Main Goal:
"a page's z-index to move to the most front once clicked and the most front to be behind the clicked one."
My approach: onclick change the clicked class z-index to the most front and subtract the current most front z-index by one
//vars
var firstPage = $('.page-hub');
//check what class is clicked
$('div').click(function() {
var theClass = this.className;
alert(theClass);
if(theClass == 'page page-1' && theClass.css('z-index') != firstPage){
alert ('move me to front!');//most front z-index -= 1 and the clicked class page to z-index of 4
theClass.css('z-index', '4');
firstPage.css('z-index', '-=1');
firstPage = theClass;
}
//and now the firstPage var is supposedly be the new clicked class which is page .page-1
});
ps: This is what I came up with but I'm not sure how to write it or this approach may be wrong entirely.
and I'm not sure whats the best approach to this is. I'm down to basically rewrite everything really. I'm very desperate at this point, Thank you in advance.
css:
margin-left: 0px;
transition: margin-left .6s;
}
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
html:
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<ul class="roulette-title">
<li class="roulette-title-text" style="color: rgb(255, 253, 149);">R</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">O</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">U</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">L</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">E</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 253, 149)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">E</li>
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
</div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2">
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>
If i have understood your problem ....
I suggest you instead to swap the z-index, to swap the classes, because classes are linked to z-index.. If you really want to swap z-index this is one solution..if you prefer to use classes uncomment the code with swapping classeS...In anyway you have a good start to analyse my code.
$('div .page').on('click', function(event){
event.stopPropagation();
var z_clicked = $(this).css('z-index');
var class_clicked = $(this).attr('class');
alert('clicked on z-index =' + z_clicked +' classes=' + class_clicked);
if(z_clicked == 4) return false;
//trap the div which has z-index = 4
var z4 = $('div .page').filter(function(){
return $(this).css('z-index') == 4;
});
// uncomment if you want to swap the classes instead z-index
//swap the classes betwwen div clicked and div on topFront
//var class_toBack = z4.attr('class');
//z4.toggleClass(class_toBack).toggleClass(class_clicked);
//$(this).toggleClass(class_clicked).toggleClass(class_toBack);
//swap the z-index
alert('z4 classes=' + z4.attr('class'));
z4.css('z-index', $(this).css('z-index'));
$(this).css('z-index', 4);
// alert(z4.css('z-index'));
});
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2"> </div>
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>
Related
I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>
I found this slider on codepen .
How do I get it to show me a minimum of € 500 and a maximum of € 6000 but to preserve the red background?
I have tried everything eg.
<input id = "range" type = "range" class = "range-slider" min = "500" max = "6000" step = "100">
But the range slider stretches to 6000% and I'm not good at JS.
const rangeSlider = document.querySelector('.range-slider');
const rangeValueBar = document.querySelector('#range-value-bar');
const rangeValue = document.querySelector('#range-value');
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValue.style.setProperty('opacity', '1');
} else {
rangeValue.style.setProperty('opacity', '1');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
rangeValueBar.style.setProperty('width', `${rangeSlider.value}%`);
rangeValue.innerHTML = `${rangeSlider.value}€`;
}
rangeValueHandler();
rangeSlider.addEventListener('mousedown', dragHandler);
rangeSlider.addEventListener('mousemove', dragOn);
rangeSlider.addEventListener('mouseup', dragHandler);
rangeSlider.addEventListener('click', rangeValueHandler);
body {
padding: 100px;
}
.range-slider-container {
position: relative;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
position: absolute;
top: 0;
margin: 0;
}
#range-value-bar {
width: 100%;
content: "0";
background-color: #FC6E50;
position: absolute;
z-index: 10000;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
/**/
#range-value {
width: 25px;
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #E9EFF4;
border-radius: 5px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #FFF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FC6E50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000000000;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
<div class="range-slider-container">
<input id="range" type="range" class="range-slider">
<span id="range-value-bar"></span>
<span id="range-value">0</span>
</div>
I believe this is what you want, simply you can use min and max attributes for range slider form element, what I had to do is to remove width style in rangeValueHandler function.
I had to do the calculation for percentage for the width:
((input - min_value) *100)/ (max_value - min_value)}%
const rangeSlider = document.querySelector('.range-slider');
const rangeValueBar = document.querySelector('#range-value-bar');
const rangeValue = document.querySelector('#range-value');
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValue.style.setProperty('opacity', '1');
} else {
rangeValue.style.setProperty('opacity', '1');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
percentage = `${((rangeSlider.value - 500) * 100) / (6000 - 500)}%`;
rangeValueBar.style.setProperty('width', percentage);
rangeValue.innerHTML = `${rangeSlider.value}€`;
}
rangeValueHandler();
rangeSlider.addEventListener('mousedown', dragHandler);
rangeSlider.addEventListener('mousemove', dragOn);
rangeSlider.addEventListener('mouseup', dragHandler);
rangeSlider.addEventListener('click', rangeValueHandler);
body {
padding: 100px;
}
.range-slider-container {
position: relative;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
position: absolute;
top: 0;
margin: 0;
}
#range-value-bar {
width: 100%;
max-width: 100%;
content: "0";
background-color: #FC6E50;
position: absolute;
z-index: 10000;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
/**/
#range-value {
width: auto;
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
/*width: 100%;*/
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #E9EFF4;
border-radius: 5px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #FFF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FC6E50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000000000;
}
input[type=range]::-moz-range-track {
/*width: 100%;*/
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
/*width: 100%;*/
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
<div class="range-slider-container">
<input id="range" type="range" min="500" max="6000" class="range-slider">
<span id="range-value-bar"></span>
<span id="range-value">0</span>
</div>
Simply adapt the javascript that display the value:
function rangeValueHandler() {
rangeValueBar.style.setProperty('width', `${rangeSlider.value}%`);
const moneyValue = Math.round(500 + 5500 * rangeSlider.value * 0.01);
rangeValue.innerHTML = `\$ ${moneyValue}`;
}
you can set the limits min & max to any other value in this code its 500 & 6000
const rangeSlider = document.querySelector('.range-slider');
const rangeValueBar = document.querySelector('#range-value-bar');
const rangeValue = document.querySelector('#range-value');
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValue.style.setProperty('opacity', '1');
} else {
rangeValue.style.setProperty('opacity', '1');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
min=500; max=6000;
rangeValueBar.style.setProperty('width',`${rangeSlider.value}%`);
value = Math.round(min + (max-min) * (rangeSlider.value/100));
rangeValue.innerHTML = `${value}€`;
}
rangeValueHandler();
rangeSlider.addEventListener('mousedown', dragHandler);
rangeSlider.addEventListener('mousemove', dragOn);
rangeSlider.addEventListener('mouseup', dragHandler);
rangeSlider.addEventListener('click', rangeValueHandler);
body {
padding: 100px;
}
.range-slider-container {
position: relative;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
position: absolute;
top: 0;
margin: 0;
}
#range-value-bar {
width: 100%;
content: "0";
background-color: #FC6E50;
position: absolute;
z-index: 10000;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
/**/
#range-value {
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform0: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #E9EFF4;
border-radius: 5px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #FFF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FC6E50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000000000;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
<div class="range-slider-container">
<input id="range" type="range" class="range-slider">
<span id="range-value-bar"></span>
<span id="range-value">0</span>
</div>
I'm not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>
Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>
I have code below for a content cycle I have created with the help from some other Stack Overflow users. Is it possible to have the circular arrow fill up partially depending on what box your hovered on. Example: If the user hovers on box four (the bottom box) the circular arrow would fill up with a different color only up until that box. Is this possible to do with pure CSS only? If not would this be possible with vanilla JavaScript (no Jquery)? Anything helps, cheers.
.container .row {
text-align: center;
position: relative;
}
.row {
position: relative;
}
.one {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.one:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.two {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
margin-left: -35px;
}
.two:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.three {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
margin-left: -35px;
}
.three:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.four {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.four:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.five {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.five:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.six {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.six:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.circle {
display: inline-block;
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
margin-bottom: -15px;
}
.invisible {
visibility: hidden;
display: inline-block;
background-color: #1f497d;
width: 130px;
height: 65px;
border-width: 3px;
border-style: solid;
border-color: #d6d6d6;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #d0d3d8;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
top: 15px;
left: 50%;
transform: translate(-50%, 0);
z-index: -1;
}
.arrow:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -10px;
left: 55px;
background: #fff;
transform: rotate(-120deg);
}
.arrow:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: 0px;
left: 40px;
transform: rotate(-120deg);
}
<div class="container">
<div class="row">
<div class="one"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="six"></div>
<div class="invisible"></div>
<div class="two"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="invisible"></div>
<div class="circle"></div>
<div class="invisible"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="five"></div>
<div class="invisible"></div>
<div class="three"></div>
</div>
<div class="row">
<div class="four"></div>
</div>
<div class="arrow"></div>
</div>
I have fully changed your layout.
Now everything works ok. And also, making changes in the position will be easier.
.container {
width: 250px;
height: 250px;
position: absolute;
top: 45px;
left: 0px;
right: 0px;
margin: auto;
}
.ele, .arrow, .circle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#one {
transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.ele:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.circle {
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #d0d3d8;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
z-index: -3;
left: -17px;
}
#two:hover ~ .arrow {
border-top-color: red;
transform: rotate(24deg);
}
#three:hover ~ .arrow {
border-top-color: red;
transform: rotate(66deg);
}
#four:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
transform: rotate(25deg);
}
#five:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
transform: rotate(26deg);
}
#six:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
transform: rotate(66deg);
}
#one:hover ~ .arrow {
border-color: red;
}
#one:hover ~ .circle:after {
border-top-color: red;
}
.circle:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -96px;
left: -36px;
background: #fff;
background-color: white;
transform: rotate(-120deg);
z-index: -1;
}
.circle:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: -83px;
left: -44px;
transform: rotate(-120deg);
}
<div class="container">
<div class="ele" id="one">1</div>
<div class="ele" id="two">2</div>
<div class="ele" id="three">3</div>
<div class="ele" id="four">4</div>
<div class="ele" id="five">5</div>
<div class="ele" id="six">6</div>
<div class="arrow"></div>
<div class="circle"></div>
</div>
If you don't mind using images for your arrow, you could have a different image for the arrow depending on which box is hovered and then you can change the image out via css:
.one:hover {
background: url("box1arrow.jpg"); // obviously, set this to whichever image you need
}
I have a toggle button and when I click the button I want to be able to change the colors of the text from a lighter color when not selected to black when selected. Right now it is only working on one of the buttons. Attached is a fiddle of my code. https://jsfiddle.net/h2db7qLp/
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
} else {
event.classList.add('off');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px"adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short" onclick="onContainerClick(this)">L</div>
<div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>
I think that by adding the class 'on' on change it goes well, also you don't need to call your handler on every div, just call once.
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
event.classList.add('on');
} else {
event.classList.add('off');
event.classList.remove('on');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {}
.container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px "adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short">L</div>
<div class="label right-short">R</div>
</div>