I am using Watupro plugin for simple test. In result window there are variables that display numeric test results: %%CATEGORY-POINTS-4%%, %%CATEGORY-POINTS-5%% etc.
I am using Progress Bar plugin, to display progress bar with results via shortcode.
[wppb progress=%%CATEGORY-POINTS-4%%/130 option=green] gives me nice progress bar, based on student's results in each category.
However I want to display different colors of progress bar, depending on result. In order to achieve that, I want to change value of shortcode, based on numeric values.
I came up with this code so far:
HTML:
<div class="bar" data-score="%%CATEGORY-POINTS-4%%">[wppb progress=%%CATEGORY-POINTS-4%%/130 option=green]</div>
<div class="bar" data-score="%%CATEGORY-POINTS-5%%">[wppb progress=%%CATEGORY-POINTS-5%%/130 option=green]</div>
<script type="text/javascript">
results();
</script>
JavaScript:
function results() {
var bar = document.getElementsByClass('bar');
var score = bar.getAttribute('data-score');
alert (score);
if (score < 47) {
// ???
}
if (score > 46 && 4_score < 71) {
// ???
}
if (score > 70) {
// ???
}
I guess I need to come up with code that changes shortcode attribute option to different color for each div respectively.
Any ideas?
Since you are using WP, you can try jQuery like this:
let score = jQuery('.bar').data('score'); // get element data-score
if (score > 46 && score < 71) { // your condition
$(".green").toggleClass('green yellow'); // changes class green to yellow
}
Then create new CSS class yellow:
div.wppb-progress > span.yellow {
background: linear-gradient(to bottom, #ffe893 0%,#ffd644 33%,#f5c001 62%,#bd9400 100%);
}
Ok. I got it solved.
I added loop, so, Javascript goes through all divs.
Here's the code:
<div id="watupro_quiz" class="quiz-area single-page-quiz">
<div id="startOutput"> </div>
<!--<script type="text/javascript" src="https://psy-help.ee/wp-content/scripts/test_results.js"></script>-->
<div class="bar" data-score="71" data-less="47" data-more="70">
<div class="wppb-wrapper ">
<div class="wppb-progress fixed"><span class="yellow" style="width: 39.230769230769%;"><span></span></span></div>
</div>
</div>
<div class="bar" data-score="62">
<div class="wppb-wrapper ">
<div class="wppb-progress fixed"><span class="yellow" style="width: 47.692307692308%;"><span></span></span></div>
</div>
</div>
<!--<script type="text/javascript">
results();-->
</script>
</div>
div.wppb-wrapper {
clear: both;
}
div.wppb-progress {
height: 25px;
width: 400px;
background: #555;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
position: relative;
}
div.wppb-progress > span.green {
background: #83c783;
background: -moz-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c783), color-stop(33%,#52b152), color-stop(62%,#008a00), color-stop(100%,#005700));
background: -webkit-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
background: -o-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
background: -ms-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
background: linear-gradient(to bottom, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
}
div.wppb-progress > span {
display: block;
height: 25px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
background: #5a84c4;
background: -moz-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a84c4), color-stop(100%,#1a2275));
background: -webkit-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
background: -o-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
background: -ms-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
background: linear-gradient(top, #5a84c4 0%,#1a2275 100%);
-webkit-box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
-moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
overflow: hidden;
position: relative;
}
let barElement = document.getElementsByClassName("bar");
for (let i = 0; i < barElement.length; i++) {
let wrapper = barElement[i].firstElementChild;
let bar = wrapper.firstElementChild;
let span = bar.firstElementChild;
let score = barElement[i].getAttribute("data-score");
let low = barElement[i].getAttribute("data-less");
let high = barElement[i].getAttribute("data-more");
if (score < low) {
span.classList.remove("yellow");
span.classList.add("green");
} if (score > high) {
span.classList.remove("yellow");
span.classList.add("red");
}
}
Working example here: https://codepen.io/nick-gregory-the-looper/pen/wvympmg
Related
Okay, starting over as I'm new at all of this and, as Sebastian points out, the problem is likely elsewhere.
This is a combination lock which was created by Derek Hill. I've reformatted it by cutting its size in half. In doing so, the size of the dial after spinning doesn't work out right -- when you spin the numbers, you can see that the height of the numbers begins dropping and is no longer vertically centered. It creeps down by about 0.5px each time.
I first notice the problem at the variable "temporTopEarlier". I cannot understand why the "top" for the dial is 0.5px more than it should be (-157 instead of -157.5). I think this is causing my problems. I expected a truncation of decimals, but I don't see where that would happen.
I'm new at this, so apologies for the many poor elements to the code, format, and question. Thanks!
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
#lock-plate{
padding: 15px 0;
border: 0.5px solid #cfd3d6;
background: #ccc;
text-align: center;
width: 243px;
background: -webkit-linear-gradient(top, #eee 0%,#949ba0 100%);
background: linear-gradient(to bottom, #eee 0%,#949ba0 100%);
border-radius: 2px;
margin: 10px auto;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
position: absolute;
top: 6%;
left: 43%;
transform: translate(-50%, -50%);
}
#lock-wrapper{
width: 220px;
padding: 0 10px 0 4px;
border-radius: 3.5px;
height: 60px;
border: .5px solid rgba(255, 255, 255, 0.6);
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
background: -webkit-linear-gradient(top, #c4c4c4 0%,#676767 100%);
background: linear-gradient(to bottom, #c4c4c4 0%,#676767 100%);
overflow: hidden;
margin: 0 auto;
}
.lock-dial{
height: 60px;
width: 34px;
margin-left: 5.5px;
background: -webkit-linear-gradient(top, #8c9093 0%,#b6babd 9%,#ccd2d6 18%,#ffffff 55%,#ccd2d6 82%,#b6babd 91%,#8c9093 100%);
background: linear-gradient(to bottom, #8c9093 0%,#b6babd 9%,#ccd2d6 18%,#ffffff 55%,#ccd2d6 82%,#b6babd 91%,#8c9093 100%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
float: left;
position: relative;
cursor: move;
}
#lock-wrapper .lock-dial ul{
margin: 0;
padding: 0;
text-align: center;
list-style: none;
font-size: 26.5px;
line-height: 35px;
color: #414f6b;
text-shadow: 0 -1px 0 #212c42;
transition: box-shadow .45s linear, color .25s linear;
-webkit-transition: box-shadow .45s linear, color .25s linear;
}
</style>
</head>
<body style="background-color: #012443">
<div id="lock-plate">
<span></span><span></span><span></span><span></span>
<div id="lock-wrapper">
<!-- <div class="welcome-message">WELCOME!</div> -->
<div class="lock-dial" id="dial-one"><ul data-combo-num="0"><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script>
$(function(){
var comboArray = [0, 0, 0, 0, 0];
var combination = [4, 3, 9, 2, 0];
var gridIncrement = $( ".lock-dial ul" ).css('line-height').replace('px', '')/2; // this is correct, 17.5
var numNums = $( ".lock-dial:eq(0) ul li" ).length; // 10 numbers
var halfHeight = gridIncrement*numNums; // this is correct, 175
var initTop = -(halfHeight-gridIncrement); //this is correct, -157.5
$( ".lock-dial ul" ).css('top', initTop); // this is correct -157.5
$( ".lock-dial ul" ).draggable({
grid: [ 0, gridIncrement ],
axis: 'y',
drag: function(){
var dragDir = $(this).css('top').replace('px', '') < initTop ? "up" : "down";
if(dragDir == "up"){
var curNum = parseFloat($(this).find('li:last-child').text()) + 1;
if(curNum < 10){
$(this).append('<li>'+curNum+'</li>');
}else{
$(this).append('<li>0</li>');
};
}else{
var curNum = parseFloat($(this).find('li:first-child').text()) - 1;
var thisTop = parseFloat($(this).css('margin-top')); //seems right, starts at 0 and goes down by 35s
$(this).css({
marginTop: thisTop-(gridIncrement*2)
});
if(curNum > -1){
$(this).prepend('<li>'+curNum+'</li>');
}else{
$(this).prepend('<li>9</li>');
};
};
var temporTopEarlier = parseFloat($(this).css('top')); // this is wrong -157, should be -157.5
console.log("tempor top earlier " + temporTopEarlier);
},
stop: function(){
//MATHS
var halfHeight = 175;
var initTop = -157.5;
var negOrPos = $(this).css('margin-top').replace('px', '') > 0 ? 1 : -1;
var tempor_top = parseFloat($(this).css('top')); // this is wrong -174.5, should be -175
console.log("tempor_top " + tempor_top);
console.log(this);
var thisTopTotal = parseFloat($(this).css('top')) + Math.abs(initTop); // this first part is wrong, -17 instead of -17.5
var marginMinified = parseFloat(Math.abs($(this).css('margin-top').replace('px', ''))) - thisTopTotal;
var numIncs = Math.floor(marginMinified/(halfHeight*2));
var totalDif = numIncs*(halfHeight*2);
var topTen = (marginMinified - totalDif)*negOrPos;
var activeIndex = Math.abs(topTen/(gridIncrement*2)) + (halfHeight/(gridIncrement*2));
console.log("halfHeight " + halfHeight);
console.log("initTop " + initTop);
console.log("thisTopTotal " + thisTopTotal);
console.log("marginMinified " + marginMinified);
console.log("numIncs " + numIncs);
console.log("topTen " + topTen);
console.log("totalDif " + totalDif);
console.log("activeIndex " + activeIndex); // this should be a number in 0.5 increments and it's not
$(this).attr("data-combo-num", $(this).find('li').eq(activeIndex).text()).css({
top: -157.5,
marginTop: topTen
}).find('li').slice(20).remove();
for(var i=0; i<$( ".lock-dial ul" ).length; i++){
comboArray[i] = $( ".lock-dial ul:eq("+i+")" ).attr("data-combo-num");
}
}
});
})
</script>
I have this sticky card and just need it to stay on hold in a certain position vertically when scrolling past a certain point. All i can do right now is just change it's position to absolute and it will disappear from the current area when scrolling down.
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if ($(window).width() > 991) {
if (distanceFromTop < 2350) {
$('.sticky-card').css({ position: 'fixed' });
}
else {
$('.sticky-card').css({ position: 'absolute' });
}
}
else {
$('.sticky-card').css({ position: 'relative' });
}
});
.sticky-card {
position: fixed;
width: 400px;
max-width: 400px;
z-index: 1000;
top:15%;
height:735px;
background: rgb(149, 202, 228);
background: -moz-linear-gradient(162deg, rgba(149,202,228,1) 0%, rgba(0,141,210,1) 52%, rgba(2,100,148,1) 100%);
background: -webkit-linear-gradient(162deg, rgba(149,202,228,1) 0%, rgba(0,141,210,1) 52%, rgba(2,100,148,1) 100%);
background: linear-gradient(162deg, rgba(149,202,228,1) 0%, rgba(0,141,210,1) 52%, rgba(2,100,148,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#95cae4", endColorstr="#026494", GradientType=1);
color: white;
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.1);
box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-md">
<div class="row">
<div class="col-md-12 col-lg-8">
<div class="container">
<div class="text-left">
Some text on the left
</div>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="sticky-card">
Some content here
</div>
</div>
</div>
</div>
Well I found a way to do this, I don't know if it's the best or not but it's the only
thing i could think of. This will keep the sticky stuck in that position after scrolling past it, once scroll back up it will be fixed and move with scroll again
.sticky-card.bottom{
position: absolute;
top: 1275px;
}
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if ($(window).width() > 1199) {
if (distanceFromTop < 2200) {
$('.sticky-card').addClass('fixed');
$('.sticky-card').removeClass('bottom');
}
else {
$('.sticky-card').removeClass('fixed');
$('.sticky-card').addClass('bottom');
}
}
else {
$('.sticky-card').removeClass('fixed');
}
});
I need to change the gradient using js by changing these percentage value using javascript.
Code:
meter::-webkit-meter-optimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient( 90deg, #f44336 24%,#e6d450 24%,#e6d450 56%,#4CAF50 56%,#4CAF50 100%);
background-size: 100% 100%;
}
<meter value="1"></meter>
With javascript you have to change the value attribute like this and add these variables to your style:
var element = document.getElementsByTagName("meter")[0];
element.setAttribute("value", "100");
element.setAttribute("style", "--error: 10%;--warning: 20%;--ok: 100%;");
Also give your meter tag a min and a max attribute:
<meter value="0" max="100" min="0"></meter>
And add variables in your CSS:
meter {
--error: 24%;
--warning: 56%;
--ok: 100%;
}
meter::-webkit-meter-optimum-value {
background-image: linear-gradient( 90deg, #f44336 var(--error),#e6d450 var(--error),#e6d450 var(--warning),#4CAF50 var(--warning),#4CAF50 var(--ok));
}
So this should do the job:
var element = document.getElementsByTagName("meter")[0];
element.setAttribute("value", "100");
element.setAttribute("style", "--error: 10%;--warning: 20%;--ok: 100%;");
meter {
--error: 24%;
--warning: 56%;
--ok: 100%;
}
meter::-webkit-meter-optimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient( 90deg, #f44336 var(--error),#e6d450 var(--error),#e6d450 var(--warning),#4CAF50 var(--warning),#4CAF50 var(--ok));
background-size: 100% 100%;
}
<meter value="0" max="100" min="0"></meter>
Just using JavaScript(document.styleSheets) you can access the style sheets and then you can find the backgroundImage style and set the desired values as below:
document.styleSheets[0].cssRules[0].style.backgroundImage = "linear-gradient(90deg, rgb(0, 0, 0) 5%, rgb(230, 212, 80) 5%, rgb(230, 212, 80) 15%, rgb(242, 143, 104) 15%, rgb(242, 143, 104) 55%, rgb(207, 130, 191) 55%, rgb(207, 130, 191) 95%, rgb(113, 159, 209) 95%, rgb(113, 159, 209) 100%)"
I am trying to make a JavaScript multiple image uploader that uploads image previews to a slider, but I am having some issues. So far it looks like I was able to get the images to upload into the slider, but the problem seems to happen with my i variable - when I try to increment it, it stays the same, not allowing my next and previous slider arrows from working. If anyone knows how to get this slider working properly, I would appreciate the help.
JS Code:
$('#_uploadImages').click(function() {
$('#_imagesInput').click()
})
$('#_imagesInput').on('change', function() {
handleFileSelect();
});
function handleFileSelect() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files; //FileList object
var output = document.getElementById("frames");
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
if (!file.type.match('image')) continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
console.log(event);
current_i = i;
prev_i = current_i - 1;
next_i = current_i + 1;
//var div = document.createElement("div");
//div.innerHTML = div.innerHTML + "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + picFile.name + "'/>";
//output.insertBefore(div, null);
////output.innerHTML = output.innerHTML + "<img class='thumbnail' style='max-width:500px' src='" + picFile.result + "'" + "title=''/>"; // TODO: Enter Title
output.innerHTML = output.innerHTML + '<li id="slide-' + current_i + '" class="slide">' + "<img src='" + picFile.result + "'" + "title=''/>" + '<nav>' + '<a class="prev" href="#slide-' + prev_i + '">←</a>' + '<a class="next" href="#slide-' + next_i + '">→</a>' + '</nav>' + '<li>'; // TODO: Enter Title
});
//Read the image
picReader.readAsDataURL(file);
}
//output.innerHTML = output.innerHTML + '<li class="quicknav">' + '<ul>' + '<li></li>' + '<li></li>' + '<li></li>' + '</ul>' + '</li>'
} else {
console.log("Your browser does not support File API");
}
}
JSFiddle: http://jsfiddle.net/Hybridx24/yfr57u6w/
The problem with the code is that by the time the load event executes - the for loop has already incremented. So if two images are added - the value of i when the load event is executing is already 2.
One way to solve this is to add the value of i to an array and retrieve it in the event listener one by one:
var arrFilesCount = [];
for (var i = 0; i < files.length; i++) {
arrFilesCount.push(i); //push to array
var file = files[i];
//Only pics
if (!file.type.match('image')) continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
current_i = arrFilesCount.shift(); // get from array instead of using i
prev_i = current_i - 1;
next_i = current_i + 1;
...
...
Corresponding jsFiddle here
Now, this array can also be used for determining the first/last element and thereby using this to go from last to first element. Because we cannot be sure when the event listener will execute (say if there are 100 images the first event listener may execute when the count of loop has reached 5 or 10), so I've used two loops instead of one. The first loop just to populate the array.
var arrFilesCount = [];
for (var i = 0; i < files.length; i++) {
arrFilesCount.push(i);
}
Lets use this to find the first and last elements
current_i = arrFilesCount.shift();
if(current_i === 0){
prev_i = files.length - 1; //This is for the first element. The previous slide will be the last image. (i=length-1)
}
else{
prev_i = current_i - 1;
}
if(arrFilesCount.length === 0){
next_i = 0; //This is for the last element. The next slide will be the first image (i=0)
}
else{
next_i = current_i + 1;
}
See this jsFiddle.
Finally, there can be scenarios where the user first adds a couple of images then clicks on upload button again and adds a couple of more images. In this case we need to correct the existing href. The elements which we need to correct are the next of last and prev of first. This can be done using:
var start = $(output).find('li').length;
var end = start+ files.length;
if(start !== 0){
$(output).find('li > nav > a.prev').first().attr('href','#slide-' + (end-1));
$(output).find('li > nav > a.next').last().attr('href','#slide-'+start);
}
So the final jsFiddle will be something like this.
Substituted .append() for .innerHTML ; created variable idx to increment .slide li elements ids ; added delegated click event to nav a elements ; added .bind() with this set to picReader , i passed as parameter to picReader onload event ; added file.name to title attribute of img element ; added "dot" navigation with thumbanail of images beneath #frames ; title to arrow navigation
var idx = -1, re = /(.*)(?=\.)/;
$('#_uploadImages').click(function() {
$('#_imagesInput').click();
});
$('#_imagesInput').on('change', function(event) {
handleFileSelect(event);
});
$(document).on("click", ".slider .slide nav a, .nav a", function(e) {
e.preventDefault();
$(".slide").hide()
.filter(":has(img[title^="+e.target.title.match(re)[0]+"])").show();
});
function handleFileSelect(event) {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files; //FileList object
var output = document.getElementById("frames");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
picReader.onload = function(index, event) {
++idx;
var picFile = event.target;
var slides = $(".slider li[id^=slide]");
// TODO: Enter Title
$(output)
.append('<li id="slide-'
+ idx
+ '" class="slide">'
+ "<img src='"
+ picFile.result
// set `title`
+ "'title="
//`index` : `i`
+ files[index].name
+ "/>"
+ '<nav>'
+ '<a class="prev">←</a>'
+ '<a class="next">→</a>'
+ '</nav>'
+ '</li>');
// add title to `nav a` elements
if (file.name === files[files.length - 1].name) {
$(".nav").empty();
$("nav a").each(function(i, el) {
if ($(el).closest("[id^=slide]").prev("[id^=slide]").length
&& $(el).is("nav a:nth-of-type(1)")) {
$(el).attr("title",
$(el).closest("[id^=slide]")
.prev("[id^=slide]").find("img").attr("title")
)
}
if ($(el).closest("[id^=slide]").next("[id^=slide]").length
&& $(el).is("nav a:nth-of-type(2)")) {
$(el).attr("title",
$(el).closest("[id^=slide]")
.next("[id^=slide]").find("img").attr("title")
)
}
if ($(el).is(".slider [id^=slide]:first a:first")) {
$(el).attr("title",
$("[id^=slide]:last").find("img").attr("title")
)
}
if ($(el).is(".slider [id^=slide]:last a:last")) {
$(el).attr("title",
$("[id^=slide]:first").find("img").attr("title")
)
};
});
$(".slider img").each(function(i, el) {
$(".nav").append(
$("nav a[title^="
+$(el).attr("title").match(re)[0]
+"]:first")
.clone().html(el.outerHTML)
)
})
}
}.bind(picReader, i);
//Read the image
picReader.readAsDataURL(file);
};
} else {
console.log("Your browser does not support File API");
}
}
* {
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
body {
padding: 30px;
}
/* Slider */
.slider {
height: 250px;
left: 50%;
margin: -125px -225px;
position: absolute;
top: 48%;
width: 450px;
/*box-shadow*/
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.slider .frames {
height: 250px;
position: relative;
list-style-type: none;
}
.slider .frames .slide {
height: 250px;
list-style: none;
position: absolute;
width: 450px;
}
.slider .slide:target {
z-index: 100
}
.slider .frames .slide img {
height: 250px;
width: 450px;
}
.slider .frames .slide nav a {
background: hsla(0, 0%, 0%, .75);
color: #fff;
font-size: 16px;
line-height: 50px;
margin-top: -25px;
opacity: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 50%;
width: 50px;
visibility: hidden;
z-index: 10;
}
.slider:hover .frames .slide nav a {
opacity: 1;
visibility: visible;
}
.slider .slide nav a:hover {
cursor: pointer;
}
.slider .frames .slide nav .prev {
/*border-radius*/
-webkit-border-radius: 0 25px 25px 0;
-moz-border-radius: 0 25px 25px 0;
border-radius: 0 25px 25px 0;
left: 0;
}
.slider .frames .slide nav .next {
/*border-radius*/
-webkit-border-radius: 25px 0 0 25px;
-moz-border-radius: 25px 0 0 25px;
border-radius: 25px 0 0 25px;
right: 0;
}
.slider .frames .slide nav a:hover {
background: #000
}
.slider .quicknav {
bottom: 0;
font-size: 0;
opacity: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 100;
}
.slider:hover .quicknav {
opacity: .9
}
.slider .quicknav li {
display: inline-block
}
.slider .quicknav a {
background: hsla(0, 0%, 100%, .9);
border: 1px solid hsla(0, 0%, 0%, .9);
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display: block;
height: 10px;
margin: 10px 5px;
text-decoration: none;
width: 10px;
}
.slider .quicknav a:hover {
background: hsla(0, 0%, 50%, .9)
}
.nav {
width:100%;
text-align:center;
}
.nav a {
display:inline-block;
background:transparent;
border-radius:50%;
border:4px solid transparent;
width:24px;
height:24px;
margin:4px;
}
.nav a img {
width:22px;
height:22px;
border-radius:50%;
}
.slider #one:target ~ .quicknav a[href="#one"],
.slider #two:target ~ .quicknav a[href="#two"],
.slider #three:target ~ .quicknav a[href="#three"],
.slider #four:target ~ .quicknav a[href="#four"],
.slider #five:target ~ .quicknav a[href="#five"] {
background: hsla(0, 0%, 0%, .9);
border-color: hsla(0, 0%, 100%, .9);
background: rgb(244, 246, 245);
/*linear-gradient*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(rgba(244, 246, 245, 1), 0.01), color-stop(rgba(203, 219, 219, 1), 1), color-stop(rgba(216, 216, 216, 1), 1));
background: -webkit-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -moz-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(244, 246, 245, 1)), color-stop(100%, rgba(203, 219, 219, 1)), color-stop(100%, rgba(216, 216, 216, 1)));
background: -webkit-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -moz-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
background: linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f4f6f5', endColorstr='#d8d8d8', GradientType=0);
/*box-shadow*/
-webkit-box-shadow: inset 0 0 3px #000, 0 0 2px rgba(0, 0, 0, .5), 0 2px 3px #666;
-moz-box-shadow: inset 0 0 3px #000, 0 0 2px rgba(0, 0, 0, .5), 0 2px 3px #666;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="_uploadImages" class="btn btn-primary">Upload Images</button>
<form id="_imagesForm" action="" method="post">
<input id="_imagesInput" accept="image/*" type="file" style="display:none" multiple>
</form>
<div id="_displayImages">
<div class="slider">
<ul id="frames" class="frames">
</ul>
<div class="nav"></div>
</div>
</div>
jsfiddle http://jsfiddle.net/yfr57u6w/24/
I'm currently styling HTML5 input type range using below code:
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 100%;
height: 8px;
padding: 0 20px;
background: #024069;
border-radius: 2px;
margin-top: 25px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}
This is all good. But now I'm trying to have two different colours on the actual slider so left of the thumb is blue and right of the thumb is black.
I tried :before but it didn't work. How can we achieve this?
Here's some JavaScript that updates the colour of the bar when you change the value.
input.oninput = function () {
var value = (input.value - input.min)/(input.max - input.min);
input.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', blue), ',
'color-stop(' + value + ', red)',
')'
].join('');
};
onload = function() {
var inputs = document.querySelectorAll('input[type=range]');
for (var i = 0; i < inputs.length; i++) {
input = inputs[i]
input.oninput = function () {
var value = (input.value - input.min)/(input.max - input.min);
input.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', blue), ',
'color-stop(' + value + ', red)',
')'
].join('');
};
}
};
body {
margin: 20px;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 200px;
height: 8px;
padding: 0;
border-left: 20px solid blue;
border-right: 20px solid red;
background: #024069;
border-radius: 2px;
margin-top: 25px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.2, blue),
color-stop(0.2, red)
);
outline: none;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}
<!doctype html>
<html>
<body>
<input type="range" min="1" max="100" step="1" value="20">
</body>
</html>
Thanks to #adamvert for suggesting to use oninput instead of onchange.
You'll need JS to do this the way you need. I assume you need the bar-coloring to work correctly even when you slide the thing. i.e. blue to the left and black to the right of the thumb.
Check this demo: http://fiddle.jshell.net/tv3bx/2/
Code:
function colorTheBar(slider) {
var left = $('.left'), right = $('.right');
console.log(slider.val());
if(left.length == 0) {
left = $('<div>').addClass('left').appendTo('body');
right = $('<div>').addClass('right').appendTo('body');
}
left.css({
left: (slider.offset().left + 20) + 'px',
top: slider.offset().top + 'px',
width: (slider.width() * (parseInt(slider.val())/100)) + 'px',
height: slider.height() + 'px'
});
right.css({
left: (slider.offset().left + 20 + slider.width() * (parseInt(slider.val())/100)) + 'px',
top: slider.offset().top + 'px',
width: (slider.width() * (1 - parseInt(slider.val())/100)) + 'px',
height: slider.height() + 'px'
});
}
$('input').change(function() {
colorTheBar($(this));
});
colorTheBar($('input'));
/* CSS */
.left, .right {
position: absolute;
z-index: 1;
}
.left {
background-color: blue;
}
.right {
background-color: black;
}
The easiest way do that is to use gradients:
CSS
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 100%;
height: 8px;
padding: 0 20px;
background: #0000ff;
background: -moz-linear-gradient(left, #0000ff 0%, #0000ff 50%, #000000 50%, #000000 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0000ff), color-stop(50%,#0000ff), color-stop(50%,#000000), color-stop(100%,#000000));
background: -webkit-linear-gradient(left, #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
background: -o-linear-gradient(left, #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
background: -ms-linear-gradient(left, #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
background: linear-gradient(to right, #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#000000',GradientType=1 );
border-radius: 2px;
margin-top: 25px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}
To customize the gradient i recommend Ultimate CSS Gradient Generator.
Fiddle