We Keep Coding

JavaScript: Change text color depending on video.currentTime

I have created navigation buttons for my video, some sort of timestamps that allow a user to jump to a certain moment in the video on click. The buttons change their color whenever they are clicked and the value of video.currentTime is in a particular range. When one button is red, the rest must be white ofcourse.
Take a look at my codepen: https://codepen.io/anon/pen/VRZPEP
My solution does work. However, I feel like it's too complicated and the feature could be done much simpler and with less code.
The important bit of javascript is under the //VIDEO NAV BUTTON FUNCTION header.
I'm just wondering if there's any way I could get rid of the changeToWhite() function? For example, by using some method making the button red only when the video.currentTime finds itself within a particular range?
var DOMstrings = {
nav_btn: document.querySelector('.navbar-button'),
nav_btn_mobile: document.querySelector('.navbar-toggler'),
nav_list: document.querySelector('#wrapper-for-list'),
//video
video: document.querySelector('#myVideo'),
//video-nav-buttons
nav_btn_1: document.querySelector('.video-nav h1:nth-child(1)'),
nav_btn_2: document.querySelector('.video-nav h1:nth-child(2)'),
nav_btn_3: document.querySelector('.video-nav h1:nth-child(3)'),
nav_btn_4: document.querySelector('.video-nav h1:nth-child(4)'),
nav_btn_5: document.querySelector('.video-nav h1:nth-child(5)')
}
//VIDEO NAV BUTTON FUNCTION
var navigateVideo = function() {
var video_nav = [DOMstrings.nav_btn_1, DOMstrings.nav_btn_2, DOMstrings.nav_btn_3, DOMstrings.nav_btn_4, DOMstrings.nav_btn_5]
var setTime = function(time) {
DOMstrings.video.currentTime = time;
};
var changeToWhite = function() {
video_nav.forEach(function(cur) {
cur.style.color = "white";
});
};
DOMstrings.video.addEventListener('timeupdate', function() {
var cur = DOMstrings.video.currentTime;
if (cur >= 0 && cur < 5) {
changeToWhite();
DOMstrings.nav_btn_1.style.color = "red";
} else if (cur > 5 && cur < 10) {
changeToWhite();
DOMstrings.nav_btn_2.style.color = "red";
} else if (cur > 10 && cur < 15) {
changeToWhite();
DOMstrings.nav_btn_3.style.color = "red";
} else if (cur > 15 && cur < 20) {
changeToWhite();
DOMstrings.nav_btn_4.style.color = "red";
} else if (cur > 25) {
changeToWhite();
DOMstrings.nav_btn_5.style.color = "red";
}
});
DOMstrings.nav_btn_1.addEventListener('click', function(e) {
setTime(0);
changeToWhite();
e.target.style.color = "red";
});
DOMstrings.nav_btn_2.addEventListener('click', function(e) {
setTime(15);
changeToWhite();
e.target.style.color = "red";
});
DOMstrings.nav_btn_3.addEventListener('click', function(e) {
setTime(30);
changeToWhite();
e.target.style.color = "red";
});
DOMstrings.nav_btn_4.addEventListener('click', function(e) {
setTime(45);
changeToWhite();
e.target.style.color = "red";
});
DOMstrings.nav_btn_5.addEventListener('click', function(e) {
setTime(60);
changeToWhite();
e.target.style.color = "red";
});
};

You could simplify this a little by renaming changeToWhite() to changeToRed(button):
const changeToRed = (button) => {
video_nav.forEach(cur => {
button.style.color = (cur === button) ? 'red' : 'white';
})
}
Then pass in each button when you call it:
changeToRed(DOMstrings.nav_btn_1);
// Previously:
// changeToWhite();
// DOMstrings.nav_btn_1.style.color = "red";
A few other things: You could make a single function that takes in a time in seconds instead of repeating the same function 5 times:
function handleClick(seconds) {
return function(e) {
setTime(seconds);
changeToRed(e.target);
}
}
DOMstrings.nav_btn_1.addEventListener('click', handleClick(0));
DOMstrings.nav_btn_2.addEventListener('click', handleClick(15));
DOMstrings.nav_btn_3.addEventListener('click', handleClick(30));
...etc
You could also get rid of the if/else block by doing this instead:
const cur = DOMstrings.video.currentTime;
// Divide the current time by 5 and round down, so 0-4 seconds
// would use index 0 (nav_btn_1), 5-9 seconds would use index
// 1 (nav_btn_2), etc
const buttonIndex = Math.floor(cur / 5);
changeToRed(video_nav[buttonIndex]);

You can consolidate logic in the timeUpdate listener, and you could also eliminate much repetition in the click listeners by replacing them all with a single click listener on the buttons' parent element. (This works because of event bubbling.) Altogether, it might look something like:
// Selectors
const video = document.querySelector("#myVideo");
const videoNav = document.querySelector(".video-nav");
const buttons = document.querySelectorAll(".video-nav button");
//Bindings
video.addEventListener("timeupdate", updateTime);
videoNav.addEventListener("click", conditionallySetTime);
//Listeners
function updateTime(event){
const time = event.target.time;
buttons.forEach(function(button, index){
button.style.color = index == Math.floor(time/15) ? "red" : "white"
});
}
function conditionallySetTime(event){
if(event.target.tagName == button){ // Now we care about this click
buttons.forEach(function(button, index){
if(event.target == button){
button.style.color = "red";
setTime(index * 15); // If 1st button is 0, 2nd is 15, etc.
}
else {
button.style.color = "white";
}
}
}
}

js / css flip card game bug in shuffle function

I have created a js memory game. It has a 24-card grid, and it is supposed to shuffle randomly out of a deck of 15 cards in order to create a little variety. The game should be different every time. However, at random the game shuffles the initial deck and builds the board with 11 pairs and one non-pair of cards. Here's the whole js file:
`var score;
var cardsmatched;
var ui = $("#gameUI");
var uiIntro =$("#gameIntro");
var uiStats = $("# gameStats");
var uiComplete = $("#gameComplete");
var uiCards = $("#cards");
var uiScore = $(".gameScore");
var uiReset = $(".gameReset");
var uiPlay = $("#gamePlay");
var uiTimer = $("#timer");
var matchingGame = {};
matchingGame.deck = ['grilledfish', 'grilledfish','barbacoa', 'barbacoa','tripa', 'tripa','bajafish', 'bajafish','carneasada', 'carneasada','carnitas', 'carnitas', 'chorizoasado','chorizoasado','shrimptaco','shrimptaco','decabeza','decabeza','alpastor', 'alpastor','dorados','dorados', 'lengua','lengua','chicharron','chicharron','sudados','sudados', 'polloasado','polloasado',];
$(function(){
init();
});
function init() {
uiComplete.hide();
uiCards.hide();
playGame = false;
uiPlay.click(function(e){
e.preventDefault();
uiIntro.hide();
startGame();
});
uiReset.click(function(e){
e.preventDefault();
uiComplete.hide();
reStartGame();
});
}
function startGame(){
uiTimer.show();
uiScore.html("0 seconds");
uiStats.show();
uiCards.show();
score = 0;
cardsmatched= 0;
if (playGame == false) {
playGame = true;
matchingGame.deck.sort(shuffle);
for (var i=0; i<25; i++){
$(".card:first-child").clone().appendTo("#cards");
}
uiCards.children().each(function(index) {
$(this).css({
"left" : ($(this).width() + 20) * (index % 6),
"top" : ($(this).height() + 20) * Math.floor(index / 6)
});
var pattern = matchingGame.deck.pop();
$(this).find(".back").addClass(pattern);
$(this).attr("data-pattern",pattern);
$(this).click(selectCard);
});
timer();
};
}
function timer(){
if (playGame){
scoreTimeout = setTimeout(function(){
uiScore.html(++score = "seconds");
timer();
}, 1000);
};
};
function shuffle() {
return 0.5 - Math.random();
}
function selectCard(){
if($(".card-flipped").size()> 1){
return;
}
$(this).addClass("card-flipped");
if($(".card-flipped").size() == 2) {
setTimeout(checkPattern, 1000);
};
};
function checkPattern(){
if (isMatchPattern()) {
$(".card-flipped").removeClass("card-flipped").addClass("card-removed");
if(document.webkitTransitionEnd){
$(".card-removed").bind("webkitTransitionEnd", removeTookCards);
}else{
removeTookCards();
} else {
$(".card-flipped").removeClass("card-flipped");
}
}
function isMatchPattern(){
var cards = $(".card-flipped");
var pattern = $(cards[0]).data("pattern");
var anotherPattern = $(cards[1]).data("pattern");
return (pattern == anotherPattern);
}
function removeTookCards() {
if (cardsmatched < 12) {
cardsmatched++;
$(".card-removed").remove();
}else{
$(".card-removed").remove();
uiCards.hide();
uiComplete.show();
clearTimeout(scoreTimeout);
}
}
function reStartGame(){
playGame = false;
uiCards.html("<div class='card'><div class='face front'></div><div class='face back'></div></div>");
clearTimeout(scoreTimeout);
matchingGame.deck = ['grilledfish', 'grilledfish','barbacoa', 'barbacoa','tripa', 'tripa','bajafish', 'bajafish','carneasada', 'carneasada','carnitas', 'carnitas', 'chorizoasado','chorizoasado','shrimptaco','shrimptaco','decabeza','decabeza','alpastor', 'alpastor','dorados','dorados', 'lengua','lengua','chicharron','chicharron','sudados','sudados', 'polloasado','polloasado',];
startGame();
}
`

This Javascript function keeps looping, how can i make it run once?

The code is meant to animated some text in a typing fashion. I want it to run once, but it keeps looping through the area of sentences. How would i go about stopping it looping through. The top of the code gathers the value of a input and puts into the array, this all works fine. It is just the looping i am having issues with.
var yourWord = document.getElementById("myText").value;
var yourtext = "I took the word " + yourWord + "...";
var infomation = [yourtext,
'I looked at the most relevant news article relating to it...',
'And created this piece of art from the words in the article! '
],
part,
i = 0,
offset = 0,
pollyLen = Polly.length,
forwards = true,
skip_count = 0,
skip_delay = 5,
speed = 100;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= infomation[i].length) {
++skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
} else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= pollyLen) {
i = 0;
}
}
}
part = infomation[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
} else {
offset--;
}
}
$('#pollyInfo').text(part);
}, speed);
};
$(document).ready(function () {
wordflick();
});

Modify the line:
setInterval(function () {
into:
var interval = setInterval(function () {
and then clear the interval where you are setting i=0;
if (i >= pollyLen) {
i = 0;
}
to:
if (i >= pollyLen) {
i = 0;
clearInterval(interval);
}
This should do the job!

PageRevealEffects connect to navbar

Hello all of the knowers of javascript,
I have a little problem about javascript and would like one of you to help me to solve the problem.
If you know the 'PageRevealEffects' plugin there are multiple pages that in one HTML are turning on by javascript.
Here are the plugin documentation and demo version at the bottom of documentation: https://tympanus.net/codrops/2016/06/01/multi-layer-page-reveal-effects/
So my problem is I want to connect the navbar and logo click to the plugin,
http://bagrattam.com/stackoverflow/PageRevealEffects/
Here is the code by which it works
(function() {
$('.navbar-brand').click(function(){
$(this).data('clicked', true);
});
var n;
$('#nav a').click(function () {
n = $(this).parent().index() + 1;
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector('.navbar-brand').addEventListener('click', function() { reveal('bottom'); });
var navli = document.getElementsByTagName("ul");
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener('click', function() { reveal('top'); });
}
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if ($('.navbar-brand').data('clicked')) {
currentPage = 0;
} else {
currentPage = n;
}
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
})();

http://bagrattam.com/stackoverflow/PageRevealEffects/
Here is the solution
var n;
$('#navbar a').click(function(){
if($(this).attr('id') == 'a') {
n = 0;
} else if($(this).attr('id') == 'b') {
n = 1;
} else if($(this).attr('id') == 'c') {
n = 2;
} else if($(this).attr('id') == 'd') {
n = 3;
} else if($(this).attr('id') == 'e') {
n = 4;
};
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector("#a").addEventListener('click', function() { reveal('top'); });
document.querySelector("#b").addEventListener('click', function() { reveal('top'); });
document.querySelector("#c").addEventListener('click', function() { reveal('top'); });
document.querySelector("#d").addEventListener('click', function() { reveal('top'); });
document.querySelector("#e").addEventListener('click', function() { reveal('top'); });
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
classie.remove(pages[currentPage], 'page--current');
currentPage = n;
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}

Js and Divs, (even <div> is difference)

I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};

Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});

finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.