How change range slider to show money? - javascript

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>

Related

JQuery onclick change z-index

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>

How can I solve the problem of my quiz project?

I've been working on this project for a while. I found the code from the Internet. I have never created a quiz game before. I edited the code a little. But unfortunately there are some problems with the code, which are difficult for me.
So far only digits are represented as questions. I want letters to be used for questions as well. The button to run the game, the limited reflection time and the score works. Unfortunately, if you press the right answer, the spear doesn't go on, but stops, but you get a point. I want that after a correct answer new questions are added and that the user gets a point. If the user presses the wrong answer, I want the game to stop and the scores achieved to be displayed.
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
hide('try');
show('correct');
setTimeout(function(){
hide('correct');
},1000);
genQA();
}else{
show('try');
hide('correct');
setTimeout(function(){
hide('try');
},1000);
}
}
}
}
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: none;
}
#correct
{
display: none;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct">Correct</div>
<div id="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>

I looked at your javascript code and i found some solutions .
This code will works for you . Its a little different : i corrected some errors .
I also added the classes for 'correct' and 'try' and modified the css file .
Here you are your corrected codes :
Javascript code:
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML=""
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML="";
},1000);
genQA();
}else{
document.getElementById('try').innerHTML="Try Again";
document.getElementById('correct').innerHTML="";
setTimeout(function(){
document.getElementById('try').innerHTML="";
},1000);
}
}
}
}
Css file :
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;
}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
Html Page :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct" class="correct">Correct</div>
<div id="try" class="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>
You only have to replace your files with this codes .
I hope it helps you ! :-)

Re-position HTML5 video seekbar

I'm trying to create a mock page in HTML that plays a video in full screen in the background. I have a trasparent image that overlays the background video which mimics playing buttons and titles (all buttons are just an image and not real!).
Now I need to insert a real seekbar and scrubber to the video tag, with adjustable width and location as shown below. How can I do that?
Here is my simple code so far. The static image is HERE and the video is HERE.
video#backgroundvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

Have you checked out? MDN: Video player styling basics?
Edit: Here is an example of a progress bar with your overlay. You may need to mess with element positioning, but you should properly nest/scope your elements.
const player = document.querySelector('.video-player');
const video = player.querySelector('video');
const progressBar = player.querySelector('.progress-bar');
video.addEventListener('timeupdate', updateProgressBar, false);
progressBar.addEventListener('click', seek);
function updateProgressBar() {
var percentage = Math.floor((100 / video.duration) * video.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + '% played';
}
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
video.currentTime = percent * video.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
.video-player {
position: relative;
width: 66%;
height: 66%;
}
.video-player img {
width: 100%;
height: 100%;
}
.video-player video {
position: fixed;
top: 0;
left: 0;
min-width: 66%;
min-height: 66%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
.video-player .controls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-player .controls .progress-bar {
position: absolute;
margin-left: 28%;
bottom: 10%;
color: orange;
font-size: 12px;
width: 40%;
height: 8%;
border: none;
background: #434343;
border-radius: 9px;
vertical-align: middle;
cursor: pointer;
}
.video-player .controls progress::-moz-progress-bar {
color: orange;
background: #434343;
}
.video-player .controls progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.video-player .controls progress[value]::-webkit-progress-value {
background-color: orange;
}
<div class="video-player">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="">
<div class="controls">
<progress class="progress-bar" min="0" max="100" value="0">0% played</progress>
</div>
</div>
Here is an example with custom controls. It is a mirror of Rob Gravelle's HTML5 Video Player with Custom Controls. Most of the styles are defined in there.
Pay attention to the progress bar style.
progress {
color: green;
font-size: 12px;
width: 220px;
height: 16px;
border: none;
margin-right: 10px;
background: #434343;
border-radius: 9px;
vertical-align: middle;
}
progress::-moz-progress-bar {
color: green;
background: #434343;
}
progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: green;
}
// Get a handle to the player
const player = document.getElementById('video-element');
const btnPlayPause = document.getElementById('btnPlayPause');
const btnMute = document.getElementById('btnMute');
const progressBar = document.getElementById('progress-bar');
const volumeBar = document.getElementById('volume-bar');
// Update the video volume
volumeBar.addEventListener("change", function(evt) {
player.volume = evt.target.value;
});
document.getElementById('btnFullScreen').disabled = true;
// Add a listener for the timeupdate event so we can update the progress bar
player.addEventListener('timeupdate', updateProgressBar, false);
// Add a listener for the play and pause events so the buttons state can be updated
player.addEventListener('play', function() {
// Change the button to be a pause button
changeButtonType(btnPlayPause, 'pause');
}, false);
player.addEventListener('pause', function() {
// Change the button to be a play button
changeButtonType(btnPlayPause, 'play');
}, false);
player.addEventListener('volumechange', function(e) {
// Update the button to be mute/unmute
if (player.muted) changeButtonType(btnMute, 'unmute');
else changeButtonType(btnMute, 'mute');
}, false);
player.addEventListener('ended', function() {
this.pause();
}, false);
progressBar.addEventListener("click", seek);
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
function playPauseVideo() {
if (player.paused || player.ended) {
// Change the button to a pause button
changeButtonType(btnPlayPause, 'pause');
player.play();
} else {
// Change the button to a play button
changeButtonType(btnPlayPause, 'play');
player.pause();
}
}
// Stop the current media from playing, and return it to the start position
function stopVideo() {
player.pause();
if (player.currentTime) player.currentTime = 0;
}
// Toggles the media player's mute and unmute status
function muteVolume() {
if (player.muted) {
// Change the button to a mute button
changeButtonType(btnMute, 'mute');
player.muted = false;
} else {
// Change the button to an unmute button
changeButtonType(btnMute, 'unmute');
player.muted = true;
}
}
// Replays the media currently loaded in the player
function replayVideo() {
resetPlayer();
player.play();
}
// Update the progress bar
function updateProgressBar() {
// Work out how much of the media has played via the duration and currentTime parameters
var percentage = Math.floor((100 / player.duration) * player.currentTime);
// Update the progress bar's value
progressBar.value = percentage;
// Update the progress bar's text (for browsers that don't support the progress element)
progressBar.innerHTML = percentage + '% played';
}
// Updates a button's title, innerHTML and CSS class
function changeButtonType(btn, value) {
btn.title = value;
btn.innerHTML = value;
btn.className = value;
}
function resetPlayer() {
progressBar.value = 0;
// Move the media back to the start
player.currentTime = 0;
// Set the play/pause button to 'play'
changeButtonType(btnPlayPause, 'play');
}
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
function toggleFullScreen() {
//var player = document.getElementById("player");
if (player.requestFullscreen)
if (document.fullScreenElement) {
document.cancelFullScreen();
} else {
player.requestFullscreen();
}
else if (player.msRequestFullscreen)
if (document.msFullscreenElement) {
document.msExitFullscreen();
} else {
player.msRequestFullscreen();
}
else if (player.mozRequestFullScreen)
if (document.mozFullScreenElement) {
document.mozCancelFullScreen();
} else {
player.mozRequestFullScreen();
}
else if (player.webkitRequestFullscreen)
if (document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
} else {
player.webkitRequestFullscreen();
}
else {
alert("Fullscreen API is not supported");
}
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: lightgray;
}
p {
font-size: 0.9em;
}
h1 {
font-size: 16px;
color: #333;
}
#player {
float: left;
padding: 1em 1em .5em;
background-color: black;
border: 2px solid darkgreen;
border-radius: 9px;
}
#controls {
border: 1px solid darkgreen;
width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
padding-bottom: 3px;
border-radius: 7px;
}
video {
border: 1px solid darkgreen;
width: 420px;
height: 231px;
background: black;
}
button {
text-indent: -9999px;
width: 16px;
height: 16px;
border: none;
cursor: pointer;
background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
/* url('buttons.png') */
}
.pause {
background-position: -19px 0;
}
.stop {
background-position: -38px 0;
}
#volume-bar {
width: 50px;
vertical-align: middle;
padding: 0px;
}
.mute {
background-position: -95px 0;
}
.unmute {
background-position: -114px 0;
}
.replay {
background-position: -133px 0;
}
.fullscreen {
text-indent: 0px;
color: #00c600;
background-color: black;
background-image: none;
padding: 0px;
font-weight: bold;
padding-bottom: 3px;
}
progress {
color: green;
font-size: 12px;
width: 220px;
height: 16px;
border: none;
margin-right: 10px;
background: #434343;
border-radius: 9px;
vertical-align: middle;
}
progress::-moz-progress-bar {
color: green;
background: #434343;
}
progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: green;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #276c30;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-moz-range-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 4.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #194620;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-fill-upper {
background: #205928;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
height: 4.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #205928;
}
input[type=range]:focus::-ms-fill-upper {
background: #276c30;
}
ground-color: lightgray;
}
p {
font-size: 0.9em;
}
h1 {
font-size: 16px;
color: #333;
}
#player {
float: left;
padding: 1em 1em .5em;
background-color: black;
border: 2px solid darkgreen;
border-radius: 9px;
}
#controls {
border: 1px solid darkgreen;
width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
padding-bottom: 3px;
border-radius: 7px;
}
video {
border: 1px solid darkgreen;
width: 420px;
height: 231px;
background: black;
}
button {
text-indent: -9999px;
width: 16px;
height: 16px;
border: none;
cursor: pointer;
background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
/* url('buttons.png') */
}
.pause {
background-position: -19px 0;
}
.stop {
background-position: -38px 0;
}
#volume-bar {
width: 50px;
vertical-align: middle;
padding: 0px;
}
.mute {
background-position: -95px 0;
}
.unmute {
background-position: -114px 0;
}
.replay {
background-position: -133px 0;
}
.fullscreen {
text-indent: 0px;
color: #00c600;
background-color: black;
background-image: none;
padding: 0px;
font-weight: bold;
padding-bottom: 3px;
}
progress {
color: green;
font-size: 12px;
width: 220px;
height: 16px;
border: none;
margin-right: 10px;
background: #434343;
border-radius: 9px;
vertical-align: middle;
}
progress::-moz-progress-bar {
color: green;
background: #434343;
}
progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: green;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #276c30;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-moz-range-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 4.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #194620;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-fill-upper {
background: #205928;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
height: 4.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #205928;
}
input[type=range]:focus::-ms-fill-upper {
background: #276c30;
}
<h1>Custom HTML5 Video Player Demo</h1>
<div id='player'>
<video id='video-element'>
<source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
<source src='https://www.w3schools.com/html/mov_bbb.ogg' type='video/ogg'>
</video>
<div id='controls'>
<progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
<button id='btnReplay' class='replay' title='replay' accesskey="R" onclick='replayVideo();'>Replay</button>
<button id='btnPlayPause' class='play' title='play' accesskey="P" onclick='playPauseVideo();'>Play</button>
<button id='btnStop' class='stop' title='stop' accesskey="X" onclick='stopVideo();'>Stop</button>
<input type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
<button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button>
<button id='btnFullScreen' class='fullscreen' title='toggle full screen' accesskey="T" onclick='toggleFullScreen();'>[ ]</button>
</div>
</div>
<div style="clear:both"></div>
<p>Video courtesy of Big Buck Bunny.</p>
<p>Volume bar styled using range.css.</p>

radio button as image with onclick to next fieldset

<a id="Choise" name="next" class="next Choise-button" value="Next" >
<input type="radio" name="designation" id="designation" />
<label for="designation"><img src="" alt="designation" />
<h2>designation</h2></label>
</a>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$('#Choise input:radio').addClass('input_hidden');
$('#Choise label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise2 input:radio').addClass('input_hidden');
$('#Choise2 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise3 input:radio').addClass('input_hidden');
$('#Choise3 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise4 input:radio').addClass('input_hidden');
$('#Choise4 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise5 input:radio').addClass('input_hidden');
$('#Choise5 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise6 input:radio').addClass('input_hidden');
$('#Choise6 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise7 input:radio').addClass('input_hidden');
$('#Choise7 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise8 input:radio').addClass('input_hidden');
$('#Choise8 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise9 input:radio').addClass('input_hidden');
$('#Choise9 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
/*custom font*/
#import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 950px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 1px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 40px 40px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
margin-top: 5px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform select {
text-align:left;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
margin-top: 5px;
width: 30%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 400px;
background: #00affe;
font-weight: bold;
font-size:16px;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
}
/*buttons2*/
#msform .choise-button {
cursor: pointer;
}
#msform .choise-button:hover, #msform .choise-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
border: 10 solid;
border-color: #FF0000;
}
#msform .Angaben {
font-size:12px;
text-align:left;
}
#msform .zustimmung {
font-size:12px;
}
#msform .zustimmunglinks {
font-size:12px;
color:#00affe;
}
#msform .zustimmunglinks:hover, #msform .zustimmunglinks:active, #msform .zustimmunglinks:hover+label, #msform .zustimmunglinks:active+label {
font-size:13px;
}
/*headings*/
.fs-title {
font-size: 18px;
color: #2C3E50;
margin-bottom: 40px;
}
.hr {
width: 110%;
margin-left: -5%;
text-align: center;
margin-bottom: 25px;
}
.Abfragentext {
border: 1px solid;
width:300px;
text-align: center;
margin-bottom: 40px;
margin-top: 40px;
padding-bottom: 30px;
margin: auto;
}
.fs-boldtitle {
font-weight: bold;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.sliderOutput {
color: #00affe;
font-weight: bold;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
font-size: 9px;
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 7px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 20px;
background: white;
position: absolute;
left: -50%;
top: 0px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #00affe;
color: white;
}
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-style: solid;
border-width: 5px;
border-color: #00affe;
border-radius: 5px;
}
#usp.uspdiv {
font-size:12px;
text-align: center;
margin-top: 20pt;
background-color: #888888;
width: 100%;
hight:100%;
}
.usp-facts1 {
font-size:13px;
margin-top: 20pt;
background-color: #F5F5F5;
width: 100%;
padding: 25px;
padding-right:50px;
margin-left:-40px;
margin-bottom:-40px;
}
.usp-table {
width:100%;
text-align: center;
}
.usp-prima {
font-size:18px;
color:#00affe;
}
/*Seite eins Auswahlen*/
label:hover, label:active, input:hover+label, input:active+label {
border: 3px solid;
border-color: #00affe;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
transform: scale(1.05);
}
#Choise label {
width: 400px;
margin-right:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise h2 {
margin-bottom: 20px;
}
#Choise2 label {
margin-left:5px;
margin-right:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise2 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise2 h2 {
margin-bottom: 20px;
}
#Choise3 label {
margin-left:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise3 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise3 h2 {
margin-bottom: 20px;
}
#Choise4 label {
margin-top:5px;
margin-right:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise4 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise4 h2 {
margin-bottom: 20px;
}
#Choise5 label {
margin-top:5px;
margin-left:5px;
margin-right:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise5 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise5 h2 {
margin-bottom: 20px;
}
#Choise6 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise6 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise6 h2 {
margin-bottom: 20px;
}
#Choise7 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise7 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise7 h2 {
margin-bottom: 20px;
}
#Choise8 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise8 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise8 h2 {
margin-bottom: 20px;
}
#Choise9 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise9 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise9 h2 {
margin-bottom: 20px;
}
/*ragen Slider Etagen*/
input[type=range].etagenslider {
-webkit-appearance: none;
width: 100%;
margin: 8.5px 0;
}
input[type=range].etagenslider:focus {
outline: none;
}
input[type=range].etagenslider::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
background: #484d4d;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].etagenslider::-webkit-slider-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.5px;
}
input[type=range].etagenslider:focus::-webkit-slider-runnable-track {
background: #7e8787;
}
input[type=range].etagenslider::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
background: #484d4d;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].etagenslider::-moz-range-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
}
input[type=range].etagenslider::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].etagenslider::-ms-fill-lower {
background: #121313;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
}
input[type=range].etagenslider::-ms-fill-upper {
background: #484d4d;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
}
input[type=range].etagenslider::-ms-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
height: 3px;
}
input[type=range].etagenslider:focus::-ms-fill-lower {
background: #484d4d;
}
input[type=range].etagenslider:focus::-ms-fill-upper {
background: #7e8787;
}
Hey, I am working on a contact form in which several steps are taken per .
the first step is that you can choose an image from six images.
When you click on an image (which acts as hidden radio-button) then it allows to (are directed to) the next fieldset.
This link prevent the radio buttons from being selected. do you have an idea how to activate the input with the link at the same time? I already tried it with an onclick, but unfortunately it doesn't work. I need the to "group" the code, because otherwise, it dont work.
I'm looking forward to your ideas, thank you!
Edit: is it possible to say if <a id="x1"> is klickes then select <input type="radio" id="x1" and how would the code look like? im not that good, sorry for that :(

Change text color onclick

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>

Categories