Develop Reference

Toggle Switch to disable and enable Links

In the code below, I have coded a switch that disables and enables my links using CSS.
The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with
HTML Button:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
I know there is something wrong with this because it is of the input type checkbox.
Thank you for any help you can provide.

Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
});
.switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>

Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.
Basic switch
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
}
<div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div>

I think you just need to have a specific name of a class for an enabled link or disabled link
style
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
script
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});

For the record, please note that it is simpler in JS (es6).
And because the subject only mentions javascript (not jQuery) on tag list.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
}
.switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
}
<div class="switch" data-status="1" ><span></span></div>

Why are the button elements not changing the pictures?

So I am in the middle of working on creating my own website. I just started working on the about me section of the website and I wanted to add a slideshow to showcase pictures of my life and interests. I used the code in the book "Jquery & Javascript by Jon Duckett" but for some reason when I click on the buttons to change to the next slide nothing happens.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$('.slider').each(function () {
'use strict';
var $this = $(this), //For every slider
$group = $this.find('.slides'), //Gets the current slider
$slides = $this.find('.slide'), //Gets the slide-group(container)
buttonArray = [], //jQuery object to hold all slides
currentIndex = 0, //Create array to hold nav buttons
timeout; //Used to store the timer
function move(newIndex) {
var animateLeft, slideLeft; //Declare variables
//advance();
//if current slide is showing or a slide is animating, then do nothing
if ($group.is(':animated') || currentIndex === newIndex) {
return;
}
buttonArray[currentIndex].removeClass('active'); //Remove class from item
buttonArray[newIndex].addClass('active'); //Add class to new item
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%'; //Animate the current group to the left
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
//Position new slide to left (if less) or right (if more) of current
$slides.eq(newIndex).css({left: slideLeft, display: 'block'});
$group.animate({left: animateLeft}, function () {
$slides.eq(currentIndex).css({display: 'none'});
$slides.eq(newIndex).css({left: 0});
$group.css({left: 0});
currentIndex = newIndex;
});
}
function advance() {
clearTimeout(timeout); //Clear timer stored in timeout
//Start timer to run an anonymous function every 4 seconds
timeout = setTimeout(function () {
if (currentIndex < ($slides.length - 1)) { //If not the last slide
move(currentIndex + 1); //Move to next slide
} else { //Otherwise
move(0); //Move to the first slide
}
}, 4000); //Milliseconds timer will wait
}
$.each($slides, function (index) {
//Create a button element for the button
var $button = $('<button type="button" class="slide-btn">•</button>');
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function () {
move(index);
}).appendTo($this.find('.slide-buttons'));
buttonArray.push($button);
});
advance();
});
html {
height: 100%;
}
h1 {
color: white;
text-align: center;
}
h2{
color: white;
}
h3 {
color: white;
}
body{ min-height:100%;
padding:0;
margin:0;
position: relative;
overflow-x:hidden;
}
#IDE{
background-color: white;
width: 60%;
}
#banner {
position: absolute;
top: -20px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
z-index: -1;
}
#picture {
/* border: 50px solid black;*/
border-radius: 10px;
display:block;
margin: 0px auto;
}
#Paragraph{
color:white;
font-size:130%;
}
#Navbar
{
/*list-style-type: none;*/
margin: 100px;
margin-right: -10px;
margin-left: 0px;
padding: 0;
overflow: hidden;
/*background-color: orange;*/
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/*background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");*/
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! ");*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#Navbar a {
display: block;
padding: 14px;
/* background: #e2e2e2;*/
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
/* background-color: dodgerblue;
background-image: url("https://www.transparenttextures.com/patterns/fake-brick.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
table {
margin-top: 260px;
color: white;
background-color: black;
}
#Navbar li {
display:inline-block;
margin-right:0px;
font-weight: bold;
color: white;
float: left;
border-right: 0px solid #bbb;
}
#Skillset{
list-style-type: disc;
color: white;
}
li a, .dropbtn{
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
/* background-color:#111;*/
background-color: black;
color: red;
text-shadow: 0 0 20px blue, 0 0 10px lime;
font-style: oblique;
text-decoration:underline;
background-color: green;
}
#Skillset ul li{
list-style-type: disc;
}
li.dropdown{
display:inline-block;
}
.active {
background-color: #4CAF50;
}
/* THe container <div> - needed to position the drop down content*/
/*.dropdown{
position: relative;
display: inline-block;
}*/
/*Drop down content hidden by default*/
.dropdown-content {
display: none;
position: absolute;
background-color:#f9f9f9;
min-width;160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*Links inside the dropdown*/
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
/*Changes color of dropdown links hover*/
.dropdown-content a:hover {background-color:black;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
#sidebar_container
{ float: right;
width: 300px;}
.sidebar_base
{ width: 200px;
height: 14px;
background-color: black;}
.sidebar
{ float: right;
width: 290px;
padding: 0;
margin: 100px 0 16px 0;
}
.sidebar_item
{ background-color: black;
padding: 0 15px;
width: 250px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
height: 1000px;
}
.sidebar li a.selected
{ color: #444;}
.sidebar ul
{ margin: 0;}
.footer {
position: absolute;
bottom: -1100px;
padding: 1rem;
background-color: black;
text-align: center;
width: 100%;
}
.footer p
{ line-height: 1.7em;
padding: 0 0 10px 0;
color: white;
}
.footer a
{ color: #A8AA94;
text-decoration: none;
}
.footer a:hover
{ color: blue;
text-decoration:underline;
}
.slider {
max-height: 430px;
max-width: 940px;
margin: 0px auto 30px auto;}
slide-viewer {
position:relative;
overflow: hidden;
height: 300%;
}
.slide-group{
width:100%;
height:100%;
position:relative;
}
.slide{
width: 100%;
height: 100%;
display: none;
position: absolute;
}
.slide:first-child{
display: block;
}
.slide-buttons {
text-align: right;
}
.slide-btn {
border:none;
background: none;
color: red;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
<!DOCTYPE HTML>
<html id="About Me">
<style>
body {
background-image: url("http://wallpaperrs.com/uploads/3d-abstract/blue-square-pattern-wide-wallpaper-13878.jpg");
background-size: auto;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, intial-scale-1">
<title>Bart Allen</title>
<h1>Bartholomew Allen</h1>
<ul id="Navbar">
<!-- Each of the linked list are referenced as links that lead to alterantive pages-->
<li>HOME</li>
<li>Purpose</li>
<li class="dropdown" >
My Projects
<div class="dropdown-content">
C++
Java
</div>
</li>
<li>LinkedIn Profile link</li>
<li style="float:right"><a class="active" href="About me.html">About me</a></li>
</ul>
<!--The '#' are used as text links, once the other pages are created then they will use urls-->
</head>
<body>
<link rel="stylesheet" href="main.css">
<img id="banner" src="https://math.columbusstate.edu/images/math_banner.jpg" alt="Banner Image"/>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\CCBC Essex Logo.jpg" height="350px" width="860px">
</div>
<div class="slide slide-2">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Cross Country.jpg" height="350px" width="860px">
</div>
<div class="slide slide-3">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\TU Logo.jpg">
</div>
<div class="slide slide-4">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Jessica And I.jpg">
</div>
</div>
</div>
<div class="slide-buttons">
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
</div>
</div>
</section>
<div id="sidebar_container">
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">
<h2>Skillset Currently</h2>
<h3>Programming languages known:</h3>
<div id="Skillset">
<ul>
<li>Java</li>
<li>C++</li>
<li>Javascript</li>
<li>JQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
<br>
<h3>Mathematics taken</h3>
<ul>
<li>Linear Algebra</li>
<li>Calculus I</li>
<li>Calculus II</li>
<li>Discrete Mathematics</li>
</ul>
<br>
</div>
</div>
</div >
</div>
<footer>
<div id="content_footer"></div>
<div class="footer">
<p>HOME | Purpose | My Project
</p>
<p>Copyright© Bartholomew Allen</p>
</div>
</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slider.js"></script>
<!--<script type="text/jquery.cycle2.min.js" src="js/jquery.cycle2.min.js"> </script>
</body>
</html>
I'm trying to create exactly this Content Panels- Responsive Slider

Unless you want to re-invent the wheel itself, [see example implementations below] you can use jquery ui carousel
http://code.runnable.com/WY_gouUfKGNOY4ET/output
or bootstrap to create carousel.
https://getbootstrap.com/docs/3.3/examples/carousel/

How do I get fancybox gallery to respect Isotope combination filtering in a gallery?

The code that I'm using to add the data-fancybox-group attribute of "gallery" is only applying to the last filter button I clicked, instead of the combination of filters that are currently being applied. You can filter images with isotope, and then click any of them to load into lightbox. If you go here http://codepen.io/benslocum/pen/jVQjpo and choose sink then you can click one of the sink images, and scroll through just sinks by hitting left or right (or scrolling with your mousewheel). So far, so good. If you then click kitchen you'll see the images are now filtered to JUST kitchen sinks. But, if you click one of those images, the gallery that you'll be scrolling through will be all KITCHEN images... including non-sinks. It appears that somewhere around line 32 in JS I am causing the fancybox gallery to only be applied to the last filter button you click, and not the cumulative filterValue that takes into account all the filters that are checked. What do I need to change to make the data-fancybox-group attribute of gallery apply to the combination filter, and not just the last filter that was checked?
In case that codepen goes away, here is the JS
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.optiones',
layoutMode: 'fitRows'
});
// random order
$grid.isotope({ sortBy : 'random' });
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// store filter for each group
var filters = {};
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
// make the selected images part of fancybox gallery
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
$(".fancybox").fancybox({
arrows : false, closeClick : true, closeBtn : false
});
// ignoring my NOT selection... trying to make the anyfeature-button NOT be among the buttons that forces the detail button to be selected
$('#feature').not('#anyfeature-button').on('click', function(e){
$('#roomdetails') .find('.is-checked').removeClass('is-checked');
$('#detail-button') .addClass('is-checked');
$('#detail-button').trigger('click');
});
$('#fullroom-button').on('click', function(e){
$('#feature') .find('.is-checked').removeClass('is-checked');
$('#anyfeature-button') .addClass('is-checked');
$('#anyfeature-button').trigger('click');
});
$('.generic-location').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
$('#anyroom-button') .addClass('is-checked');
$('#anyroom-button').trigger('click');
});
$('#bathshower-button').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
$('#bathroom-button') .addClass('is-checked');
$('#bathroom-button').trigger('click');
});
$('filters a').click(function(event){
event.preventDefault()
});
And here's shorter version of the html
<div id="header"><img src="http://sales.newpasaderahomes.com/wp-content/uploads/2015/05/Pasadera_Logo_Horiz.png" alt="Logo" class="logo-img">
<div class="filters">
<div class="ui-group" id="roomdetails">
<div class="button-group js-radio-button-group" data-filter-group="type">
<button class="button is-checked" id="both-button" data-filter="">both</button>
<button class="button" id="fullroom-button" data-filter=":not(.detail)">full room</button>
<button class="button" id="detail-button" data-filter=".detail">detail</button>
</div>
</div>
<div class="ui-group">
<h3>Room</h3>
<div class="button-group js-radio-button-group" data-filter-group="room">
<button class="button is-checked" id="anyroom-button" data-filter="">any</button>
<button class="button" data-filter=".kitchen">kitchen</button>
<button class="button" id="bathroom-button" data-filter=".bathroom">bathroom</button>
<button class="button" data-filter=":not(.kitchen):not(.bathroom)">other</button>
</div>
</div>
<div class="ui-group">
<h3>Plan</h3>
<div class="button-group js-radio-button-group" data-filter-group="plan">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".Plan1">plan 1</button>
<button class="button" data-filter=".Plan2">plan 2</button>
<button class="button" data-filter=".Plan3">plan 3</button>
<button class="button" data-filter=".Plan4">plan 4</button>
<button class="button" data-filter=".Plan5">plan 5</button>
</div>
</div>
<div class="ui-group" id="feature">
<h3>Feature</h3>
<div class="button-group js-radio-button-group" data-filter-group="feature">
<button class="button anyfeature-button is-checked" id="anyfeature-button" data-filter="">any</button>
<button class="button" data-filter=".tile">tile</button>
<button class="button" data-filter=".hardware">hardware</button>
<button class="button" data-filter=".door">door</button>
<button class="button" data-filter=".sink">sink</button>
<button class="button generic-location" data-filter=".lighting">lighting</button>
<button class="button generic-location" data-filter=".handrail">handrail</button>
<button class="button generic-location" id="wallceiling-button" data-filter=".wall-ceiling">wall/ceiling</button>
<button class="button" id="bathshower-button" data-filter=".bath-shower">tub/shower</button>
<button class="button" data-filter=".cabinet-interior">cabinet interior</button>
</div>
</div>
</div>
</div>
<div class="gridholder">
<div class="grid">
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Bath-Vanity-2-Kichler-6122-NI.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Bath-Vanity-2-Kichler-6122-NI.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Dining-Room-Transglobe-6545-BN.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Dining-Room-Transglobe-6545-BN.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Front-Porch-Kichler-10953-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Front-Porch-Kichler-10953-TZ.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Garage-Entry-Kichler-10923-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Garage-Entry-Kichler-10923-TZ.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2597.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2597.jpg"></a></div>
<div class="optiones Plan1 detail wall-ceiling "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2602.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2602.jpg"></a></div>
<div class="optiones Plan1 detail hardware "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2603.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2603.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2606.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2606.jpg"></a></div>
<div class="optiones Plan2 detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2664.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2664.jpg"></a></div>
<div class="optiones Plan2 cabinet-interior detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2665.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2665.jpg"></a></div>
</div> </div>
</div>
And finally, a little css
* { box-sizing: border-box; }
body {
font-family: sans-serif;
}
#header {
background-color: #00A8A5;
height: 115px;
width: 100%;
}
.logo-img {
margin: 10px;
float: left;
max-width: 350px;
}
h1 {
margin: 0;
padding: 0;
}
/* ---- button ---- */
.filters {
position: relative;
top: 20px;
left: 30px;
}
.button {
display: inline-block;
padding: 0.5em .8em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #f7e7ba;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #fdbe10;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: none;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.grid {
background: lightgray;
max-width: 1920px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 5px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* options */
.optiones {
margin: 5px;
float: left;
}
.optiones img {
display: block;
max-width: 100%;
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite.png);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading.gif) center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url(http://benslocum.com/pasadera-options/fancybox/source/blank.gif); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: visible !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_overlay.png);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite#2x.png);
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading#2x.gif);
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
In case it helps anyone else, when I was just trying to get Fancybox to respect ANY filtering at all, I found these. None of them worked "as is" but when I took a piece of it
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
And put it in the code that was already doing stuff with filters, it worked to the extent that I explained above.
Now for the things that didn't work for me, but put me on the right track
$('filters a').click(function(event){
event.preventDefault()
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
Neither did this
$('#filters a').on("click", function(){
var selector = $(this).attr('data-option-value');
$('#container').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox-thumbs").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox-thumbs").attr("data-fancybox-group", selector);
}
});
return false;
});
Here's one more that I found and tried to customize... it didn't work for me either.
// filter buttons
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$('#isotopegallery').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
return false;
});
Anyone have an idea on how to make this work with my setup?

How can I trigger the width style of a class to another?

I have these 2 objects in my HTML:
//1st object
<span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span>
//2nd object
<div id="waveform">
<wave style="display: block; position: relative; user-select: none; height: 50px; overflow-x: auto; overflow-y: hidden;">
<canvas></canvas>
<wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right: 1px solid rgb(255, 255, 255);"><canvas width="350" height="50" style="width: 350px;"></canvas></wave>
</wave>
</div>
Is it possible using Javascript/jQuery connect the percentage of the "left" css attribute of the ui-slider-handle class to the width of the inner wave and triggering all the time the percentage (of the 1st object) change?
My 1st try
$(document).ready(function(){
var playlist = [{
title:"Hidden",
artist:"Miaow",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
poster: "https://i.imgur.com/sCbrzQa.png"
},{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "https://i.imgur.com/lXvsuBu.png"
},{
title:"Bubble",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
poster: "https://i.imgur.com/klJKSVZ.jpg"
}];
var cssSelector = {
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: ".music-player"
};
var options = {
swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
supplied: "ogv, m4v, oga, mp3",
volumechange: function(event) {
$( ".volume-level" ).slider("value", event.jPlayer.options.volume);
},
timeupdate: function(event) {
$( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
}
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
// Create the volume slider control
$( ".volume-level" ).slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
$(cssSelector.jPlayer).jPlayer("option", "muted", false);
$(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
}
});
// Create the progress slider control
$( ".progress" ).slider({
animate: "fast",
max: 100,
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = PlayerData.status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
$( ".progress" ).slider("value", 0);
}, 0);
}
}
});
$( ".ui-slider-range" ).slider({
change: function( event, ui ) {
$('wave').css('width', ui.value)
}
});
});
*, *:before, *:after {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
background: #eee;
font-family: "Open Sans", sans-serif;
}
.music-player {
position: relative;
width: 350px;
height: 370px;
margin: 50px auto;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
border-radius: 10px;
background: #222;
overflow: hidden;
z-index: 0;
}
.music-player img {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: -1;
display: block;
width: 100% !important;
height: 100% !important;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.music-player .info {
width: 100%;
height: 100px;
background: #222;
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: relative;
}
.music-player .info .jp-playlist li {
display: none;
}
.music-player .info .jp-playlist li a {
font-size: 30px;
font-weight: 300;
text-decoration: none;
color: #fff;
color: rgba(225, 225, 225, 0.4);
}
.music-player .info .jp-playlist li a span {
font-size: 14px;
display: block;
margin-top: 10px;
}
.music-player .info .jp-playlist li.jp-playlist-current {
display: block;
}
.music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove {
display: none;
}
.music-player .info .left, .music-player .info .right {
width: 25px;
position: absolute;
top: 30px;
left: 30px;
}
.music-player .info .right {
left: auto;
right: 30px;
}
.music-player .info [class^="icon-"] {
margin: 0 0 10px;
}
.music-player .info .center {
padding: 20px 0 0;
}
.music-player .progress, .music-player .volume-level {
width: 100%;
height: 5px;
display: block;
background: #ccc;
position: absolute;
bottom: 0px;
cursor: pointer;
border: none;
}
.music-player .progress .ui-slider-range, .music-player .volume-level .ui-slider-range {
display: block;
background: #ed553b;
height: 5px;
border-radius: 0;
}
.music-player .progress .ui-slider-handle, .music-player .volume-level .ui-slider-handle {
position: absolute;
top: -8px;
width: 8px;
height: 22px;
background: url("//i.imgur.com/tsqwz1N.png") no-repeat center;
border: none;
outline: none;
margin: 0 0 0 -3px;
cursor: move;
}
.music-player .controls {
text-align: center;
width: 100%;
height: 190px;
background: #982e4b;
background: rgba(152, 46, 75, 0.6);
}
.music-player .controls .current {
font-size: 48px;
color: #fff;
color: rgba(225, 225, 225, 0.4);
padding: 15px 0 20px;
}
.music-player .controls .play-controls a {
display: inline-block;
width: 35px;
height: 40px;
margin: 0 30px;
}
.music-player .controls .volume-level {
position: relative;
bottom: auto;
width: 200px;
height: 2px;
margin: 30px auto 0;
background: rgba(225, 225, 225, 0.3);
}
.music-player .controls .volume-level .ui-slider-range {
height: 2px;
}
.music-player .controls .volume-level .ui-slider-handle {
top: -8px;
margin-left: -9px;
width: 22px;
height: 22px;
background-image: url("http://image.flaticon.com/icons/svg/106/106874.svg");
}
.music-player .controls .volume-level .icon-volume-up, .music-player .controls .volume-level .icon-volume-down {
position: absolute;
right: -34px;
top: -8px;
width: 22px;
}
.music-player .controls .volume-level .icon-volume-down {
right: auto;
left: -27px;
}
[class^="icon-"] {
width: 18px;
height: 18px;
background: url("//i.imgur.com/E09T8tf.png") no-repeat center;
display: block;
}
.icon-shuffle {
background-image: url("http://image.flaticon.com/icons/svg/148/148739.svg");
}
.icon-heart {
background-image: url("http://image.flaticon.com/icons/svg/126/126499.svg");
}
.icon-repeat {
background-image: url("http://image.flaticon.com/icons/svg/137/137485.svg");
}
.icon-share {
background-image: url("http://image.flaticon.com/icons/svg/189/189676.svg");
}
.icon-previous {
background-image: url("http://image.flaticon.com/icons/svg/137/137518.svg");
}
.icon-play {
background-image: url("http://image.flaticon.com/icons/svg/148/148744.svg");
}
.icon-pause {
background-image: url("http://image.flaticon.com/icons/svg/189/189639.svg");
}
.icon-next {
background-image: url("http://image.flaticon.com/icons/svg/137/137517.svg");
}
.icon-volume-up {
background-image: url("http://image.flaticon.com/icons/svg/149/149139.svg");
}
.icon-volume-down {
background-image: url("http://image.flaticon.com/icons/svg/109/109699.svg");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
</head>
<div class="music-player">
<div style="background-image: url(https://image.freepik.com/free-vector/welcome-summer-badge-on-blurry-background_23-2147511412.jpg);" class="album"></div>
<div class="info">
<div class="left">
</div>
<div class="center">
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="right">
</div>
<div class="progress"></div>
</div>
<div class="demo">
<div id="waveform">
</div>
<script>
var ctx = document.createElement('canvas').getContext('2d');
var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: linGrad,
progressColor: 'hsla(200, 100%, 30%, 0.5)',
cursorColor: '#fff',
normalize: true,
backend: 'MediaElement',
height:50,
barWidth: 3
});
//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
//Draw peaks
wavesurfer.drawBuffer();
</script>
</div>
<div class="controls">
<div class="current jp-current-time">00:00</div>
<div class="play-controls">
</div>
<div class="volume-level">
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>
UPDATE
The code above creates 2 different slider selector, also the slider affect the width of the wave object. Instead of I need something like this:

I am assuming you're using the UI Slider from jQuery. Once you initialise it, you can use the change event as follows:
$( ".ui-slider-handle" ).slider({
change: function( event, ui ) {
$('wave').first().next().css('width', ui.value)
}
});
Edit: I just realised you wanted the second wave so I added .next()

What you are looking for is MutationObserver(). It allows you to register any change in element's attribute and act on it.
Be sure to check browser support, as it is very likely that it does not include what you actually need.

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.