So I have recently been playing around with styling the html range slider.
I came across a pen on CodePen that has some really great designs.
This is the source code from one.
HTML:
<input type="range" data-idx="1">
CSS:
html {
background: #393939;
}
input[type='range'] {
display: block;
margin: 2.5em auto;
border: solid .5em transparent;
padding: 0;
width: 15.5em;
height: 1em;
border-radius: .25em;
background: transparent;
font-size: 1em;
cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
.js input[type='range']::-webkit-slider-runnable-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
.js input[type='range']::-moz-range-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-ms-track {
border: none;
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
color: transparent;
}
input[type='range']::-ms-fill-lower {
border-radius: 0.25em;
background: #e44e4f;
}
input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track {
background-size: 50% 100%;
}
input[type='range']:nth-of-type(1)::-moz-range-track {
background-size: 50% 100%;
}
input[type='range']:nth-of-type(1)::-webkit-slider-thumb {
margin-top: -0.125em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']:nth-of-type(1)::-moz-range-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']:nth-of-type(1)::-ms-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']:nth-of-type(1)::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
box-shadow: 0 0 0.25em #e44e4f;
}
Javascript:
var s = document.createElement('style'),
r = document.querySelectorAll('input[type=range]'),
prefs = ['webkit-slider-runnable', 'moz-range'],
styles = [],
l = prefs.length
n = r.length;
document.body.appendChild(s);
var getTrackStyleStr = function(el) {
var str = '',
j = el.dataset.idx,
min = el.min || 0,
perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,
val = perc + '% 100%';
for(var i = 0; i < l; i++) {
str += '.js input[type=range]:nth-of-type(' + j + ')::-' + prefs[i] + '-track{background-size:' + val + '}';
}
return str;
};
var getTipStyleStr = function(el) {
var str = '.js input[type=range]:nth-of-type(' + el.dataset.idx + ') /deep/ #thumb:after{content:"' + el.value + '%"}';
return str;
};
for(var i = 0; i < n; i++) {
styles.push('');
r[i].addEventListener('input', function() {
styles[this.dataset.idx] = getTrackStyleStr(this);
if(this.classList.contains('tip')) {
styles[this.dataset.idx] += getTipStyleStr(this);
}
s.textContent = styles.join('');
}, false);
}
This works great for one range element but if I try adding more range elements on the same page, and change the data attribute to data-idx="2" it will not work, the first range will control them all.
How can I adjust the code to make each range work independently?
Here is a JSFiddle of the code I'm using, for some reason the javascript isn't working on there at all, but it's works fine on codepen? Hmm...
Here is the original Codepen
SOLUTION
var r = document.querySelectorAll('input[type=range]'),
prefs = ['webkit-slider-runnable', 'moz-range'],
styles = [],
l = prefs.length,
n = r.length;
var getTrackStyleStr = function(el, j) {
var str = '',
min = el.min || 0,
perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,
val = perc + '% 100%';
el.previousElementSibling.textContent = el.value;
for(var i = 0; i < l; i++) {
str += "input[type=range][data-rangeId='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} ';
}
return str;
};
var setDragStyleStr = function(evt) {
var trackStyle = getTrackStyleStr(evt.target, this);
styles[this].textContent = trackStyle;
};
for(var i = 0; i < n; i++) {
var s = document.createElement('style');
document.body.appendChild(s);
styles.push(s);
r[i].setAttribute('data-rangeId', i);
r[i].addEventListener('input', setDragStyleStr.bind(i));
}
html {
background: #393939;
}
div {
margin: 2.5em auto;
}
input[type='range'] {
display: block;
margin: 0.2em auto;
border: solid .5em transparent;
padding: 0;
width: 15.5em;
height: 1em;
border-radius: .25em;
background: transparent;
font-size: 1em;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-webkit-slider-runnable-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-moz-range-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-ms-track {
border: none;
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
color: transparent;
}
input[type='range']::-ms-fill-lower {
border-radius: 0.25em;
background: #e44e4f;
}
input[type='range']::-webkit-slider-runnable-track {
background-size: 0% 100%;
}
input[type='range']::-moz-range-track {
background-size: 0% 100%;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.125em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-moz-range-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
box-shadow: 0 0 0.25em #e44e4f;
}
output[for='range'] {
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
font-size: 13px;
color: white;
display: block;
text-align: center;
}
<div>
<output for="range">0</output>
<input type="range" value="0">
</div>
<div>
<output for="range">0</output>
<input type="range" value="0">
</div>
<div>
<output for="range">0</output>
<input type="range" value="0">
</div>
Jquery UI offers some functional sliders that can be used in multiple instances on a page. You don't have to write or modify as much code to use them as above. Unless you are trying to avoid jquery, this may be a better option for you.
Here is a link to the multiple sliders demo.
The approach used for multiple sliders relies of course on jquery, but given markup such as:
<div id="eq">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
A simple .each statement handles setting them all up.
$( "#eq > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
Edit: As per comments below, if you want to add tool-tips / hints, you have to roll your own. Here's a brief example from some code I wrote last year. It has some specific behaviors that fit the needs of my users, but this should give you an idea. The id "hintrow" refers to a table row on a grid that contained my slider. Through experimentation, you can probably find the best place relative to your various sliders to append this. It will get positioned so you only want a dom node to append it to.
function drawExtCues(){
z = 200;
$('#hintrow').append('<div id="hintContainer" style="position:relative"></div>');
for(h in rowobjects){
z++;
$('#hintContainer').append('<div title="' + rowobject[h].property1 + '" class="' + rowobject[h].property2+ ' ui-slider-range hint" style="z-index:' + z +';">' + rowobject[h].property1+ '</div>');
}
$('.hint').mouseover(function(){
hintMouseOver();
});
}
function hintMouseOver(){
$('.hint').addClass('hintInspect',500);
$('.hint').unbind('mouseover');
$('.hint').click(function(){
$J('.hint').removeClass('hintInspect',500);
$J('.hint').mouseover(function(){hintMouseOver();})
});
}
Note the z++. This was used to ensure my tool-tips would stack. Since we made them click to dismiss in our case, this worked well. You don't have to do this, but if you don't use a click to dismiss, you might want to bind a timeout to clear the tool tip for you.
The hintMouseOver function does some house cleaning, like unbinding itself to prevent repeat calls. It is rebound after the click event to dismiss the tool tip is fired. This is just the behavior my client wanted. You could do a lot of things here. The class hintInspect is basically the style rules for how your tool-tip will appear. You can make it look any way you like. I think I just used a simple black outline with grey background.
Related
I am trying to change a menu from a list to a dropdown.
I am using the Mapplic - Custom Interactive Map WordPress Plugin
I found the code for it, but I don't seem to get it to
this.addLevelSwitcher = function() {
if (self.data.levels.length > 1) {
var control = $('<div></div>').addClass('mapplic-level-switcher');
self.data.levels.forEach(function(level, i) {
var button = $('<button></button>').attr('data-level', level.id).text(level.title).prependTo(control).click(function(e) {
e.preventDefault();
self.switchLevel(level.id);
});
if (level.show) button.addClass('mapplic-selected');
});
this.el.append(control);
self.el.on('levelswitched', function(e, target) {
$('button', control).removeClass('mapplic-selected');
$('button[data-level="' + target + '"]', control).addClass('mapplic-selected');
});
}
}
Also here is the css
/* new switcher */
.mapplic-level-switcher {
position: absolute;
right: 0;
top: 0px;
margin: 12px;
}
.mapplic-level-switcher button {
background-color: #f8f8f8;
border-radius: 0;
color: #888;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 600;
line-height: 20px;
padding: 4px 10px;
text-align: center;
user-select: none;
width: 100%;
border: none;
transition: transform 0.2s;
position: relative;
}
.mapplic-level-switcher button:hover { background-color: #f8f8f8; }
.mapplic-level-switcher button:focus { outline: none; }
.mapplic-level-switcher button.mapplic-selected {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
background-color: #fff;
color: #222;
transform: scale(1.15);
z-index: 100;
}
I am trying to make it more responsive on mobile...
Another thing I was thinking was to hide this menu on mobile and add indiviuals buttons in order to trigger the floor plan.
Any ideas on how could I do any of this?
Thanks
I have below javascript written, I would like to add tooltip on a button for every desktop device of different sizes. Can anyone advise how can I mention different media screen in my javascript and how could I test it in my laptop for every media screen I included in style.
<style>
.banner-text>div>.banner-link.link-highlight
{
display: none;
}
.booking-widget-home
{
background-image: url('https://www.goxyz.in/content/dam/goxyz/6e-website/banner/target/05/Banner-Blue-checks.jpg') !important;
}
.banner-title
{
color: white;
}
.banner-description
{
color: white;
}
.offers-container.offers-up
{
cursor: pointer;
}
.banner-link.link-highlight
{
border-radius: 10px;
}
.ntooltip
{
position: absolute;
background: #92dff6;
color: #3e3158;
padding: 2px 0;
border-radius: 10px;
bottom: 42px;
left: 100px;
text-align: center;
font-size: 11px;
width: 130px;
box-shadow: 2px 5px 14px 0 rgba(0, 0, 0, .5);
}
.ntooltip:before
/* triangle decoration */
{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #92dff6;
content: '';
position: absolute;
left: 50%;
top: -10px;
margin-left: -10px;
}
</style>
<script>
(function()
{
'use strict';
var cnt = 6000;
function init()
{
if (typeof jQuery != "undefined")
{
// call to change content
content_change();
}
else
{
cnt = cnt - 500;
if (cnt > 500) setTimeout(init, 500);
}
}
// function to change your content
function content_change()
{
if (jQuery(".booking-widget-home").length > 0)
{
jQuery('.offers-container.offers-up > .offers-wrapper > div >h1 ').text('Kerala Alert!');
jQuery('.offers-container.offers-up > .offers-wrapper > div > p.banner-description ').html("Tooltip test is successfull</br><span><a href='https://www.goggle.com' target='_blank' class='banner-link link-highlight'>Add snacks</a></span>");
$('.banner-description > span').append('<div class="ntooltip">Click Here to Know More</div>');
}
else
{
cnt = cnt - 500;
if (cnt > 500) setTimeout(content_change, 500);
}
}
init();
})()
</script>
I have problem with my algorithm in simple game.
Game Rules:
Match color NAME (choose one on the bottom) with COLOR of TEXT (on the top).
If none of the two bottom names match than click NEXT.
So the problem is that first correct match gives in console "GOOD" but second , third and any after, even if there is correct match in console I have firstly always "WRONG" and just after that I have "GOOD".
This is a picture with the problem described
It seems like the script remember past random numbers and match current result with them, because after few matches the score pointer raise very quickly (ex. 20 points in one time).
I will be happy to hear from you how can I fix this.
Thank you for any help !
Here you have link to codepen:
http://codepen.io/anon/pen/bWGGga
"use strict"
/*Start Container*/
/* var startContainer = document.getElementById("start_container");
var letsPlay = document.getElementById("start_game"); */
/* letsPlay.addEventListener("click", openTheGame); */
function openTheGame(){
setInterval(startGame, 3000);
};
openTheGame();
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var showColor = document.getElementById("show_color");
//SCORE
var score = document.getElementById("score");
var gameContainer = document.getElementById("game_container");
var gameOverContainer = document.getElementById("game_over_container");
/*Array of Colors*/
var arrCol = ["GREEN", "RED", "YELLOW", "BLUE", "ORANGE", "PURPLE"]
//Array from buttons texts to draw Show Color
var arrShowColor = [];
function startGame(){
/*BUTTONS TEXT & COLOR*/
btn1.addEventListener("click", matchColor1);
btn2.addEventListener("click", matchColor2);
btn3.addEventListener("click", matchColor3);
//draw numbers for buttons texts & colors
var randomBtn1Num = Math.floor(Math.random() * 3);
var randomBtn2Num = Math.floor(Math.random() * 3)+3;
var randomBtn3Num = Math.floor(Math.random() * 6);
//Buttons text (next button always "next")
btn1.innerHTML = arrCol[randomBtn1Num];
btn2.innerHTML = arrCol[randomBtn2Num];
//Buttons Color from random_color class
btn1.className = "random_color" + randomBtn2Num;
btn2.className = "random_color" + randomBtn3Num;
btn3.className = "random_color" + randomBtn1Num;
/*SHOW TEXT & COLOR*/
//Array from buttons texts to draw Show Color
arrShowColor[0] = randomBtn1Num;
arrShowColor[1] = randomBtn2Num;
arrShowColor[2] = randomBtn3Num;
console.log(arrShowColor);
//Show color
var randomShowColorNum = Math.floor(Math.random()*3);
var randomShowColor = arrShowColor[randomShowColorNum];
showColor.className = "random_color" + randomShowColor;
console.log(randomShowColor);
//Show text
var randomShowText = Math.floor(Math.random() * 6);
showColor.innerHTML = arrCol[randomShowText];
/*CLICK BUTTON - IF MATCH COLORS*/
function matchColor1(){
if( randomBtn1Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor2(){
if( randomBtn2Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor3(){
if(randomBtn1Num != randomShowColor && randomBtn2Num != randomShowColor){
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
/*Finish startGame*/
};
/*Main Styles*/
body {
background-image: url()
}
h4 {
color: #2626e6;
}
/*Main Container Styles*/
#main_container {
width:100%;
text-align:center;
}
/*Start Container Styles*/
#start_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#start_container button {
}
/*Game Container Styles*/
#game_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
.second_level{
transform: rotateY(180deg);
}
.third_level{
transform: rotateX(180deg);
}
/*Score Container*/
#score_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: -5px;
margin-right: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#score_container #score {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Level Container*/
#time_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#time_container #time {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Random Show Color Style*/
#show_color{
margin-top: 50px;
font-size: 40px;
font-family: sans-serif;
font-weight: 800;
}
/*Random Colors Classes*/
.random_color0{
color: green;
}
.random_color1{
color: red;
}
.random_color2{
color: yellow;
}
.random_color3{
color: blue;
}
.random_color4{
color: orange;
}
.random_color5{
color: purple;
}
/*Buttons Container Styles*/
#game_container #buttons_container {
position: relative;
display: inline-block;
margin:0 auto;
margin-top: 120px;
border-top: 1px solid white;
padding-top: 30px;
}
/*Buttons Style*/
#buttons_container button {
height: 40px;
width: 150px;
font-size: 30px;
font-weight: 800;
border: none;
border-radius: 3px;
background-color: rgb(0, 0, 0);
margin: 3px;
}
#buttons_container button:focus{
outline: 0;
}
#buttons_container button:hover{
cursor: pointer;
}
/*Game Over Container*/
#game_over_container {
display: none;
position: relative;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
<div id="main_container">
<!-- <div id="start_container">
<button id="start_game">PLAY GAME</button>
</div> -->
<div id="score_container">
<h4>SCORE:</h4>
<div id="score">0</div>
</div>
<div id="game_container">
<div id="show_color_container">
<div id="show_color"></div>
</div>
<div id="buttons_container">
<button class="btn_select" id="btn1">ONE</button>
<button class="btn_select" id="btn2">TWO</button>
<button class="btn_select" id="btn3">NEXT</button>
</div>
</div>
<div id="game_over_container">
<h2 id="game_over">GAME OVER</h2>
</div>
</div>
Inside openTheGame() you're using setInterval which calls startGame() every 3 seconds, which in turn creates (adds) new event handlers every 3 seconds, which call your console.logs etc. Replace setInterval with setTimeout:
function openTheGame(){
setTimeout(startGame, 3000);
};
openTheGame();
EDIT: did not thoroughly check your code, but if you need that function called every 3 seconds, then you need to move the setup of click handlers outside that function.
I want to apply different width in different option menu but when page load my js is run and take default 25% width in all page option menu I need 25% width in header file and header include in all file so header first js is run and page option menu take also 25% width so what i do for assign different width in header and also page
he my js and css is given and I try to apply inline css it's not working and also make different class and different js but its also not working because first run header js and it's width 25% so what I do for solve this issue.
This one is my js file:
! function(t) {
var e = t('<div class="stb-select-container"><span class="selected"></span></div>'),
n = t('<ul class="stb-select" style="display:none;"></ul>');
t.fn.stbDropdown = function() {
var i = t(this);
i.hide(), i.each(function(i, a) {
var o = e.clone(),
s = n.clone(),
r = t(a),
c = r.find("option");
r.after(o), r.appendTo(o), s.appendTo(o), c.each(function(e, n) {
var i = t(n),
a = t("<li></li>"),
o = i.prop("attributes");
a.prop("attributes", o), t.each(o, function(t, e) {
a.attr(e.name, e.value)
}), a.append(i.text()), s.append(a)
});
var l, p = r.children("option").filter(function(e, n) {
return t(n).is("[selected]")
});
l = 0 == p.length ? c.first() : p.first(), o.find(".selected").text(l.text()), o.on("click.stb.select", function() {
var e = t(this),
n = t.grep(t(".stb-select-container"), function(n) {
return !e.is(t(n))
});
t(n).find("ul").hide(), e.find("ul").toggle()
}), o.on("click.stb.option", "li", function(e) {
e.stopPropagation();
var n = t(this),
i = n.parents(".stb-select-container"),
a = i.find("span.selected");
a.text(n.text()), n.parents("ul").toggle();
var o = i.find("select");
o.val(n.attr("value")).change(), n.siblings().removeAttr("selected"), n.attr("selected", "selected")
}), r.on("DOMNodeInserted", function(e) {
var n = t(e.target);
if (n.is("option")) {
var i = t("<li></li>"),
a = n.prop("attributes");
i.prop("attributes", a), t.each(a, function(t, e) {
i.attr(e.name, e.value)
}), i.append(n.text()), s.append(i)
}
}), r.on("DOMNodeRemoved", function(e) {
var n = t(e.target);
n.is("option") && s.find("li:contains('" + n.text() + "')").remove()
})
})
}
}(jQuery);
.stb-select-container {
font-family: inherit;
/*border-radius: 4px;*/
width: 25%;
/*width: 100%;*/
display: inline-block;
outline: 0;
box-shadow: none;
border-right: 1px solid #ccc;
/*border: solid thin rgba(0, 0, 0, 0.24);*/
padding: 14px 16px;
/* margin: 4px 8px;*/
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
text-align: left;
cursor: pointer
}
.stb-select-container ul {
list-style-type: none;
margin: 0;
padding: 0
}
.stb-select-container select {
display: none
}
.stb-select-container .stb-select {
position: absolute;
background: white;
left: -1px;
top: 50px;
padding: 8px 16px;
border: solid thin rgba(0, 0, 0, 0.24);
border-top: 0;
z-index: 10;
max-height: 200px;
width: 100%;
overflow-x: auto;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px
}
.stb-select-container span {
opacity: .54
}
.stb-select-container::after {
opacity: .54;
content: "v";
position: absolute;
right: 8px;
-ms-transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
.stb-select-container .stb-select li {
opacity: .7
}
.stb-select-container .stb-select li:first-of-type {
/* opacity: .34*/
}
.stb-select-container .stb-select li+li {
margin-top: 10px
}
.stb-select-container .stb-select li:hover{
color:#3EA9D8;
}
#media screen and (max-width: 768px) {
.stb-select-container {
font-family: inherit;
font-size: 16px;
/*border-radius: 4px;*/
width: 100%;
display: inline-block;
outline: 0;
box-shadow: none;
border: 2px solid #e9e9e9;
/*border: solid thin rgba(0, 0, 0, 0.24);*/
padding: 12px 12px;
/* margin: 4px 8px;*/
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
text-align: left;
cursor: pointer
}
}
this one is my html code
<select name="city" id="city_result" style="height: 50px; width:100%; margin: 0px; padding: 10px; box-shadow: 0px 0px 0px white; border: none;">
<option>Your city</option>
</select>
Am I right in guessing you are using this:
http://www.jqueryscript.net/form/Nice-Clear-Dropdown-List-with-jQuery-and-CSS-stb-dropdown.html
There is no reason why on a page you cannot override the CSS of "width:200px or in your case "width:25%;" with inline CSS or additional styles added.
You need to identify where your problem actually is. First hard code in the container a hardcoded width. Then, if it works, put it into a CSS class and see if it is being applied. Then, if it works, you can choose to implement this in JS, or with additional styling for that page, or in any way you choose really.
There are simply too many ways to achieve what you want, but the method you employ depends entirely on you, your system, your methodology and your project guidelines/objectives.
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>▲</div><div id="down"><p>▼</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.