We Keep Coding

How can I change wordpress shortcode value, using JavaScript

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

"Top" style not calculating correctly from Javascript

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>

Input Range - Highlight Selected Part [duplicate]

I want the left side to be green and the right side to be gray. As pictured above would be PERFECT. Preferably a pure CSS solution (only need to worry about WebKit).
Is such a thing possible?

Pure CSS solution:
Chrome: Hide the overflow from input[range], and fill all the space left to
thumb with shadow color.
IE: no need to reinvent the wheel: ::-ms-fill-lower
Firefox no need to reinvent the wheel: ::-moz-range-progress
/*Chrome*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
overflow: hidden;
width: 80px;
-webkit-appearance: none;
background-color: #9a905d;
}
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: #434343;
box-shadow: -80px 0 0 80px #43e5f7;
}
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
background-color: #9a905d;
}
<input type="range"/>

While the accepted answer is good in theory, it ignores the fact that the thumb then cannot be bigger than size of the track without being chopped off by the overflow: hidden. See this example of how to handle this with just a tiny bit of JS.
// .chrome styling Vanilla JS
document.getElementById("myinput").oninput = function() {
var value = (this.value-this.min)/(this.max-this.min)*100
this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};
#myinput {
background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
border: solid 1px #82CFD0;
border-radius: 8px;
height: 7px;
width: 356px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
}
<div class="chrome">
<input id="myinput" min="0" max="60" type="range" value="30" />
</div>

Use this simple css property to change color of checkbox, radio button and range
accent-color: #F55050;
Current browser support

Yes, it is possible. Though I wouldn't recommend it because input range is not really supported properly by all browsers because is an new element added in HTML5 and HTML5 is only a draft (and will be for long) so going as far as to styling it is perhaps not the best choice.
Also, you'll need a bit of JavaScript too. I took the liberty of using jQuery library for this, for simplicity purposes.
Here you go: http://jsfiddle.net/JnrvG/1/.

If you use first answer, there is a problem with thumb. In chrome if you want the thumb to be larger than the track, then the box shadow overlaps the track with the height of the thumb.
Just sumup all these answers and wrote normally working slider with larger slider thumb: jsfiddle
const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value
slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`
slider.oninput = function() {
this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};
#myinput {
border-radius: 8px;
height: 4px;
width: 150px;
outline: none;
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
width: 6px;
-webkit-appearance: none;
height: 12px;
background: black;
border-radius: 2px;
}
<div class="chrome">
<input id="myinput" type="range" min="0" value="25" max="200" />
</div>

Building on top of #dargue3's answer, if you want the thumb to be larger than the track, you want to fully take advantage of the <input type="range" /> element and go cross browser, you need a little extra lines of JS & CSS.
On Chrome/Mozilla you can use the linear-gradient technique, but you need to adjust the ratio based on the min, max, value attributes as mentioned here by #Attila O.. You need to make sure you are not applying this on Edge, otherwise the thumb is not displayed. #Geoffrey Lalloué explains this in more detail here.
Another thing worth mentioning, is that you need to adjust the rangeEl.style.height = "20px"; on IE/Older. Simply put this is because in this case "the height is not applied to the track but rather the whole input including the thumb". fiddle
/**
* Sniffs for Older Edge or IE,
* more info here:
* https://stackoverflow.com/q/31721250/3528132
*/
function isOlderEdgeOrIE() {
return (
window.navigator.userAgent.indexOf("MSIE ") > -1 ||
!!navigator.userAgent.match(/Trident.*rv\:11\./) ||
window.navigator.userAgent.indexOf("Edge") > -1
);
}
function valueTotalRatio(value, min, max) {
return ((value - min) / (max - min)).toFixed(2);
}
function getLinearGradientCSS(ratio, leftColor, rightColor) {
return [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + ratio + ', ' + leftColor + '), ',
'color-stop(' + ratio + ', ' + rightColor + ')',
')'
].join('');
}
function updateRangeEl(rangeEl) {
var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);
rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}
function initRangeEl() {
var rangeEl = document.querySelector('input[type=range]');
var textEl = document.querySelector('input[type=text]');
/**
* IE/Older Edge FIX
* On IE/Older Edge the height of the <input type="range" />
* is the whole element as oposed to Chrome/Moz
* where the height is applied to the track.
*
*/
if (isOlderEdgeOrIE()) {
rangeEl.style.height = "20px";
// IE 11/10 fires change instead of input
// https://stackoverflow.com/a/50887531/3528132
rangeEl.addEventListener("change", function(e) {
textEl.value = e.target.value;
});
rangeEl.addEventListener("input", function(e) {
textEl.value = e.target.value;
});
} else {
updateRangeEl(rangeEl);
rangeEl.addEventListener("input", function(e) {
updateRangeEl(e.target);
textEl.value = e.target.value;
});
}
}
initRangeEl();
input[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 5px;
padding: 0;
border-radius: 2px;
outline: none;
cursor: pointer;
}
/*Chrome thumb*/
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 5px;
/*16x16px adjusted to be same as 14x14px on moz*/
height: 16px;
width: 16px;
border-radius: 5px;
background: #e7e7e7;
border: 1px solid #c5c5c5;
}
/*Mozilla thumb*/
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
-moz-border-radius: 5px;
height: 14px;
width: 14px;
border-radius: 5px;
background: #e7e7e7;
border: 1px solid #c5c5c5;
}
/*IE & Edge input*/
input[type=range]::-ms-track {
width: 300px;
height: 6px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 2px 0;
/*remove default tick marks*/
color: transparent;
}
/*IE & Edge thumb*/
input[type=range]::-ms-thumb {
height: 14px;
width: 14px;
border-radius: 5px;
background: #e7e7e7;
border: 1px solid #c5c5c5;
}
/*IE & Edge left side*/
input[type=range]::-ms-fill-lower {
background: #919e4b;
border-radius: 2px;
}
/*IE & Edge right side*/
input[type=range]::-ms-fill-upper {
background: #c5c5c5;
border-radius: 2px;
}
/*IE disable tooltip*/
input[type=range]::-ms-tooltip {
display: none;
}
input[type="text"] {
border: none;
}
<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />

A small update to this one:
if you use the following it will update on the fly rather than on mouse release.
"change mousemove", function"
<script>
$('input[type="range"]').on("change mousemove", function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', #2f466b), '
+ 'color-stop(' + val + ', #d3d3db)'
+ ')'
);
});</script>

You can simply use the accent color (in Chrome 99)
<input style="accent-color: #2ecc71" type="range"/>

The previous accepted solution is not working any longer.
I ended up coding a simple function which wraps the range into a styled container adding the bar that is needed before the cursor.
I wrote this example where easy to see the two colors 'blue' and 'orange' set in the css, so they can be quickly modified.

-webkit-appearance: none; removes tick marks when using datalist. If the general appearance of the slider is fine, but the default blue color (in Chrome) needs to fit a theme color, apply a filter: hue-rotate(); to the input[type="range"] element. Other filters can be used. Some even change the background color of the slider.
input[type="range"] {
filter: hue-rotate(180deg); //rotate degrees to get desired color
}
<input type="range" min="0" max="5" step="1" list="data" value="1" />
<datalist id="data">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>

It's now supported with pseudo elements in each of WebKit, Firefox and IE. But, of course, it's different in each one. : (
See this question's answers and/or search for a CodePen titled prettify <input type=range> #101 for some solutions.

Here is another approach if you don't mind using JS. This #steveholgado Codepen overlays 3 divs for the track, progress, and thumb over the top of an input[type=range] with an opacity of zero (transparent). An oninput listener updates the styles for the divs to create pretty much any appearance you want.
The nice thing is that it is fairly browser agnostic, and deals with the inflexibility of styling sliders on Chrome. It offers a lot more styling flexibility in general.
If you want to use something other than 0 to 100 for the slider range, you'll have to scale appropriately in the listener. For example, value = value * 100 / parseInt(range.getAttribute("max")); (assuming min=0)
https://codepen.io/steveholgado/pen/OEpGXq
HTML:
<div class="wrap">
<input type="range" class="range" min="0" max="100" step="0.1" value="0">
<div class="track">
<div class="track-inner"></div>
</div>
<div class="thumb"></div>
</div>
CSS:
.wrap {
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.range {
width: 100%;
cursor: pointer;
opacity: 0;
}
.range::-ms-tooltip {
display: none;
}
.track {
width: 100%;
height: 4px;
background: #DDDDDD;
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.track-inner {
width: 0;
height: 100%;
background: #E24F4F;
}
.thumb {
width: 16px;
height: 16px;
background: #AAAAAA;
border-radius: 50%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0%, -50%);
pointer-events: none;
}
JS:
const range = document.querySelector('.range')
const thumb = document.querySelector('.thumb')
const track = document.querySelector('.track-inner')
const updateSlider = (value) => {
thumb.style.left = `${value}%`
thumb.style.transform = `translate(-${value}%, -50%)`
track.style.width = `${value}%`
}
range.oninput = (e) =>
updateSlider(e.target.value)
updateSlider(50) // Init value

input type="range" min="0" max="50" value="0" style="margin-left: 6%;width: 88%;background-color: whitesmoke;"
above code changes range input style.....

Dragging inline SVG with JqueryUI

I'm trying to get inline SVG elements to be draggable using JQuery UI, so that I can make custom video controls.
Unfortunately I've had little luck. I've tried this SO answer in my code but haven't gotten anywhere. I've also managed to get an SVG image dragging but not inline. Is it just that JQuery UI doesn't play well with inline SVG?
Any suggested alternatives?
$(document).ready(function() {
var v = document.querySelector("#vid");
var b = document.querySelector("#progress");
var x = document.querySelector("#draw_here");
var vidTimer;
var s;
//wait for video and tracks to load
var myVideoPlayer = document.getElementById('vid');
myVideoPlayer.addEventListener('loadedmetadata', function() {
$("#play_ball").draggable()
.bind('mousedown', function(event, ui) {
$(event.target.parentElement).append(event.target);
})
.bind('drag', function(event, ui) {
event.target.setAttribute('x', ui.position.left);
});
//$("#play_ball").draggable({
// axis: "x",
// containment: 'parent'
//});
var videoControls = document.getElementById('videoControls'),
play = document.getElementById('play'),
playProgressInterval = false,
progressContainer = document.getElementById("progress"),
playProgressBar = document.getElementById("play_ball");
// Get rid of the default controls
v.removeAttribute('controls');
handleButtonPresses();
function handleButtonPresses() {
// When the play button is clicked, playor pause the video.
play.addEventListener('click', playPause, false);
// When the play button is pressed, witch to the "Pause" symbol.
v.addEventListener('play', function() {
play.title = 'Pause';
play.innerHTML = '<span id="pauseButton">▐▐</span>';
// Begin tracking video's progress.
trackPlayProgress();
}, false);
// When the pause button is pressed, switch to the "Play" symbol.
v.addEventListener('pause', function() {
play.title = 'Play';
play.innerHTML = '►';
// Video was paused, stop tracking progress.
stopTrackingPlayProgress();
}, false);
// When the video has concluded, pause it.
v.addEventListener('ended', function() {
this.currentTime = 0;
this.pause();
}, false);
v.addEventListener('touchstart', function(e) {
var sDate = new Date();
sTime = sDate.getTime();;
var touchobj = e.changedTouches[0]
console.log(touchobj.target) // returns element touch point landed on
// var xPos =
// var yPos =
// console.log("position is"+e.PageX + ", " + e.PageY);
// console.log("position is" + xPos + ", " + yPos);
}, false);
v.addEventListener('touchend', function() {
var eDate = new Date();
eTime = eDate.getTime();;
if (eTime - sTime >= 99) {
alert("you held it!");
}
}, false);
}
function playPause() {
if (v.paused || v.ended) {
if (v.ended) {
v.currentTime = 0;
}
v.play();
} else {
v.pause();
}
}
function vidUpdate() {
$scope.sliderV.value = parseInt(v.currentTime, 10);
$scope.$broadcast('rzSliderForceRender');
}
// Every 50 milliseconds, update the play progress.
function trackPlayProgress() {
(function progressTrack() {
updatePlayProgress();
vidUpdate();
// pause at chapter breaks
//ignore first cue
for (var i = 1; i < cueS.length; i++) {
if (v.currentTime >= cueS[i].startTime - .10 && v.currentTime <= cueS[i].startTime + .10) {
v.currentTime += .3;
v.pause();
}
}
playProgressInterval = setTimeout(progressTrack, 50);
})();
}
function updatePlayProgress() {
playProgressBar.style.width = ((v.currentTime / v.duration) * (progressContainer.offsetWidth)) + "px";
playProgressBar.setAttribute("cx", (4 + ((v.currentTime / v.duration) * 94) + "%"));
}
// Video was stopped, so stop updating progress.
function stopTrackingPlayProgress() {
clearTimeout(playProgressInterval);
}
}); //ends wait for vid
}); //ends doc ready
/* PROGRESS BAR */
#progress {
position: absolute !important;
left: 7%;
height: 70%;
width: 90%;
cursor: pointer;
z-index: 4;
}
#progress_box {
height: 95%;
width: 100%;
border: 1px solid #292929;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #303030;
/* Old browsers */
background: -moz-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#7e7e7e', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
-moz-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
margin: 2px 0 0 5px;
padding: 2px;
overflow: hidden;
z-index: 4;
}
#play_progress {
display: block;
height: 40%;
width: 100%;
background-color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), color-stop(.5, white), to(#e3e3e3));
background: -moz-linear-gradient(top, #e3e3e3, white 50%, #e3e3e3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 4;
}
#play_time {
float: right;
margin: 7px 0 0 5px;
font-size: 10px;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
z-index: 4;
}
#spacer {
display: block;
width: 100%;
height: 30%;
}
#sliderVideo {
position: absolute;
top: 50px;
bottom: 50px;
right: 1%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="player">
<video id="vid" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<div id="videoControls">
<button id="play" title="Play">►</button>
<div id="progress">
<svg xmlns="http://www.w3.org/2000/svg" id="draw_here" height="100" width="100%">
<line id="play_bar" x1="5%" y1="15" x2="100%" y2="15" style="stroke:#7E7F81;stroke-width:2" />
<circle id="play_ball" cx="4%" cy="15" r="13" fill="#B0C4DE" />
</svg>
<span id="spacer"></span>
</div>
<button id="instructorBtn" title="Instructor">!</button>
</div>
</div>
</body>

I'll debug it and see if I can solve the problem.
First thing I noticed is that you didn't close your html tag ;)
Also why "document.querySelector" when you use jquery...
Edit:
You seem to use a lot non jquery code, cleaning up your code currently and I'll fix the slider.
Edit2:
You have forgotten that you also need to update the video progress after sliding with the slider, I'm adding code for that too.
Edit3:
Here's some working code: https://jsfiddle.net/seahorsepip/gLudkdd9/5/
It's still messy and working buggy, the things you did with 4% and 94% don't make any sense either.
You actually don't even need jquery ui just to make it draggable, it's pretty easy to write it with mousedown mousemove and mouseup instead.
.

Slider FileReader JS Multiple Image Upload (Incrementing Index)

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/