Develop Reference

Range input runner progress fill color

I'm working with the range input here I'm trying to add color to the slider thumb before I had tried using background gradient but unable to achieve the desired output. when if I remove max="5" then its working fine. below is my code
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>

What you can do is to use a CSS linear-gradient() for the background of your range element. The gradient will look like this:
linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)
Where percentage is the abrupt transition point from your color green to transparent. To calculate this percentage, some math is required: you will want to calculate the relative value of the input element to its minimum and maximum values. This can be computed as such:
const percentage = (e.target.value - slider.min) / (slider.max - slider.min) * 100;
See proof-of-concept below:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
function updateGradient(rangeValue) {
const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.backgroundImage = `linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)`;
}
// Update gradient onload
updateGradient(slider.value);
// Update gradient oninput
slider.addEventListener('input', (e) => {
output.innerHTML = e.target.value;
updateGradient(e.target.value);
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
Even better: Use CSS custom properties / variables
Even better: you don't have to hardcode the color value in your JS, if you just use CSS variables/custom properties. In this case, we simply pass the calculated percentage as a string to the --percentage custom property:
background-image: linear-gradient(90deg, #4CAF50 var(--percentage), transparent var(--percentage));
Then, in your JS, it is as simply as doing this:
const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.setProperty('--percentage', percentage + '%');
See example below:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
function updateGradient(rangeValue) {
const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.setProperty('--percentage', percentage + '%');
}
// Update gradient onload
updateGradient(slider.value);
// Update gradient oninput
slider.addEventListener('input', (e) => {
output.innerHTML = e.target.value;
updateGradient(e.target.value);
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background-color: #d3d3d3;
background-image: linear-gradient(90deg, #4CAF50 var(--percentage), transparent var(--percentage));
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>

Adding box-shadow to your thumb and make overflow hidden of the slider class is doing the job.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
overflow:hidden;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: yellow;
cursor: pointer;
box-shadow: -407px 0 0 407px green;
z-index:2;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.input{
overflow:hidden;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>

Add old value as "ghost" thumb to <input type="range"> Slider

I've styled a regular range slider using an example from w3schools. My goal is to send out a new value command to an external MQTT-based smarthome thing and show the old value as some kind of ghost-thumb first:
After the smarthome system confirms the new value, the bubble will be removed - but that's not my problem at this point. I would like to place the ghost between the background of the slider and the real-value-thumb, currently it looks like this:
Here you can see the result on JSFiddle, here's the code:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
// Show ghost slider
$('#slider_1_companion').css('left', 'calc('+ $(this).data('last-mqtt-value') / $(this).attr('max') +'* (100% - 20px))');
$('#slider_1_companion').css('display', 'block');
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
$('#slider_1_companion').css('display', 'none');
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
/*https://stackoverflow.com/a/46318225/1997890*/
.slider_wrapper {
position: relative;
width: 150px;
}
.slider_companion {
background-color: #ccc;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
top: calc(100% - 19px); /* for some reason this is not 20px (height of thumb) */
/* left: calc( PERCENTAGE * (100% - 20px)); /* add this line dynamically via jQuery */
display: none;
pointer-events: none; /*click-through*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<div id="slider_1_companion" class="slider_companion"></div>
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

I would consider a box-shadow for the slider that you can adjust with CSS variable and no need for extra element and you will have the expected result.
Here is an idea:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
document.getElementById('slider_1_wrapper').style.setProperty("--c",
($(this).data('last-mqtt-value') - $(this).val() )*130 + 'px');
/*130 = 150 - 20 = width of wrapper - width of thumb*/
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
document.getElementById('slider_1_wrapper').style.setProperty("--c",0);
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider_wrapper {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

.slider::-webkit-slider-thumb needed in javascript

I want to make a slider that changes the dot size when the value changes.
So value 1 will be a size of 10px and value 100 will be size 100px.
How am a able to change the .slider::-webkit-slider-thumb height with javascript?
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<h1>Round Range Slider</h1>
<div class="" "slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
what I tried =
document.getElementById("myRange").style.webkitTransform = "height: 100px";

Okay, so, before answering the question:
::-webkit-slider-thumb is a pseudo element. Those elements are not part of the DOM. Therefore, changing them in JavaScript can get a bit hacky.
A proper solution would be completely replacing the thumb with another element.
Now to answer the question: You could inject styles into an <style> element with a given attribute when the slider value changes.
So you would add
<style data="test" type="text/css"></style>
to your header, then target the element and add CSS to it like that:
var style = document.querySelector('[data="test"]');
style.innerHTML = ".class { property: value; }";
This, combined with the code you provided at this link would be a solution to your problem.
Demo:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var style = document.querySelector('[data="test"]');
setData(slider.value);
slider.oninput = function() {
setData(this.value);
}
function setData(x){
output.innerHTML = x;
style.innerHTML = ".slider::-webkit-slider-thumb { width: " + x + "px !important; height: " + x + "px !important; }";
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider {
margin-top: 40px;
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
}
<style data="test" type="text/css"></style>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
Also: you said
So value 1 will be a size of 10px and value 100 will be size 100px.
If you want an approach like value 1 to 10 equals 10px and everything above value 10 is the actual value in pixels, you can change the line
style.innerHTML = "...";
to
style.innerHTML = ".slider::-webkit-slider-thumb { width: " + (x < 10 ? 10 : x) + "px !important; height: " + (x < 10 ? 10 : x) + "px !important; }";
A Live demo of this version can be found HERE

2022 - Use CSS variables
The accepted answer works, but it's a lot of code and hard to understand. This can be done a lot easier these days...
In your CSS just add a variable like this --sliderSize:
.slider {
--sliderSize: 25px; /* <---- Add this */
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--sliderSize); /* <---- Set the variable here */
height: var(--sliderSize); /* <--- and here */
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
Then in your JavaScript simply set the variable to whatever you want using setProperty:
const newSliderSize = '100px'; // this could be a passed in dynamic value, etc.
document.getElementById("myRange").style.setProperty('--sliderSize', newSliderSize);
Here is a working fiddle of it all put together:
const newSliderSize = '50px'; // this could be a passed in dynamic value, etc.
document.getElementById("myRange").style.setProperty('--sliderSize', newSliderSize);
.slider {
--sliderSize: 25px; /* <---- Add this */
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--sliderSize); /* <---- Set the variable here */
height: var(--sliderSize); /* <--- and here */
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" min="1" max="100" id="myRange" class="slider" />

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.

Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row (continued)

This is a continuation on the project from before, seen here (Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row). User Scription has been incredibly helpful. Thank you!
The next line of business to get this working the way I need it to work is to have it so that the fourth option in the menu is editable via onClick, but in a way that is different from the options above it, as it requires a different set of options. The options for this line involve changing the text only, and does not involve numbers in any way. I have figured out how to change the text via onClick from another thread on stackoverflow, but I need to now integrate this into my existing design. I've got the Plunker going (link below). As you can see, I can get the fourth option row's text to change no problem by using the little button that I put down below the wrapper for testing purposes. I need this one to be able to be adjust ONLY when it is highlighted, and with the existing D-pad left/right arrows — the same way the other lines do. Obviously, the values need to increase and decrease according to which button is pressed, too. The text phrases start at one place and end in another, so the onClick events need to cycle through them in sequence.
To further complicate or add to the project, I need to be able to have the user scroll down to the "more↓" option and then into a completely new set/window of options. I would imagine we would use something along the lines of CSS overflow: property, but when combining it with all of this code I'm not really sure how to pull that off.
As always, any help is appreciated!
Plunk it here: http://plnkr.co/edit/LarWS7qNrl0zXbRNaPS0?p=preview
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
/* Colors for later: 6acff6 6799ea cyan */
body {
font-family: arial, helvetica, sans-serif;
font-size: 1.7em;
}
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6acff6;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
overflow: hidden;
}
#screen-container h1 {
margin: 15px 0 0 0;
text-align: center;
text-transform: uppercase;
font-size: 1em;
font-weight: 100;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 5px 10px 0 -35px;
text-transform: uppercase;
}
li {
list-style-type: none;
line-height: 50px;
padding: 0 10px 0 10px;
}
li:selected {
color: #000;
}
.number-input {
float: right;
width: 50px;
height: 40px;
font-size: 1em;
text-align: right;
color: #ffffff;
background-color: transparent;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
font-size: .65em;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = '0871b9'; }
else { sel[i].style.backgroundColor = '6acff6'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){
SBoxPrevNext(-1);
};
document.getElementById("down").onclick=function(){
SBoxPrevNext(1);
};
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number'+ SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<h1>Program Menu</h1>
<ul>
<li>Program Number <input class="number-input" type="number" min="0" max="80" value="0" id="number0"></li>
<li>Etch Time Sec <input class="number-input" type="number" min="0" max="80" value="0" id="number1"></li>
<li>Etch Temp °C <input class="number-input" type="number" min="20" max="100" value="20" id="number2"></li>
<li id="program-type">Pulse HNO3 <!--<input class="number-input" type="text" min="0" max="80" value="3:1" id="number3">--></li>
<li style="text-align: right">more ↓</li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>&#9650</div><div id="down"><p>&#9660</div>
<div id="left" onclick="decrementValue()"><p>◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
<script type="text/javascript">
var nextWord = (function() {
var wordArray = ['Pulse Mix N:S 6:1','Pulse Mix N:S 5:1','Pulse Mix N:S 4:1','Pulse Mix N:S 3:1','Pulse Mix N:S 2:1','Pulse Mix N:S 1:1','Vortex HNO3','Vortex Mix N:S 6:1','Vortex Mix N:S 5:1','Vortex Mix N:S 4:1','Vortex Mix N:S 3:1','Vortex Mix N:S 2:1','Vortex Mix N:S 1:1','Pulse H2SO4','Pulse Mix S:N 1:1','Pulse Mix S:N 2:1','Pulse Mix S:N 3:1','Pulse Mix S:N 4:1','Pulse Mix S:N 5:1','Pulse Mix S:N 6:1'];
var count = -1;
return function() {
return wordArray[++count % wordArray.length];
}
}());
</script>
<button onclick="document.getElementById('program-type').innerHTML = nextWord();">►</button>
</body>
</html>
UPDATE 2013-09-27
I've updated my code and am getting close, but am stuck here: http://plnkr.co/edit/iZOJAx8BmKVMX8zII4kk?p=preview. I'm having a battle with that fourth row. It just doesn't quite work right. I can get the value to change and the proper text to display when I adjust the number with a keyboard, but it doesn't work with the onClick from the D-pad changes to the value. When the D-pad does it, no change to the text occurs. I think this has something to to with the "keyup" call in the code, but nothing I put in there (onBlur, onFocus, etc.) seems to work.
My current setup is far from elegant, so any suggestions on how to clean up that mess would be appreciated. I'm sure there's an easier way to accomplish the same thing, but this is what I conceived using the knowledge I have and the ideas that came to mind. Complete code can be seen below. Please pardon the relative links, as that was copied from my actual file (I'm starting to put together the interface now so I'm using graphics for many of the elements).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="font-collection.css">
<style type="text/css">
/* Colors for later: 6acff6 6799ea cyan */
body {
font-size: 1.7em;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #6393c1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#6393c1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#6393c1 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#6393c1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
font-family: arial, helvetica, sans-serif;
padding: 10px;
}
h1 {
margin: 0 0 20px 20px;
font-size: 1.75em;
font-family: "alright-light","century gothic";
font-variant: small-caps;
font-weight: 100;
color: #427abd;
}
#wrapper {
width: 1150px;
height: 850px;
margin: 0 auto;
padding: 15px;
background-color: #fafafa;
border: 1px solid #474747;
border-radius: 10px;
}
#keypad-body {
margin: 0 auto;
width: 1082px;
height: 670px;
padding: 0px;
background-color: #b3b5b8;
border: 1px solid #474747;
border-radius: 10px;
}
#screen-container {
float: left;
margin: 90px 0 0 80px;
background: #6acff6;
width: 400px;
height: 220px;
border: 3px solid #d3d3d3;
border-radius: 15px;
color: #ffffff;
overflow: hidden;
}
#screen-container h1 {
margin: 15px 0 0 0;
text-align: center;
text-transform: uppercase;
font-size: 1em;
font-weight: 100;
font-family: arial, helvetica, sans-serif;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
margin: 80px 100px 0 0;
width: 432px;
height: 336px;
background-color: #b3b5b8;
border: 0px solid #d3d3d3;
}
ul {
margin: 5px 10px 0 -35px;
text-transform: uppercase;
font-size: .9em;
}
li {
list-style-type: none;
line-height: 32px;
padding: 0 10px 0 10px;
}
li:selected {
color: #000;
}
.number-input {
float: right;
width: 50px;
height: 30px;
font-size: 1em;
text-align: right;
color: #ffffff;
background-color: transparent;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
#up {
background: url(images/keypad-graphic-button-up.png);
background-repeat: no-repeat;
position: absolute;
margin: 30px 0 0 0;
left: 170px;
width: 90px;
height: 77px;
background-color: transparent;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
font-size: .65em;
}
#down {
background: url(images/keypad-graphic-button-down.png);
background-repeat: no-repeat;
position: absolute;
margin: 0 0 30px 0;
bottom: 0;
left: 170px;
width: 90px;
height: 77px;
background-color: transparent;
cursor: s-resize;
}
#left {
background: url(images/keypad-graphic-button-minus.png);
background-repeat: no-repeat;
background-position: 10px;
position: absolute;
left: 30px;
top: 130px;
width: 62px;
height: 64px;
margin: 5px;
background-color: transparent;
cursor: w-resize;
}
#right {
background: url(images/keypad-graphic-button-plus.png);
background-repeat: no-repeat;
position: absolute;
right: 10px;
top: 130px;
width: 62px;
height: 64px;
margin: 5px;
background-color: #transparent;
cursor: e-resize;
}
#start {
background: url(images/keypad-graphic-button-start.png);
background-repeat: no-repeat;
position: absolute;
left: 133px;
top: 140px;
width: 181px;
height: 54px;
background-color: #transparent;
cursor: e-resize;
text-align: center;
}
#stop {
background: url(images/keypad-graphic-button-stop.png);
background-repeat: no-repeat;
position: relative;
float: right;
margin: 30px 100px 0 0;
width: 432px;
height: 66px;
border: 0px solid #d3d3d3;
background-color: transparent;
text-align: center;
}
#ntg-logo {
background: url(images/keypad-graphic-ntg-logo.png);
background-repeat: no-repeat;
margin: 25px auto;
width: 320px;
height: 116px;
}
#jetetch-pro-logo {
background: url(images/keypad-graphic-jetetch-pro-logo.png);
background-repeat: no-repeat;
margin: -70px 0 0 120px;
float: left;
width: 302px;
height: 151px;
}
#up, #down, #left, #right, #start, #stop {
border: 1px solid #000000;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
input.button {
font-family: trajan;
width: auto;
margin: 0px;
padding: 10px;
border: 0px;
color: #4378bd;
background-color: #efefef;
font-size: .75em;
text-transform: uppercase;
font-weight: 900;
}
input.button:hover {
color: #ffffff;
background-color: #858585;
}
.button {
width: auto;
padding: 5px;
border: 1px solid #4378bd;
border-radius: 5px;
font-size: .6em;
}
.clear {
clear: both;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = '0871b9'; }
else { sel[i].style.backgroundColor = '6acff6'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){
SBoxPrevNext(-1);
};
document.getElementById("down").onclick=function(){
SBoxPrevNext(1);
};
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number'+ SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<h1>Virtual Keypad</h1>
<div id="keypad-body">
<div id="screen-container">
<h1>Program Menu</h1>
<form method="post" id="keypad">
<ul>
<li>Program Number <input class="number-input" type="number" min="0" max="80" value="0" id="number0"></li>
<li>Etch Time Sec <input class="number-input" type="number" min="0" max="80" value="0" id="number1"></li>
<li>Etch Temp °C <input class="number-input" type="number" min="20" max="100" value="20" id="number2"></li>
<li><input class="number-input program-type" type="text" min="0" max="80" value="1" id="number3">
<span class="text0">Pulse HNO3</span>
<span class="text1">Pulse HNO3</span>
<span class="text2">Pulse Mix N:S 6:1</span>
<span class="text3">Pulse Mix N:S 5:1</span>
<span class="text4">Pulse Mix N:S 4:1</span>
<span class="text5">Pulse Mix N:S 3:1</span>
<span class="text6">Pulse Mix N:S 2:1</span>
<span class="text7">Pulse Mix N:S 1:1</span>help</li>
<li style="text-align: right">more ↓</li>
</ul>
</div>
<div id="d-pad">
<div id="up"></div><div id="down"></div>
<div id="left" onclick="decrementValue()"></p></div><div id="start"></div><div id="right" onclick="incrementValue()"></div>
</div>
<div class="clear"></div>
<div id="stop"></div>
<div id="jetetch-pro-logo"></div>
<div class="clear"></div>
<div id="ntg-logo"></div>
</div><!-- end keypad body -->
<center>
<br><br><form method="post">
<input class="button" type="button" value="Close Window"
onclick="window.close()">
</form>
</center>
</div><!-- end wrapper -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var span = $('.text0').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 0) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text1').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 1) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text2').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 2) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text3').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 3) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text4').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 4) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text5').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 5) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text6').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 6) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text7').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 7) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
</script>
</body>
</html>

I finally understood what you mean.
in order to achieve that you have to add to each of the input boxes a new attribute
onfocus="DoSomething()"
So that final result would look like
<input onfocus="FocusStripe(0)" class="number-input" type="number" min="0" max="80" value="0" id="number0" ">
While the number 0 suite for the first box, the number 1 suite for the second box and so on.
Then we have to write a new function as follows:
function FocusStripe(stripeID) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
sel[stripeID].style.backgroundColor = '0871b9';
sel[SBoxPtr].style.backgroundColor = '6acff6';
SBoxPtr = stripeID;
}
I have created a working plnker example
I hope that answer your need.
if this answer helped you please mark it as an helpful answer.