We Keep Coding

How change range slider to show money?

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>

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 :(

How to automatically fit a paragraph into a div box

I'm using JQuery to prepend a <p> element into a div however if mainButtonText in the p element is too long, it will be outside of the div.
http://puu.sh/mvm7F/a99aba0b1e.jpg
I want it to look like this: http://puu.sh/mvmEy/c17db01e4a.jpg
Is it also possible to automatically resize the text font size?
html:
<div id="mainButton"></div>
css:
#mainButton {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100px;
height: 40px;
font-family: monospace;
font-size: 12px;
text-align: center;
line-height: 40px;
background: #808080;
color: #fff;
text-decoration: none;
border-radius: 10px;
box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8);
}
#mainButton:hover {
background: #d3d3d3;
}
#mainButton:active {
top: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4);
}
javascript:
function changeMainButton() {
'use strict';
$('#mainButton').empty();
$('#mainButton').prepend('<p>' + mainButtonText + '</p>');
}
Thanks for any help! :)

Maybe this could help:
#mainButton {
...
overflow: hidden;
}

You can make the text adjust to its container using
#mainButton {
word-wrap: break-word;
}
You can also resize the font size in relation to its parent element using javascript like http://simplefocus.com/flowtype/ or http://fittextjs.com/ but if you want to control it in granular use #media, em and rem

Centering a div keeping the children Floating left

I have 2 div's and I want one to be centered on the screen and the other one to be on the left of it's parent #MyContent (The one which is centered). But, it seems like adding a "Float:left;" to #Latest cause a DOM error, #MyContent isn't holding #Latest any longer and it shrinks leaving #Latest out of it like if #Latest was "position:absolute;" when its "relative;".
I have these:
HTML:
<center>
<div id="MyContent">
<div id="Latest">
<div class="Last"></div>
</div>
</div>
</center>
CSS:
#MyContent {
position: relative;
font-family: FontStencil;
font-size: 12px;
padding: 20px 20px 160px 20px;
color: black;
background: rgba(240, 240, 240, 0.2);
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 250;
width: 950px;
box-shadow: 0px 5px 15px -2px black;
}
#Latest {
position: relative;
font-family: FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align: left;
font-size: 18px;
padding: 20px 20px 30px 20px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
left: 20px;
top: 30px;
width: 570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last {
position: relative;
font-family: SuperG;
text-align: left;
right: -18px;
font-size: 12px;
padding: 15px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 25px;
width: 500px;
height: 415px;
box-shadow: 0px 1px 17px -5px black;
}
Everything is position:Relative; but it acts like if #Latest is not when I add a float:left; HALP.

CSS
#MyContent{
font-family:FontStencil;
font-size:12px;
padding:20px 20px 160px 20px;
color:black;
background:rgba(240,240,240, 0.2);
border-radius:18px;
border:1px solid #CCCCCC;
top:250;
width:950px;
box-shadow: 0px 5px 15px -2px black;
margin: 0 auto;
display: inline-block;
}
#Latest{
position:relative;
font-family:FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align:left;
font-size:18px;
padding:20px 20px 30px 20px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
left:20px;
top:30px;
width:570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last{
position:relative;
font-family:SuperG;
text-align:left;
right:-18px;
font-size:12px;
padding:15px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
top:25px;
width:500px;
height:415px;
box-shadow: 0px 1px 17px -5px black;
}
Try the above CSS. DEMO

Editing 2D arrays to display a "map"

So, I'm doing a "map overlay" for a 2D array in Javascript, but it keeps coming out like this:
Have a Fiddle:
http://jsfiddle.net/HcRVW/6/
Note that the map is being rendered in some strange order.
Cheers in advance, I've been looking at it for ages now.
<html>
<head>
<title>tileEngine - Isometric</title>
<style type="text/css">
#mapoverlay {
position: absolute;
z-index: 888;
top: 70px;
color: lightgreen;
width: 420px;
height: 300px;
padding: 10px 5px 5px 5px;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
background-color: #666;
z-index: 900;
-moz-text-shadow: 3px 3px 3px #000;
-webkit-text-shadow: 3px 3px 3px #000;
text-shadow: 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
}
.mN { width: 8px; height: 8px; display: inline-block; float: right; list-style-type: none; background-color: #fff; font-size: 1px; line-height: 1px; margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = Array( //land
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
[2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2],
[2,2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2],
[2,2,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,0,0,0,1,1,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2],
[2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,0,1,1,1,1,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2],
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]
);
for(i=0;i<map.length;i++){
for(a=0;a<map[i].length;a++){
$('#mapoverlay').append('<li class="mN '+map[i][a]+'"> </li>');
}
}
$('.mN').each(function() {
if ($(this).hasClass('0')) {
$(this).css({'background-color':'green'})
} else if ($(this).hasClass('1')) {
$(this).css({'background-color':'blue'})
} else if ($(this).hasClass('2')) {
$(this).css({'background-color':'blue'})
} else {
$(this).css({'background-color':'green'})
}
});
});
</script>
</head>
<body align="center" style="text-align: center;">
<ul id="mapoverlay"></ul>
</body>
</html>

It's your css. See you have 57 items per array. That is 57x8=456px.
#mapoverlay {
position: absolute;
z-index: 888;
top: 70px;
color: lightgreen;
width: 456px;
border: 10px solid #666;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
background-color: #666;
z-index: 900;
-moz-text-shadow: 3px 3px 3px #000;
-webkit-text-shadow: 3px 3px 3px #000;
text-shadow: 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
overflow: hidden;
}
.mN { width: 8px; height: 8px; display: block; float: left; list-style-type: none; background-color: #fff; font-size: 1px; line-height: 1px; margin: 0px; padding: 0px; }

Here you go: http://jsfiddle.net/HcRVW/9/
Removed the fancy CSS stuff and updated the width to hold same amount of items as each "inner" array length.
Also separated HTML, JS and CSS as jsFiddle supports it.

Heloo,
i saw the fiddle example and i think u have to decrease the array size
or increase overlay size.
because i tried to decrease the array size like this http://jsfiddle.net/HcRVW/10/

Two off-topic points (hence this being a CW answer):
0, 1, and 2 are invalid CSS classes. In CSS, a class name must not start with a digit.
Rather than calling Array as a function, recommend just using literal notation throughout as you have with the sub-arrays, e.g.:
var map = [
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, // ...
];

Have a look here. Seems they do the same, but transforming to 3D also:
http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/