Image swap with progress bar increase/decrease onclick

Image swap with progress bar increase/decrease onclick - javascript

I'm trying to create image swap with the progress bar increase/decrease when the button clicked. This first problem is working but the second one is not working. On the second one, image won't swap after the fist button ("mark completed") clicked.
$(document).ready(function($){
var progress = 20;
var picSource = document.getElementById("mark-complete").src;
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";
function changePic() {
if (picSource == notcomplete) {
picSource = completed;
} else {
picSource = notcomplete;
}
}
document.getElementById("btn").onclick = function() {
changePic();
document.getElementById("mark-complete").src = picSource;
}
document.getElementById("btn2").onclick = function() {
changePic();
document.getElementById("mark-complete2").src = picSource;
}
$("#pg1 input").on('change', function(){
if ($("#pg1 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg1 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
$("#pg2 input").on('change', function(){
if ($("#pg2 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg2 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
});
.xp-progress { background-color: darkred;
height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
<div class="xp-progress" role="progressbar" style="width:20%">
<span class="sr-only" style="color:blue;"></span>
</div>
</div>
<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
<input type="checkbox" id="btn" style="display:none;">
</label>
<hr>
<p></p>
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
<input type="checkbox" id="btn2" style="display:none;">
</label>
I know it has to do with "getelementbyid" but What did i do wrong?
Here is the demo: https://plnkr.co/UGWOqpdeCDhXuS9MMXfI

picSource is always equals to path to your first image (document.getElementById("mark-complete").src).
You need to pass your current image to changePic and compare it on click event. Updated changePic returns needed src for image.
$(document).ready(function($){
var progress = 20;
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";
function changePic(source) {
if (source == notcomplete) {
return completed;
} else {
return notcomplete;
}
}
document.getElementById("btn").onclick = function() {
var imgSrc=document.getElementById("mark-complete").src;
document.getElementById("mark-complete").src = changePic(imgSrc);
}
document.getElementById("btn2").onclick = function() {
var imgSrc=document.getElementById("mark-complete2").src;
document.getElementById("mark-complete2").src = changePic(imgSrc);
}
$("#pg1 input").on('change', function(){
if ($("#pg1 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg1 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
$("#pg2 input").on('change', function(){
if ($("#pg2 input").is(":checked") === true) {
progress = progress+5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
else if ($("#pg2 input").is(":checked") === false) {
progress = progress-5;
$('#blips > .xp-progress').attr("style","width:" + progress + "%");
}
});
});
.xp-progress { background-color: darkred;
height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
<div class="xp-progress" role="progressbar" style="width:20%">
<span class="sr-only" style="color:blue;"></span>
</div>
</div>
<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
<input type="checkbox" id="btn" style="display:none;">
</label>
<hr>
<p></p>
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
<input type="checkbox" id="btn2" style="display:none;">
</label>

The problem is that picSource remains set to the src of the last image that was changed.
You've made this way more complicated then it has to be, here is a simplified version:
$(function() {
var progress = 20;
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";
$("#btn, #btn2").click(function() {
// Get a reference to the appropriate image based on the id of the pushed button.
var $img = this.id === 'btn' ? $("#mark-complete") : $("#mark-complete2");
// Toggle the image.
if ($img.attr("src") === notcomplete) {
$img.attr("src", completed);
} else {
$img.attr("src", notcomplete);
}
});
$("#pg1 input, #pg2 input").on('change', function() {
if ($(this).is(":checked")) {
progress = progress + 5;
} else {
progress = progress - 5;
}
$('#blips > .xp-progress').css("width", progress + "%");
});
});
.xp-progress {
background-color: darkred;
height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
<div class="xp-progress" role="progressbar" style="width:20%">
<span class="sr-only" style="color:blue;"></span>
</div>
</div>
<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
<input type="checkbox" id="btn" style="display:none;">
</label>
<hr>
<p></p>
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
<input type="checkbox" id="btn2" style="display:none;">
</label>

Related

How to Trigger Youtube API Iframe loader using an OnClick function?

I have a youtube API Iframe that loads on a video trimming script.
Works fine but How can I trigger it based on a click function instead of default on document load.
The reason behind this is that I would like to insert a youtube link in an input box and on click I m trying to update the link ID in onYouTubeIframeAPIReady() videoId var.
Here's the fiddle to play around
Here's the code snippet.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css'>
<style>
.size
{
font-size: 80px;
font-weight: bold;
}
.sizePar
{
font-size: 21px;
}
.input-size
{
width: 355px;
float: left;
}
.button-size
{
width: 95px;
float: none;
height: 33px;
}
.padding
{
padding-top: 11px;
}
.video-image-size
{
width:250px;
height:auto;
}
.center
{
text-align: center;
padding-top: 25px;
}
.button-rule
{
font-style: normal;
font-weight: bold;
vertical-align: middle;
}
.button-widht
{
width: 116px;
}
.allontana
{
margin-bottom: 30px;
margin-top:50px;
margin-right:15px;
}
.separa{
margin-left: 10px;
margin-right: 10px;
}
.bordered{
border: 1px solid black;
}
body {
padding-top: 70px;
}
.carousel-inner img{
margin: 0 auto;
}
.navbar-brand{
font-size: 20pt;
font-style: bold;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid orange;
margin: 1em 0; padding: 0;
}
.progress {
border-radius: 0px;
height: 10px;
}
.progress-bar-warning{
background: #ffffff;
}
.video-image-size-onWatch{
width:150px;
height:auto;
}
#showcase {
margin: 0 20px;
text-align: center;
}
#range .noUi-base {
}
#range .noUi-background {
}
#range .noUi-connect {
background: #80C9F5;
box-shadow: inset 0 0 5px rgba(20,20,20,0.65);
}
#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;
}
</style>
</head>
<body translate="no" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
<input type="text" id="custom_link" />
<a id="custom_link_btn" >Submit</a>
</div>
<div class="row">
<div class="col-md-3 text-center">
<hr>
<h3>Cut This Video</h3>
<div class="panel panel-info" style="margin-top:30px;">
<div class="panel-heading">
<h3 class="panel-title">Current Time</h3>
</div>
<div class="panel-body">
<div id="curTime" style="font-size:20px;">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Select Quality</h3>
</div>
<div class="panel-body">
<div class="dropdown" id="dropdown" style="font-size:20px;">
<!-- dropdown here -->
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Cutted duration</h3>
</div>
<div class="panel-body">
<div id="finalDuration" style="font-size:20px;">
</div>
</div>
</div>
</div>
<!-- player -->
<div class="col-md-6 text-center" style="padding-top:30px;">
<div class="embed-responsive embed-responsive-16by9">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" class="embed-responsive-item">
</div>
</div>
<!-- progress bar -->
<div class="progress">
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-left" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" id="played" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" id="toPlay" style="width: 100%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-right" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
<!-- 2. The IONrangeSlider container -->
<div id="range"></div>
<div id="value-input"></div>
<div id="value-span"></div>
<!-- Controls -->
<div id="controls" style="padding-top:20px;">
<a href="#" onClick="rewindVideo()" class="separa">
<i class="separa fa fa-refresh fa-2x"></i>
</a>
<a href="#" onClick="backwardVideo()" class="separa">
<i class="separa fa fa-backward fa-2x"></i>
</a>
<a href="#" onClick="playPauseVideo()" id="playPause" class="separa">
<i class="separa fa fa-play fa-2x"></i>
</a>
<a href="#" onClick="forwardVideo()" class="separa">
<i class="separa fa fa-forward fa-2x"></i>
</a>
</div>
<div class="input-group" style="margin-top:30px;">
<span class="input-group-addon" id="basic-addon1">Title</span>
<input type="text" name="title" id="title" class="form-control" value="Bill Maher Live DNC Special Edition: July 27" aria-describedby="basic-addon1" required>
<div id="inputList"></div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-6 text-center" style="padding-top: 30px;">
<button type="submit" class="btn btn-primary" style="margin-top:10px">Cut</button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<!-- endRow -->
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js'></script>
<script id="rendered-js" >
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var duration;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'IP1kr0SCYzk',
playerVars: { 'start': 0, 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onytplayerStateChange } });
}
function onPlayerReady(event) {
// event.target.playVideo();
duration = player.getDuration();
setMoreInfo();
playPauseVideo();
setIONrangeSlider();
checkDomainAndStop();
}
function onytplayerStateChange(newState) {
setCorrectImageOnPlay();
}
/*
IONrangeSlider
*/
var fromOld = 0;
var toOld = duration;
var slider;
function setIONrangeSlider() {
var slider = document.getElementById('range');
noUiSlider.create(slider, {
start: [0, duration], // Handle start position
step: 1, // Slider moves in increments of '1'
margin: 3, // Handles must be more than '3' apart
connect: true, // Display a colored bar between the handles
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to 'duration'
'min': 0,
'max': duration } });
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');
var readValue;
// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function (values, handle) {
if (handle) {
readValue = values[handle] | 0;
valueSpan.innerHTML = toHHMMSS(values[handle]);
if (toOld != readValue) {
toOld = readValue;
}
} else {
readValue = values[handle] | 0;
valueInput.innerHTML = toHHMMSS(values[handle]);
if (fromOld != readValue) {
fromOld = readValue;
player.seekTo(readValue, true);
player.pauseVideo();
player.playVideo();
}
}
});
// When the input changes, set the slider value
valueInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
}
/*
Player Bar
*/
function updatePlayerBar() {
var curTime = player.getCurrentTime();
var cutLeft = fromOld * 100 / duration;
var cutRigth = (duration - toOld) * 100 / duration;
var played = (curTime - fromOld) * 100 / duration;
var toPlay = 100 - played - cutLeft - cutRigth;
document.getElementById("cut-left").style.width = cutLeft + "%";
document.getElementById("cut-right").style.width = cutRigth + "%";
document.getElementById("played").style.width = played + "%";
document.getElementById("toPlay").style.width = toPlay + "%";
}
/*
Updates the playback quality
*/
function updatePlaybackQuality(quality) {
player.setPlaybackQuality(quality);
waitForQuality(quality);
}
function waitForQuality(quality) {
if (player.getPlaybackQuality() != quality) {
setTimeout(function () {waitForQuality(quality);}, 1000);
} else
{
createQualityList(qualityLevels);
}
}
function checkDomainAndStop() {
var curTime = player.getCurrentTime();
document.getElementById('curTime').innerHTML = toHHMMSS(curTime.toString()) + " / " + toHHMMSS(duration.toString());
var result = toHHMMSS((toOld - fromOld).toString());
if (result != "NaN:NaN:NaN") {
document.getElementById('finalDuration').innerHTML = result;
}
if (curTime < fromOld) {
player.seekTo(fromOld, true);
}
if (curTime > toOld) {
player.seekTo(toOld, true);
pauseVideo();
}
updatePlayerBar();
// recursively call it.
setTimeout(checkDomainAndStop, 100);
}
/*
Setting more infos
*/
var waitForLevels;
var qualityLevels;
function setMoreInfo() {
waitForLevels = player.getAvailableQualityLevels();
if (waitForLevels.length == 0) {
setTimeout(setMoreInfo, 1000);
} else
{
qualityLevels = waitForLevels;
//console.log(qualityLevels);
createQualityList(qualityLevels);
}
}
/*
converts String to hh:mm:ss or mm:ss
*/
function toHHMMSS(val) {
var sec_num = parseInt(val, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
if (hours < 10) {hours = "0" + hours;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
// only mm:ss
if (hours == "00") {
var time = minutes + ':' + seconds;
} else
{
var time = hours + ':' + minutes + ':' + seconds;
}
return time;
}
function stopVideo() {
player.stopVideo();
}
function pauseVideo() {
player.pauseVideo();
}
function playVideo() {
player.playVideo();
}
function playPauseVideo() {
//is playing
if (player.getPlayerState() == 1) {
pauseVideo();
} else
{
playVideo();
}
}
function setCorrectImageOnPlay() {
//is playing
if (player.getPlayerState() == 1) {
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-pause fa-2x\"></i>";
} else
{
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-play fa-2x\"></i>";
}
}
function backwardVideo() {
var curTime = player.getCurrentTime();
curTime -= 5;
if (curTime < fromOld) {
player.seekTo(fromOld, true);
} else
{
player.seekTo(curTime, true);
}
}
function rewindVideo() {
player.seekTo(fromOld, true);
playVideo();
}
function forwardVideo() {
var curTime = player.getCurrentTime();
curTime += 5;
if (curTime > toOld) {
player.seekTo(toOld, true);
} else
{
player.seekTo(curTime, true);
}
}
//# sourceURL=pen.js
</script>
So, as per the above code, I'm trying to get the input value with the click of submit button and update it on videoId var, so the trimmable video gets updated. as well.
What I tried:
I tried keeping the whole script inside a function and tried "OnClick", It ran till 2nd console.log print.

How to trim a local video using a Custom Video Trimmer in JQuery?

I have a custom video trimmer snippet from codepen.
Here's the fiddle link to play around
However, I can only be able to trim the video from youtube. How can I trim a local video using the code?
The code goes as :
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css'>
<style>
.size
{
font-size: 80px;
font-weight: bold;
}
.sizePar
{
font-size: 21px;
}
.input-size
{
width: 355px;
float: left;
}
.button-size
{
width: 95px;
float: none;
height: 33px;
}
.padding
{
padding-top: 11px;
}
.video-image-size
{
width:250px;
height:auto;
}
.center
{
text-align: center;
padding-top: 25px;
}
.button-rule
{
font-style: normal;
font-weight: bold;
vertical-align: middle;
}
.button-widht
{
width: 116px;
}
.allontana
{
margin-bottom: 30px;
margin-top:50px;
margin-right:15px;
}
.separa{
margin-left: 10px;
margin-right: 10px;
}
.bordered{
border: 1px solid black;
}
body {
padding-top: 70px;
}
.carousel-inner img{
margin: 0 auto;
}
.navbar-brand{
font-size: 20pt;
font-style: bold;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid orange;
margin: 1em 0; padding: 0;
}
.progress {
border-radius: 0px;
height: 10px;
}
.progress-bar-warning{
background: #ffffff;
}
.video-image-size-onWatch{
width:150px;
height:auto;
}
#showcase {
margin: 0 20px;
text-align: center;
}
#range .noUi-base {
}
#range .noUi-background {
}
#range .noUi-connect {
background: #80C9F5;
box-shadow: inset 0 0 5px rgba(20,20,20,0.65);
}
#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;
}
</style>
</head>
<body translate="no" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3 text-center">
<hr>
<h3>Cut This Video</h3>
<div class="panel panel-info" style="margin-top:30px;">
<div class="panel-heading">
<h3 class="panel-title">Current Time</h3>
</div>
<div class="panel-body">
<div id="curTime" style="font-size:20px;">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Select Quality</h3>
</div>
<div class="panel-body">
<div class="dropdown" id="dropdown" style="font-size:20px;">
<!-- dropdown here -->
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Cutted duration</h3>
</div>
<div class="panel-body">
<div id="finalDuration" style="font-size:20px;">
</div>
</div>
</div>
</div>
<!-- player -->
<div class="col-md-6 text-center" style="padding-top:30px;">
<div class="embed-responsive embed-responsive-16by9">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" class="embed-responsive-item">
</div>
</div>
<!-- progress bar -->
<div class="progress">
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-left" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" id="played" style="width: 0%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" id="toPlay" style="width: 100%">
<span class="sr-only"></span>
</div>
<div class="progress-bar progress-bar-primary progress-bar-striped" id="cut-right" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
<!-- 2. The IONrangeSlider container -->
<div id="range"></div>
<div id="value-input"></div>
<div id="value-span"></div>
<!-- Controls -->
<div id="controls" style="padding-top:20px;">
<a href="#" onClick="rewindVideo()" class="separa">
<i class="separa fa fa-refresh fa-2x"></i>
</a>
<a href="#" onClick="backwardVideo()" class="separa">
<i class="separa fa fa-backward fa-2x"></i>
</a>
<a href="#" onClick="playPauseVideo()" id="playPause" class="separa">
<i class="separa fa fa-play fa-2x"></i>
</a>
<a href="#" onClick="forwardVideo()" class="separa">
<i class="separa fa fa-forward fa-2x"></i>
</a>
</div>
<div class="input-group" style="margin-top:30px;">
<span class="input-group-addon" id="basic-addon1">Title</span>
<input type="text" name="title" id="title" class="form-control" value="Bill Maher Live DNC Special Edition: July 27" aria-describedby="basic-addon1" required>
<div id="inputList"></div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-6 text-center" style="padding-top: 30px;">
<button type="submit" class="btn btn-primary" style="margin-top:10px">Cut</button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<!-- endRow -->
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js'></script>
<script id="rendered-js" >
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var duration;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'IP1kr0SCYzk',
playerVars: { 'start': 0, 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onytplayerStateChange } });
}
function onPlayerReady(event) {
// event.target.playVideo();
duration = player.getDuration();
setMoreInfo();
playPauseVideo();
setIONrangeSlider();
checkDomainAndStop();
}
function onytplayerStateChange(newState) {
setCorrectImageOnPlay();
}
/*
IONrangeSlider
*/
var fromOld = 0;
var toOld = duration;
var slider;
function setIONrangeSlider() {
var slider = document.getElementById('range');
noUiSlider.create(slider, {
start: [0, duration], // Handle start position
step: 1, // Slider moves in increments of '1'
margin: 3, // Handles must be more than '3' apart
connect: true, // Display a colored bar between the handles
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to 'duration'
'min': 0,
'max': duration } });
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');
var readValue;
// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function (values, handle) {
if (handle) {
readValue = values[handle] | 0;
valueSpan.innerHTML = toHHMMSS(values[handle]);
if (toOld != readValue) {
toOld = readValue;
}
} else {
readValue = values[handle] | 0;
valueInput.innerHTML = toHHMMSS(values[handle]);
if (fromOld != readValue) {
fromOld = readValue;
player.seekTo(readValue, true);
player.pauseVideo();
player.playVideo();
}
}
});
// When the input changes, set the slider value
valueInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
}
/*
Player Bar
*/
function updatePlayerBar() {
var curTime = player.getCurrentTime();
var cutLeft = fromOld * 100 / duration;
var cutRigth = (duration - toOld) * 100 / duration;
var played = (curTime - fromOld) * 100 / duration;
var toPlay = 100 - played - cutLeft - cutRigth;
document.getElementById("cut-left").style.width = cutLeft + "%";
document.getElementById("cut-right").style.width = cutRigth + "%";
document.getElementById("played").style.width = played + "%";
document.getElementById("toPlay").style.width = toPlay + "%";
}
/*
Updates the playback quality
*/
function updatePlaybackQuality(quality) {
player.setPlaybackQuality(quality);
waitForQuality(quality);
}
function waitForQuality(quality) {
if (player.getPlaybackQuality() != quality) {
setTimeout(function () {waitForQuality(quality);}, 1000);
} else
{
createQualityList(qualityLevels);
}
}
function checkDomainAndStop() {
var curTime = player.getCurrentTime();
document.getElementById('curTime').innerHTML = toHHMMSS(curTime.toString()) + " / " + toHHMMSS(duration.toString());
var result = toHHMMSS((toOld - fromOld).toString());
if (result != "NaN:NaN:NaN") {
document.getElementById('finalDuration').innerHTML = result;
}
if (curTime < fromOld) {
player.seekTo(fromOld, true);
}
if (curTime > toOld) {
player.seekTo(toOld, true);
pauseVideo();
}
updatePlayerBar();
// recursively call it.
setTimeout(checkDomainAndStop, 100);
}
/*
Setting more infos
*/
var waitForLevels;
var qualityLevels;
function setMoreInfo() {
waitForLevels = player.getAvailableQualityLevels();
if (waitForLevels.length == 0) {
setTimeout(setMoreInfo, 1000);
} else
{
qualityLevels = waitForLevels;
//console.log(qualityLevels);
createQualityList(qualityLevels);
}
}
/*
converts String to hh:mm:ss or mm:ss
*/
function toHHMMSS(val) {
var sec_num = parseInt(val, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
if (hours < 10) {hours = "0" + hours;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
// only mm:ss
if (hours == "00") {
var time = minutes + ':' + seconds;
} else
{
var time = hours + ':' + minutes + ':' + seconds;
}
return time;
}
function stopVideo() {
player.stopVideo();
}
function pauseVideo() {
player.pauseVideo();
}
function playVideo() {
player.playVideo();
}
function playPauseVideo() {
//is playing
if (player.getPlayerState() == 1) {
pauseVideo();
} else
{
playVideo();
}
}
function setCorrectImageOnPlay() {
//is playing
if (player.getPlayerState() == 1) {
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-pause fa-2x\"></i>";
} else
{
document.getElementById('playPause').innerHTML =
"<i class=\"separa fa fa-play fa-2x\"></i>";
}
}
function backwardVideo() {
var curTime = player.getCurrentTime();
curTime -= 5;
if (curTime < fromOld) {
player.seekTo(fromOld, true);
} else
{
player.seekTo(curTime, true);
}
}
function rewindVideo() {
player.seekTo(fromOld, true);
playVideo();
}
function forwardVideo() {
var curTime = player.getCurrentTime();
curTime += 5;
if (curTime > toOld) {
player.seekTo(toOld, true);
} else
{
player.seekTo(curTime, true);
}
}
//# sourceURL=pen.js
</script>
Things I tried.
Replacing the youtube link in the iframe with the local video path works but it won't have any effect with the trimmer and progress bar
Tried changing the "player" variable in the script, Failed.
Any help is greatly appreciated.

Show child elements if parent is visible

I'm trying to have my form show child elements if the parent is visible and I keep getting an "undefined" error with my child element, even though I have it defined. I'm trying to have set this up where:
Q1: Checked responses will show parent elements (divs).
Q2: Depending on this response, it'll show child elements (divs).
Is there a way to do this?
//Next Tab
function next() {
var formTabOne = document.getElementById("stepOne");
formTabOne.classList.add("formTrans");
formTabOne.addEventListener("transitionend", function({
target
}) {
if (target === formTabOne) {
target.classList.add("hidden");
target.classList.remove("formTrans");
document.getElementById("stepTwo").classList.remove("hidden");
}
})
}
//Prev Tab
function prev() {
var formTabTwo = document.getElementById("stepTwo");
formTabTwo.classList.add("formTrans");
formTabTwo.addEventListener("transitionend", function({
target
}) {
if (target === formTabTwo) {
target.classList.add("hidden");
target.classList.remove("formTrans");
document.getElementById("stepOne").classList.remove("hidden");
}
})
}
function process() {
var form = document.myForm;
var biz = document.getElementById("biz");
var career = document.getElementById("career");
var change = document.getElementById("change");
var eq = document.getElementById("eq");
var empathy = document.getElementById("empathy");
var pm = document.getElementById("pm");
var bizMgr = document.getElementsByClassName("bizMgr");
var bizEE = document.getElementsByClassName("bizEE");
//Q1 - Topics
document.querySelectorAll("#chkTopic input").forEach((el) => {
const contentID = el.id.replace("chk", "").toLowerCase()
document.getElementById(contentID).style.display = el.checked ? "block" : "none";
});
//Q2 - Employee Type
var q2value = "";
for (var i = 0; i < form.q2.length; i++) {
var answer = form.q2[i];
if (answer.checked) {
q2value = answer.value;
}
}
if (q2value == "1") {
if (biz.style.display = "block") {
bizMgr.style.display = "block";
bizEE.style.display = "block";
}
} else {
if (biz.style.display = "block") {
document.getElementsByClassName("bizEE").style.display = "block";
}
}
}
html {
scroll-behavior: smooth;
}
#formWrapper {
background-color: #eaeaea;
padding: 20px;
margin-bottom: 40px;
min-height: 300px;
}
#myForm {
width: 70%;
min-height: 280px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #dedede;
box-sizing: border-box;
}
.formStep {
opacity: 1;
background: #fff;
}
.formTrans {
visibility: hidden;
opacity: 0;
transition: visibility 0s 200ms, opacity 200ms linear;
}
.hidden {
display: none;
}
#biz, #career, #change, #eq, #empathy, #pm, #pd {
display: none;
width: 100%;
min-height: 200px;
box-sizing: border-box;
margin-bottom: 30px;
border: 1px solid #000;
}
.bizMgr, .bizEE, .careerMgr, .careerEE, .changeMgr, .changeEE, .eqMgr, .eqEE, .empathyMgr, .empathyEE, .pmMgr, .pmEE, .pdMgr, .pdEE {
display: none;
}
<form name="myForm" id="myForm">
<input type="button" value="Skip This" onclick="formSkip();">
<br><br>
<!--Step 1-->
<div id="stepOne" class="formStep">
<b>Select the topic(s) you're interested in:</b><br>
<div id="chkTopic">
<input id="chkBiz" type="checkbox" value="1"><label for="chkBiz">Business Structure/Acumen</label><br>
<input id="chkCareer" type="checkbox" value="2"><label for="chkCareer">Career Development</label><br>
<input id="chkChange" type="checkbox" value="3"><label for="chkChange">Change</label><br>
<input id="chkEQ" type="checkbox" value="4"><label for="chkEQ">Emotional Intelligence</label><br>
<input id="chkEmpathy" type="checkbox" value="5"><label for="chkEmpathy">Empathy</label><br>
<input id="chkPM" type="checkbox" value="6"><label for="chkPM">Performance Management</label><br>
</div>
<br>
<button type="button" id="btnStepOne" onclick="next();">Next</button>
</div>
<!--Step 2-->
<div id="stepTwo" class="formStep hidden">
<b>Are you a people leader?</b><br>
<input type="radio" name="q2" value="0">No<br>
<input type="radio" name="q2" value="1">Yes<br>
<br>
<button type="button" id="btnStepTwo" onclick="prev();">Previous</button>
<input type="button" value="Show Results" onclick="process();">
<input type="reset" value="Start Over" onclick="formReset();">
</div>
</form>
<div id="results">
<div id="biz">
Business Structure/Acumen
<div class="bizMgr">Manager Content</div>
<div class="bizEE">Employee Content</div>
</div>
<div id="career">
Career Development
<div class="careerMgr">Manager Content</div>
<div class="careerEE">Employee Content</div>
</div>
<div id="change">
Change
<div class="changeMgr">Manager Content</div>
<div class="changeEE">Employee Content</div>
</div>
<div id="eq">
Emotional Intelligence
<div class="eqMgr">Manager Content</div>
<div class="eqEE">Employee Content</div>
</div>
<div id="empathy">
Empathy
<div class="empathyMgr">Manager Content</div>
<div class="empathyEE">Employee Content</div>
</div>
<div id="pm">
Performance Management
<div class="pmMgr">Manager Content</div>
<div class="pmEE">Employee Content</div>
</div>
</div>

.getElementsByClassName returns a collection, bizMgr and bizEE are both collections. You have to iterate the collections and set each element to style.display = 'block'. You can't just call xxx.style.display on a javascript collection. You would want to change your code like the following:
if (q2value == "1") {
if (biz.style.display = "block") {
//bizMgr.style.display = "block"; -NO
//bizEE.style.display = "block"; -NO
for(let i = 0; i < bizMgr.length; i++){
bizMgr[i].style.display = "block";
}
for(let j = 0; j < bizEE.length; j++){
bizEE[j].style.display = "block";
}
}
} else {
if (biz.style.display = "block") {
//document.getElementsByClassName("bizEE").style.display = "block"; -NO
for(let j = 0; j < bizEE.length; j++){
bizEE[j].style.display = "block";
}
}
}

Insert values at cursor pointer and how to assign to ng-model - Angularjs

I am able to insert values at cursor pointer but unable to assign the textarea value to ng-model.
app.directive('myText', ['$rootScope', function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('add', function(e, val) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
} else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}]);
$scope.insertValue = function(value, type) {
$rootScope.$broadcast('add', value);
//$scope.model.userApprovalMessage = $scope.model.userApprovalMessage + " " + value;
$scope.model.userApprovalMsgLength = 300 - parseFloat($scope.model.userApprovalMessage.length);
};
<div class="btn-group" style="float: left; margin-left: 5px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-class="model.webPageSkin3">Insert Tag</button>
<ul class="action-dropdown dropdown-menu ">
<li ng-click="insertValue('$Name')"><a>$Name</a></li>
<li ng-click="insertValue('$Groupz')"><a>$Groupz</a></li>
</ul>
</div> <br>
<br>
<div class="row">
<textarea class="compose-msg-area form-control compose-textarea" style="border: 1px solid #ddd; white-space: pre-wrap; margin-left: 20px;" ng-model="model.userApprovalMessage" placeholder="Text Message" maxlength="300" ng-change="userApprovalMessageLength(model.userApprovalMessage)"
my-text="">
</textarea>
</div>
<div class="row">
<div class="col-sm-3"><input type="text" class="form-control" numbers-only disabled style="border: 1px solid #ddd; width: 40px; background-color: #fff; padding: 5px; height: 30px; margin-top: -20px; font-weight: 600; margin-left: 5px;" ng-model="model.userApprovalMsgLength">
<label class="pull-right text-left1" for="street">text left</label>
</div>
</div>
I need to display the $scope.model.userApprovalMessage length. When I try to insert $Name at cursor pointer. I am able to add but the model value is not changing.

How to get the sidebar to not interact?

I want to make a webpage that adds points when you click on it. There is a sidebar(just a left column) where there are images that act as checkboxes. Selecting one image gets you 1 point when you click on the page, selecting the other gives 5...
However, I don't want to have the sidebar give points. It means that when you click on it, it only changes the selected image, without adding points. Everything is working except the "not adding points on the sidebar" part. I tried the following code, but it doesn't work:
function addPoint(number) {
points = points + number;
document.getElementById('points').innerHTML = points;
};
function pointsAmount() {
chkBox1 = document.getElementById('picture1').checked;
addPoint(chkBox1 ? 1 : 0);
chkBox2 = document.getElementById('picture2').checked;
addPoint(chkBox2 ? 5 : 0);
chkBox3 = document.getElementById('picture3').checked;
addPoint(chkBox3 ? 10 : 0);
chkBox4 = document.getElementById('picture4').checked;
addPoint(chkBox4 ? 20 : 0);
};
function checkPicture(x, y) {
document.getElementById(x).checked = y;
}
function Border(x, y) {
document.getElementById(x).style.borderColor = y;
}
function onPageload() {
checkPicture('picture1', true);
Border('pic1', 'yellow');
}
window.onload = onPageload;
window.onmousedown = function(e) {
if (e.target.className != 'float-left-area') {
pointsAmount();
}
}
var points = 0;
body {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
input[type=checkbox] {
display: none;
}
input[type=button] {
display: none;
}
.float-left-area {
position: absolute;
width: 20%;
float: left;
background-color: #dddddd;
border: 3px solid black;
height: 99%;
}
.float-right-area {
float: right;
width: 80%;
height: 100%;
}
.inner-left {
font-size: 2em;
}
img.size {
width: 3em;
height: 3em;
}
<div class="float-left-area">
<div class="inner-left">
<label for="picture1"><div id="pic1" style="border: 5px solid black;"><img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size" /><p align="right">1</p></div></label>
<input id="picture1" type="checkbox" onchange="checkPicture('picture1', true)" onclick="
checkPicture('picture2', false);
checkPicture('picture3', false);
checkPicture('picture4', false);
Border('pic1', 'yellow');
Border('pic2', 'black');
Border('pic3', 'black');
Border('pic4', 'black');" />
<label for="picture2"><div id="pic2" style="border: 5px solid black;"><img src="imac_2.jpg" style="float:left;" class="size" alt="iMac" /><p align="right">5</p></div></label>
<input id="picture2" type="checkbox" onchange="checkPicture('picture2', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture3', false);
checkPicture('picture4', false);
Border('pic2', 'yellow');
Border('pic1', 'black');
Border('pic3', 'black');
Border('pic4', 'black');" />
<label for="picture3"><div id="pic3" style="border: 5px solid black;"><img src="coding_img.png" style="float:left;" class="size" alt="iMac" /><p align="right">10</p></div></label>
<input id="picture3" type="checkbox" onchange="checkPicture('picture3', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture2', false);
checkPicture('picture4', false);
Border('pic3', 'yellow');
Border('pic1', 'black');
Border('pic2', 'black');
Border('pic4', 'black');" />
<label for="picture4"><div id="pic4" style="border: 5px solid black;"><img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6"/><p align="right">20</p></div></label>
<input id="picture4" type="checkbox" onchange="checkPicture('picture4', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture2', false);
checkPicture('picture3', false);
Border('pic4', 'yellow');
Border('pic1', 'black');
Border('pic2', 'black');
Border('pic3', 'black');" />
</div>
</div>
<div class="float-right-area">
<div class="inner-right">
<p align="center">Points: <span id="points">0</span></p>
Also, no jQuery please.

Not sure if this is what you want:
I remove the bulky code in the checkbox input and set different values in the attribute (i.e. value, data-pic), then consolidate all actions in the function addPoint(number).
I have also modified function pointsAmount() by using for loop to get the points of selected picture. And points will only be added when you click on the right side area.
function addPoint(number) {
points = points + number;
document.getElementById('points').innerHTML = points;
}
function checkPicture(x, y) {
document.getElementById(x).checked = y;
}
function Border(x, y) {
document.getElementById(x).style.borderColor = y;
}
function selectPicture(selectedPic) {
var checkboxes = document.getElementsByName('picture');
for (var i = 0; i < checkboxes.length; i++)
{
var id = checkboxes[i].id;
var pic = checkboxes[i].getAttribute('data-pic');
// Default state and style
checkPicture(id, false);
Border(pic, 'black');
if (id == selectedPic.id)
{
checkPicture(id, true);
Border(pic, 'yellow');
}
}
}
function pointsAmount() {
var checkboxes = document.getElementsByName('picture');
for (var i = 0; i < checkboxes.length; i++)
{
if (checkboxes[i].checked)
{
var value = parseInt(checkboxes[i].value);
addPoint(value);
}
}
}
function onPageload() {
checkPicture('picture1', true);
Border('pic1', 'yellow');
}
window.onload = onPageload;
window.onmousedown = function(e) {
if (e.target.className == 'float-right-area') {
pointsAmount();
}
}
var points = 0;
<div class="float-left-area">
<div class="inner-left">
<label for="picture1">
<div id="pic1" style="border: 5px solid black;">
<img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size">
<p align="right">1</p>
</div>
</label>
<input id="picture1" type="checkbox" name="picture" data-pic="pic1" value="1" onclick="selectPicture(this)">
<label for="picture2">
<div id="pic2" style="border: 5px solid black;">
<img src="imac_2.jpg" style="float:left;" class="size" alt="iMac">
<p align="right">5</p>
</div>
</label>
<input id="picture2" type="checkbox" name="picture" data-pic="pic2" value="5" onclick="selectPicture(this)">
<label for="picture3">
<div id="pic3" style="border: 5px solid black;">
<img src="coding_img.png" style="float:left;" class="size" alt="iMac">
<p align="right">10</p>
</div>
</label>
<input id="picture3" type="checkbox" name="picture" data-pic="pic3" value="10" onclick="selectPicture(this)">
<label for="picture4">
<div id="pic4" style="border: 5px solid black;">
<img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6">
<p align="right">20</p>
</div>
</label>
<input id="picture4" type="checkbox" name="picture" data-pic="pic4" value="20" onclick="selectPicture(this)">
</div>
</div>
<div class="float-right-area">
<div class="inner-right">
<p align="center">Points: <span id="points">0</span></p>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Image swap with progress bar increase/decrease onclick - javascript

Related

How to Trigger Youtube API Iframe loader using an OnClick function?

How to trim a local video using a Custom Video Trimmer in JQuery?

Show child elements if parent is visible

Insert values at cursor pointer and how to assign to ng-model - Angularjs

How to get the sidebar to not interact?

Categories

Resources