Develop Reference

How to access a button not originally on page to animate and refresh?

I'm working on this codepen to practice working with APIs and search bar animations.
wikiSearch codepen
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset" onclick="moveReset();"></button>
some of my js
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
How can I access the X button after the search results come in?
On the splash page, the X button works as I want it to - moves right when input is focused and moves back to the left where it is hidden.
My goal is to have this behavior persist, even after the results display, and in addition to refresh to the original splash page.
I've tried adding an active class when it is clicked,delegating to #reset from body, adding an onclick event inline with the html, and using the location reset property, to no avail.
Thanks for any pointers.

You have a z-index management problem. After click on search button the reset button has a z-index value of -1, this means that even you are see the button when you think you click on it you don't.
A way to fix this particular problem could be to remove the z-index attribute in your css file for reset button, also give z-index value to input control like 5 and for the search button like 10 to keep the logic you already have.
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').css("background", "yellow")
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('input').on('focus', function(){
$('.btn-reset').css({
'right': '-22px',
'background-color': 'white'
})
$('.btn-search').css({
'background-color': 'hotpink'
})
})
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
transition: all .3s ease-in-out;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
z-index:5;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
z-index:10;
}
.btn-reset {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset"></button>
</form>
</div>
<br>
<div id="content">
</div>

So, if I'm getting you, you're looking for how to cause certain effects on the reset button when certain events happen? If I'm getting that, then there are really two events: first, any time the text input loses focus (at which point, you'd hide the reset button, I assume), and second, when the reset button itself is clicked.
Looking at the first case, you'd simply have the on('blur', function(){...}) set on the input, just as you have on('focus', function(){...}) happening right now. When the input is blurred, simply re-hide the reset and toggle the color change back on the search button.
In the second case, you're missing a line to actually clear the contents of the input. Presumably, you'd also want to remove the results of any search if you clear the input, but that's not really a given.
Hope this helps, if not please clarify!
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').addClass("body-with-results");
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('#search').on('focus', function(){
$('.btn-reset').show();
$('.btn-search').css({
'background-color': 'hotpink'
})
}).on('blur', function(){
$('.btn-search').css({
'background-color': '#ccc'
});
})
$('#resetBtn').on('click', function(evt){
evt.stopPropagation();
evt.preventDefault();
$(this).hide();
$('#content').empty();
$('#search').val('');
$("body").removeClass("body-with-results");
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
}
.body-with-results {
background: yellow;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
}
#resetBtn {
display: none;
background: white;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
right: -28px;
top: 0px;
width: 30px;
z-index: 5;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
z-index: -1;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button class="btn btn-reset fa fa-times" id="resetBtn"></button>
</form>
</div>
<br>
<div id="content">
</div>
A few changes have been made to the code. Specifically, what's happening is when the form has been submitted and the body's CSS altered, there is a z-index issue cropping up. Here are the changes made:
The body el style is now being changed by adding/removing a 'body-with-results" class. This is purely cosmetic, as I really don't like hard-coding style changes.
The reset button is no longer a pure reset button, it is now simply a styled button that simulates a reset. When you reset a form, that's all you reset. However, in this case, you want to reset the form, hide the reset element, and clear any results from the contents div. So the reset el now does just that.
Styles on the reset button -- rather than sliding in and out (which could still probably be a thing), I simply set the right/top values in the css, and also fixed the z-index thing. Note that I used the ID of the el rather than the class to set the styles. This was done to properly handle the specificity of the styles (IDs are considered more specific than classes, thus ID styles override class styles).
I removed the code to hide the reset button on blur -- the issue with that becomes, when you try to click on the reset button, the first event is the input blur, which promptly hides the element you just thought you clicked on.
Still trying to track down the wierd suggested results remnant code, but this is a starting point.

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?

jQuery: divs on top of each other while this is not needed

Currently, I am working on a project to generate a dynamic card page. This page is based on the input of a specific json feed (e.g. a user role).
profile.json
{
"Messages": "card1",
"Activities": "card2",
"Agenda": "card3",
"Users": "card4",
"Charts": "card5"
}
Next, I use jQuery and Kendo UI to create cards. First, I need to extract the information from the json feed. As you may notice, every card will be placed inside a div. And every div will be appended to the cards div:
Below is code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../style/font-awesome.css">
<link rel="stylesheet" href="/style/cards.css" />
<script src="../lib/jquery.min.js"></script>
<script src="../lib/custom/effects.min.js"></script>
</head>
<body>
<div id="cards"></div>
<script>
$.getJSON("profile.json", function (data) {
$.each(data, function (key, val) {
var card = "<div id='" + val + "' height='180' width='175'></div>";
$("#cards").append(card);
$('#' + val).load(val + '/index.html');
});
});
</script>
</body>
</html>
Every card does have some simple styling:
One of the card (card7/index.html)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
overflow: hidden;
}
a {
color: #428bca;
text-decoration: none;
}
#card7 {
width: 150px;
height: 150px;
position: relative;
}
.front {
padding: 10px;
text-align: center;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.back {
font-size: smaller;
padding: 10px;
text-align: left;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.front:hover, .back:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
.badge:after {
content: "1";
position: absolute;
background: rgba(255, 0, 0, 0.85);
height: 2rem;
top: 1rem;
right: 2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
.seeBack {
margin-top: -30px;
margin-right: -10px;
float: right;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent;
}
.seeBack:hover {
border-color: transparent transparent #428bca transparent;
transition: 0.5s;
}
.seeFront {
margin-top: 10px;
margin-left: -10px;
float: left;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent;
}
.seeFront:hover {
border-color: transparent transparent transparent #428bca;
}
</style>
</head>
<body>
<div id="card7">
<div class="front">
<i class="fa fa-undo fa-5x"></i>
<h4><b>Tijdlijn</b></h4>
<div class="seeBack"></div>
</div>
<div class="back">
<p>Situatie vorige week</p>
<p>Situatie vorige maand</p>
<p>Situatie vorig jaar</p>
<div class="seeFront"></div>
</div>
</div>
<script>
$(document).ready(function () {
kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play();
var card = kendo.fx($("#card7")),
flip = card.flip("horizontal", $(".front"), $(".back"));
flip.duration(100);
$(".seeBack").click(function () {
flip.stop().play();
});
$(".seeFront").click(function () {
flip.stop().reverse();
});
});
</script>
</body>
</html>
As you may expect, the program itself does not work properly. All cards will be displayed on top of each other in index.html, although they are placed in various div. I don't know what the problem is and I cannot fix this. Hopefully one can help me.
All cards are placed on top of each other.

Use static or relative position for .front and .back divs
Read that article about positioning for more info http://www.w3schools.com/cssref/pr_class_position.asp

Placing <a> links on top of onclick div

I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.

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.