We Keep Coding

How to html5 video duration speed control bypass

I am not a web developer. The institution I work for has online training. in html5 video form. Video acceleration doesn't work. There is a time control. If speeding is detected, the video restarts. Is there any way I can bypass this? The total duration of the trainings is 650 min. It is really hard. I am posting the source code of the video page.
<div style="position:relative">
<input type="hidden" id="pinfo" data-calisankodu="46564064386" data-calisanadsoyad="FATİH KURT" data-egitimkodu="1ae2b8e4-971f-4025-a8e2-97cbc60989bd"
data-egitimadi="2022 Temel İş Sağlığı ve Güvenliği Eğitimi" data-dokumankodu="35c46809-cc58-4806-a5e8-e921d65b8557" data-dosyaadi="01 Genel Konular_202104042129579656.mp4" data-dokumantanimi="01 genel konular"
data-dokumanaciklama="Genel Konular" data-calisanegitimkodu="dad47501-bdd3-4275-a01e-631e77ecc242" data-calisanegitimicerikkodu="d3439fcb-ad6b-41dd-bd87-592ba6f47325"
data-ks="765" data-kontrolkaldigisure="0" data-ts="2768" data-td="27" data-uzanti="mp4" data-vapo="1"
data-vks="0" data-isyerikodu="AEFC7F5C-7FA2-4A9E-83A3-6FED40C4A829" />
<div id="kontrolSorular" class="hidden"></div>
<div id="video-filigram" style="margin-left: 0px;" class="grid-stack hidden"></div>
<video id="dersvideo" playsinline controls preload="auto">
<source src="/UploadedFiles/01 Genel Konular_202104042129579656.mp4" type="video/mp4" size="1080">
Tarayıcınız video oynatmayı desteklemiyor.
And
//Genel değişkenler
var player;
var icerik = {};
var aktifsoru = 0;
var kconfirms = [];
var kontrolsorular = [];
var currenttime = 0;
var kontrolsure = 0;
var completedbefore = false;
var videoarkaplandaoynat = false;
var seektry = false;
var autosavesecond = 120;
var savetries = [];
var savetryconfirmed = false;
var isios = false;
var loadeddata = false;
var ilerisarma = 0;
var zorunluegitim = 1;
var kontrolegitimicerik = "";
var etkilesimliegitimicerik = "";
var EtkilesimliEgitimIzlenecekDokumanKodu = "";
var cevaplanankontrolegitimicerik = [];
var cevaplananetkilesimliegitimicerik = [];
var kontrolegitimiceriksure = -1;
var etkilesimliegitimiceriksure = -1;
var gecensure = 0;
var EgitimTuru = "1";
var VideoIleriSarma = "0";
if (EgitimTuru == "0" || VideoIleriSarma == "1") {
console.log("Video ileri sarma aktif");
ilerisarma = 5;
zorunluegitim = 0;
}
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/g)) {
console.log("iOS device detected");
console.log("Everything is OK.");
isios = true;
}
//Doc Ready
$(document).ready(function () {
//Load lesson content
icerik = {
CalisanKodu: $("#pinfo").attr("data-calisankodu"),
CalisanAdSoyad: $("#pinfo").attr("data-calisanadsoyad"),
EgitimKodu: $("#pinfo").attr("data-egitimkodu"),
EgitimAdi: $("#pinfo").attr("data-egitimadi"),
DokumanKodu: $("#pinfo").attr("data-dokumankodu"),
DosyaAdi: $("#pinfo").attr("data-dosyaadi"),
DokumanTanimi: $("#pinfo").attr("data-dokumantanimi"),
DokumanAciklama: $("#pinfo").attr("data-dokumanaciklama"),
CalisanEgitimKodu: $("#pinfo").attr("data-calisanegitimkodu"),
CalisanEgitimIcerikKodu: $("#pinfo").attr("data-calisanegitimicerikkodu"),
ToplamSure: parseInt($("#pinfo").attr("data-ts")),
KaldigiSure: parseInt($("#pinfo").attr("data-ks")),
KontrolKaldigiSure: parseInt($("#pinfo").attr("data-kontrolkaldigisure")),
TamamlanmaDurum: parseInt($("#pinfo").attr("data-td")),
Tamamlandi: false,
KontrolSure: -1,
EgitimKontrolIcerikKodu: kontrolegitimicerik,
EtkilesimliEgitimIcerikKodu: etkilesimliegitimicerik,
EgitimTuru: EgitimTuru,
GecenSure: 0
};
//Get lesson state
if (icerik.TamamlanmaDurum >= 100) {
completedbefore = true;
icerik.Tamamlandi = true;
}
//Player Install
player = new Plyr('#dersvideo', {
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
settings: ['captions','quality' /*,'speed' */ ],
preload: "auto",
i18n: {
restart: 'Sıfırla',
rewind: 'Kalan {seektime}',
play: 'Başlat',
pause: 'Durdur',
fastForward: 'İleri {seektime}',
seek: 'Aralık',
seekLabel: '{currentTime} of {duration}',
played: 'Oynatılan',
buffered: 'Önbellek',
currentTime: 'Şimdi',
duration: 'Süre',
volume: 'Ses',
mute: 'Sustur',
unmute: 'Sesi Aç',
enableCaptions: 'Altyazı Aç',
disableCaptions: 'Altyazı Kapat',
download: 'İndir',
enterFullscreen: 'Tam Ekran',
exitFullscreen: 'Kapat',
frameTitle: 'Oynatılıyor: {title}',
captions: 'Altyazılar',
settings: 'Ayarlar',
menuBack: 'Geri',
speed: 'Hız',
normal: 'Normal',
quality: 'Kalite',
loop: 'Tekrar',
start: 'Başlangıç',
end: 'Son',
all: 'Tümü',
reset: 'Sıfırla',
disabled: 'Gizle',
enabled: 'Göster',
advertisement: 'Duyuru',
qualityBadge: {
1080: 'Yuksek',
360: 'Dusuk',
},
capture: 'Ekran Görüntüsü'
},
keyboard:{ focused: false, global: false },
seekTime: ilerisarma,
fullscreen: { fallback: false },
listeners: {
seek: function (e) {
seektry = true;
var newTime = _getTargetTime(player, e);
if (newTime > icerik.KaldigiSure && completedbefore == false && zorunluegitim == "1") {
e.preventDefault();
console.log('prevented');
return false;
}
}
}
});
var vh = $(window).innerHeight();
let vw = $(window).innerWidth();
$("#dersvideo").css("height", vh + "px");
$(window).resize(function () {
let vh = $(window).innerHeight();
let vw = $(window).innerWidth();
$("#dersvideo").css("height", vh + "px");
});
$(window).bind("resize", function () {
let vh = $(window).innerHeight();
let vw = $(window).innerWidth();
$("#dersvideo").css("height", vh + "px");
});
//Get backgroundplay config
if ($("#pinfo").attr("data-vapo") == "1") {
videoarkaplandaoynat = true;
}
//Get client control config
if (Number($("#pinfo").attr("data-vks")) > 0) {
kontrolsure = Number($("#pinfo").attr("data-vks"))*60;
} else {
kontrolsure = Number(icerik.KontrolSure);
}
player.on('play', event => {
start();
});
player.on('pause', event => {
stop();
});
if (isios) {
//On play
player.once('play', event => {
console.log("duration: " + parseInt(player.duration) + " - After First Play");
icerik.ToplamSure = parseInt(player.duration);
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? icerik.KaldigiSure : icerik.KontrolKaldigiSure;
});
} else {
//ShowWelcome();
if (icerik.Tamamlandi == false) {
console.log("start lesson");
player.play();
} else {
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? 0 : icerik.KontrolKaldigiSure;
player.play();
}
player.play();
//On player get video data
player.once('loadeddata', event => {
loadeddata = true;
ShowButtons();
});
setTimeout(function () {
}
//player.on('enterfullscreen', event => { console.log(event); });
//player.on('exitfullscreen', event => { console.log(event); });
//Player on time update
player.on('timeupdate', event => {
currenttime = parseInt(player.currentTime);
if (currenttime > icerik.KaldigiSure || icerik.Tamamlandi == true) {
icerik.KaldigiSure = currenttime;
}
//Kontrol süresi özelliği eklendiğinde açılacak.
if (kontrolsure > 0 && player.playing && currenttime > 0 && currenttime % kontrolsure == 0) {
var cfrm = kconfirms.filter(x => x == currenttime);
if (cfrm.length == 0) {
kconfirms.push(currenttime);
player.pause();
}
}
/
// Eğitim Kontrol İçeriği Tetikletme
if (currenttime == kontrolegitimiceriksure && player.playing == true && cevaplanankontrolegitimicerik.indexOf(kontrolegitimicerik) == -1){
$("#video-filigram").removeClass("hidden");
player.pause();
SaveState(false);
$(".jconfirm").remove();
}
// Etkileşimli Eğitim İçeriği Tetikletme
if (currenttime == etkilesimliegitimiceriksure && player.playing == true && cevaplananetkilesimliegitimicerik.indexOf(etkilesimliegitimicerik) == -1) {
player.pause();
SaveState(false);
$(".jconfirm").remove();
window.location.href = "/Calisan/EtkilesimliIcerikViewer/" + etkilesimliegitimicerik + window.location.search + "&etkilesimliegitimicerik=" + etkilesimliegitimicerik + "&kaldigisure=" + player.currentTime + "&isyerikodu=" + $("#pinfo").attr("data-isyerikodu");
}
});
player.on('seeking', event => {
if (zorunluegitim=="0" || icerik.KaldigiSure >= player.currentTime || // video başı mı ?
((parseInt(kontrolegitimiceriksure) != parseInt(player.currentTime) && kontrolegitimiceriksure != -1)) ||
((parseInt(etkilesimliegitimiceriksure) != parseInt(player.currentTime) && etkilesimliegitimiceriksure != -1)) //|| kontrol içeriği var mı ve süre eşit mi ?
//parseInt(player.currentTime) == parseInt(player.duration) // video sonuna gelindi mi ?
//seektry == true
) {
}
else {
SaveState(true);
}
});
//Pause event
player.on('pause', event => {
console.log("paused");
if (parseInt(player.currentTime) == parseInt(player.duration)) {
if (player.currentTime < player.duration && (kontrolegitimiceriksure == -1 || etkilesimliegitimiceriksure == -1) ) {
LessonEnd();
}
//Respect end event
} else if (seektry == true) {
console.log("seektry");
seektry = false;
} else if (!player.fullscreen.active && aktifsoru == 0 && savetryconfirmed == false) {
if (parseInt(kontrolegitimiceriksure) != parseInt(player.currentTime) || parseInt(etkilesimliegitimiceriksure) != parseInt(player.currentTime))
{
$.confirm({
theme: 'supervan',
closeIcon: false,
title: 'Video Duraklatıldı',
content: completedbefore == false ? 'Videoya kaldığınız yerden devam edebilir ya da eğitimi sonlandırabilirsiniz.<br/><br/> <small><i class="fa fa-warning"></i> UYARI <br/> Eğitimi sonlandırırsanız bu içerik tamamlanmamış olarak kaydedilecektir.</small>' : 'Videoya kaldığınız yerden devam edebilir ya da eğitimi sonlandırabilirsiniz.',
typeAnimated: true,
onContentReady: function () {
$(document).on("mousedown touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.25)");
});
$(document).on("mouseup touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.95)");
});
},
buttons: {
basla: {
text: '<i class="fa fa-play" style="margin-right:10px;"></i> Devam Et',
btnClass: 'btn-green',
action: function () {
player.play();
//SaveState(false);
}
},
kapat: {
text: '<i class="fa fa-times" style="margin-right:10px;"></i> Bitir',
btnClass: 'btn-red',
action: function () {
if (completedbefore == true) {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu='+$("#pinfo").attr("data-isyerikodu");
} else {
SaveState(true);
}
}
},
gizle: {
text: '<i class="fa fa-eye-slash" style="margin-right:10px;"></i> Gizle',
btnClass: 'btn-red',
action: function () {
$(".jconfirm").remove();
}
}
}
});
}
}
});
//End event
player.on('ended', event => {
if (((currenttime == kontrolegitimiceriksure || currenttime == icerik.KontrolKaldigiSure) && cevaplanankontrolegitimicerik.length !== 0 && cevaplanankontrolegitimicerik.indexOf(kontrolegitimicerik)) == -1 || ((currenttime == etkilesimliegitimiceriksure || currenttime == icerik.KontrolKaldigiSure) && cevaplananetkilesimliegitimicerik.length !== 0 && cevaplananetkilesimliegitimicerik.indexOf(etkilesimliegitimicerik) == -1)) {
$("#video-filigram").removeClass("hidden");
player.pause();
SaveState(false);
$(".jconfirm").remove();
} else if (currenttime != icerik.KontrolKaldigiSure) {
LessonEnd(/*otomatikdevamet:*/true);
}
});
$(window).on('blur', windowBlurred);
$(window).on('focus', windowFocused);
$(document).on("contextmenu", function () {
return false;
});
$(document).on("click", "#ksCevapla", function () {
var soru = kontrolsorular.find(x => x.ID == "" + aktifsoru);
var vc = $('input[name="ks"]:checked').val();
var msg = "";
if (typeof vc == "undefined") {
alert("Lütfen soruyu cevaplayınız.");
} else if (vc == soru.DOGRUCEVAP) {
msg = "Tebrikler. Doğru Cevap.";
$("#ksmsg").html(msg).removeClass("text-red").addClass("text-green");
soru.SORULDU = true;
soru.VERILENCEVAP = vc;
setTimeout(function () {
HideKs();
player.play();
}, 2000);
} else {
msg = "Üzgünüz. Yanlış cevap.";
msg += soru.AKSIYONZAMAN != "" ? " İlgili bölüme yönlendiriliyor..." : "";
$("#ksmsg").html(msg).removeClass("text-green").addClass("text-red");
soru.SORULDU = true;
soru.VERILENCEVAP = vc;
setTimeout(function () {
HideKs();
if (soru.AKSIYONZAMAN != "") {
player.currentTime = Number(soru.AKSIYONZAMAN);
player.play();
}
}, 3000);
}
});
});
function ShowWelcome() {
//Show welcome message
$.confirm({
theme: 'supervan',
closeIcon: false,
title: 'Sn. ' + icerik.CalisanAdSoyad,
content: '<i class="fa fa-spinner fa-spin"></i> Ders içeriğiniz hazırlanıyor...',
typeAnimated: true,
onContentReady: function () {
if (isios) {
ShowButtons();
}
$(document).on("mousedown touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.25)");
});
$(document).on("mouseup touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.95)");
});
},
buttons: {
basla: {
text: '<i class="fa fa-play" style="margin-right:10px;"></i> Başla',
btnClass: 'btn-green basla actionbtn hidden',
action: function () {
if (icerik.Tamamlandi == false) {
console.log("start lesson");
player.play();
} else {
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? 0 : icerik.KontrolKaldigiSure;
player.play();
}
}
},
kapat: {
text: '<i class="fa fa-times" style="margin-right:10px;"></i> Vazgeç',
btnClass: 'btn-red vazgec actionbtn hidden',
action: function () {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
}
}
}
});
}
function ShowButtons() {
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? icerik.KaldigiSure : icerik.KontrolKaldigiSure;
icerik.ToplamSure = parseInt(player.duration);
var dersInfo = '<b>' + icerik.EgitimAdi + '</b> eğitiminin<br/> <b> ' + icerik.DokumanTanimi + '</b> başlıklı içeriği hazırlandı. <br/><br/> <small><i class="fa fa-warning"></i> UYARI <br/> Video tamamlanmadan çıkmanız halinde eğitiminiz tamamlanmamış olarak kaydedilecektir.</small>';
if (completedbefore) {
dersInfo = '<div><b>' + icerik.EgitimAdi + '</b> eğitiminin<br/> <b> ' + icerik.DokumanTanimi + '</b> başlıklı içeriğini daha önce tamamladınız.<br/><br/> Yeniden izlemek için lütfen Başla butonuna basınız.</div>';
}
$(document).find(".jconfirm-content").html(dersInfo);
$(document).find(".actionbtn").removeClass("hidden");
}
function LessonEnd(otomatikdevamet = false) {
icerik.Tamamlandi = true;
icerik.KaldigiSure = parseInt(player.duration);
if (otomatikdevamet == true) {
SaveState(false);
var url = '/Calisan/VideoViewer/?dk=b0af9b9e-dfdb-4651-8305-bf5891c29633&ek=1ae2b8e4-971f-4025-a8e2-97cbc60989bd&cei=87e3b3d1-1b0e-4fcd-a5ba-2b803c93ac27&cek=dad47501-bdd3-4275-a01e-631e77ecc242&isyerikodu=AEFC7F5C-7FA2-4A9E-83A3-6FED40C4A829';
if (url != "" && url != null && url != undefined) {
var decodedurl = url.replace(/&/g, '&');
window.location.href = decodedurl;
} else {
LessonEnd();
}
} else {
$.confirm({
theme: 'supervan',
closeIcon: false,
title: 'İçerik Tamamlandı',
content: completedbefore == false ? 'Tebrikler. Eğitim içeriğini başarıyla tamamladınız.' : 'Video sona erdi.',
typeAnimated: true,
onOpenBefore: function () {
var SonrakiIcerikDurumu = "1";
if (SonrakiIcerikDurumu != "1") {
$(".sonrakiislemler").remove();
}
},
buttons: {
basla: {
text: '<i class="fa fa-play" style="margin-right:10px;"></i> Eğitim Sayfasına Dön',
btnClass: 'btn-green',
action: function () {
if (completedbefore == true) {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
} else {
SaveState(true);
}
}
},
kapat: {
text: '<i class="fa fa-undo" style="margin-right:10px;"></i> Yeniden İzle',
btnClass: 'btn-green',
action: function () {
player.currentTime = 0;
player.play();
}
},
sonraki: {
text: '<i id="sonrakiislemicon" class="fa fa-step-forward" style="margin-right:10px;"></i> <span id="sonrakiislem"> Sonraki İçerik </span>',
btnClass: 'btn-green sonrakiislemler',
action: function () {
var url = '/Calisan/VideoViewer/?dk=b0af9b9e-dfdb-4651-8305-bf5891c29633&ek=1ae2b8e4-971f-4025-a8e2-97cbc60989bd&cei=87e3b3d1-1b0e-4fcd-a5ba-2b803c93ac27&cek=dad47501-bdd3-4275-a01e-631e77ecc242&isyerikodu=AEFC7F5C-7FA2-4A9E-83A3-6FED40C4A829';
var decodedurl = url.replace(/&/g, '&');
window.location.href = decodedurl;
}
}
}
});
}
}
var kaldigimsure = 0;
function windowBlurred() {
kaldigimsure = player.currentTime.toFixed(0);
if (videoarkaplandaoynat == false) {
player.pause();
//if (kaldigimsure > player.currentTime.toFixed(0)) {
// setTimeout(function () {
// window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
// }, 750);
//}
}
}
function windowFocused() {
if (videoarkaplandaoynat == false) {
//if (kaldigimsure > player.currentTime.toFixed(0)) {
// setTimeout(function () {
// window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
// }, 750);
//}
}
}
function SaveState(exit) {
if (completedbefore == false) {
var maxduration = parseInt(player.duration);
var percentage = 100 * icerik.KaldigiSure / maxduration;
icerik.TamamlanmaDurum = percentage >= 100 ? 100 : parseInt(percentage);
var currentorder = savetries.length;
var savetry = {
order: currentorder,
time: moment().format("DD.MM.YYYY HH:mm:ss"),
duration: currenttime,
state: false,
error: ""
};
savetries.push(savetry);
icerik.IsyeriKodu = $("#pinfo").attr("data-isyerikodu");
icerik.GecenSure = gecensure;
$.ajax({
url: '/Calisan/VideoDurumKaydet',
type: 'POST',
dataType: 'json',
data: icerik,
success: function (data) {
if (data.state) {
savetries[currentorder].state = true;
if (completedbefore == false && icerik.Tamamlandi == true) {
completedbefore = true;
}
if (exit) {
if (data.tumiceriktamam == true && data.sonsinavotomatikbaslat == true) {
alertify.success("Eğitim sınavına yönlendiriliyorsunuz. Lütfen bekleyin.");
setTimeout(function () {
window.location.href = $("#routebase").val() + data.sonsinavhref;
}, 750);
} else {
alertify.success("Eğitim durumu kaydedildi. Lütfen bekleyin.");
setTimeout(function () {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
}, 750);
}
} else {
if (data.tumiceriktamam == true && data.sonsinavotomatikbaslat == true) {
alertify.success("Eğitim sınavına yönlendiriliyorsunuz. Lütfen bekleyin.");
setTimeout(function () {
window.location.href = $("#routebase").val() + data.sonsinavhref;
}, 750);
}
}
} else {
savetries[currentorder].state = false;
savetries[currentorder].error = data.message;
if (data.state == false) {
alertify.error(data.message);
setTimeout(function () {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
}, 1500);
What can we do about it? Please help me. Thank you.

How to turning Javascript snake correctly?

Snake is moving and turning correctly, when it has only one part, after add another part it doesn't like a snake;
I think my problem is in forEach method of full_snake div.
How to write the coordinates of each child in full_snake during the turn so that only the first child moves and the rest follow in its footsteps.
Directions work with this code, but all children have the same coordinates in the turn functions.
How to solve this?
This's my code:
class Snake {
snake_box = document.getElementById('snakeBox');
full_snake = document.getElementById('snake');
snakeLength = [];
snake;
x = 0;
y = 0
snakeMoveLeft;
snakeLeft = false;
snakeMoveRight;
snakeRight = true;
snakeMoveUp;
snakeUp = false;
snakeMoveDown;
snakeDown = false;
constructor() {
this.snakeLength.push('',);
this._createSnake();
this._moveSnake();
}
_createSnake() {
for (let i = 0; i < this.snakeLength.length; i++) {
this.snake = document.createElement('div');
this.snake.style.width = '1rem';
this.snake.style.height = '1rem';
this.snake.style.position = 'absolute';
this.snake.style.backgroundColor = 'green';
this.snake.style.marginLeft = '.1rem';
}
this.full_snake.appendChild(this.snake);
}
_moveSnake() {
this.full_snake.style.left = this.x + 'px';
this.full_snake.style.top = this.y + 'px';
this.snakeMoveLeft = setInterval(() => {
this.x += 20;
this.full_snake.style.left = this.x + 'px';
}, 500);
}
_turnLeft() {
this.snakeLeft = true;
this.snakeRight = false;
this.snakeUp = false;
this.snakeDown = false;
clearInterval(this.snakeMoveUp);
clearInterval(this.snakeMoveDown)
this.snakeMoveLeft = setInterval(() => {
this.full_snake.childNodes.forEach(e => {
this.x -= 20;
e.style.left = this.x + 'px';
})
}, 500);
}
_turnRight() {
this.snakeRight = true;
this.snakeLeft = false;
this.snakeUp = false;
this.snakeDown = false;
clearInterval(this.snakeMoveDown)
clearInterval(this.snakeMoveUp);
this.snakeMoveRight = setInterval(() => {
this.full_snake.childNodes.forEach(e => {
this.x += 20;
e.style.left = this.x + 'px';
})
}, 500);
}
_turnUp() {
this.snakeUp = true;
this.snakeLeft = false;
this.snakeRight = false;
this.snakeDown = false;
clearInterval(this.snakeMoveRight);
clearInterval(this.snakeMoveLeft);
this.snakeMoveUp = setInterval(() => {
this.full_snake.childNodes.forEach(e => {
this.y -= 20;
e.style.top = this.y + 'px';
})
}, 500);
}
_turnDown() {
this._createSnake();
this.snakeDown = true;
this.snakeUp = false;
this.snakeLeft = false;
this.snakeRight = false;
clearInterval(this.snakeMoveLeft);
clearInterval(this.snakeMoveRight)
this.snakeMoveDown = setInterval(() => {
this.y += 20;
this.full_snake.style.top = this.y + 'px';
}, 500)
}
_move() {
document.addEventListener('keydown', e => {
if (e.key === 'ArrowUp') {
if (this.snakeLeft === true || this.snakeRight === true) {
this._turnUp();
}
}
});
document.addEventListener('keydown', e => {
if (e.key === 'ArrowDown') {
if (this.snakeLeft === true || this.snakeRight === true) {
this._turnDown();
}
}
})
document.addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') {
if (this.snakeLeft === false && this.snakeRight === false) {
this._turnLeft();
}
}
});
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight') {
if (this.snakeLeft === false && this.snakeRight === false) {
this._turnRight();
}
}
})
}
}
new Snake()._move();

Links doesn't work on mobile / touch devices

I use XSwitch.js at my project and everything is perfect in Desktop view. But when I try to open the link from mobile / touch device seems like nothing happens. It's at 100% not a problem of z-index and positioning. As you can see if you try to click on the Example link on any section you'll can't open the link from mobile. / touch. I tested the issue with iPhone X, Galaxy Tab and Chrome Dev tools. I broke my head of trying to solve this bug and would much appreciate any help. Thanks!
(function($) {
$.fn.XSwitch = function(options) {
return this.each(function() {
var _this = $(this),
instance = _this.data('XSwitch');
if (!instance) {
instance = new XSwitch(_this, options);
_this.data('XSwitch', instance);
}
if ($.type(options) === 'string') {
return instance[options]();
}
});
}
$.fn.XSwitch.defaults = {
selectors: {
sections: '.sections',
section: '.section',
page: '.pages',
active: '.active'
},
index: 0,
easing: 'ease',
duration: 500,
loop: true,
pagination: true,
keyboard: true,
direction: 'vertical',
callback: ''
}
var _prefix = (function(temp) {
var aPrefix = ['webkit', 'moz', 'o', 'ms'],
props = '';
for (var i = 0, len = aPrefix.length; i < len; i++) {
props = aPrefix[i] + 'Transition';
if (temp.style[props] !== undefined) {
return '-' + aPrefix[i].toLowerCase() + '-';
}
return false;
}
})(document.createElement('div'));
var XSwitch = (function() {
function XSwitch(element, options) {
this.settings = $.extend(true, $.fn.XSwitch.defaults, options);
this.element = element;
this.init();
}
XSwitch.prototype = {
init: function() {
var _this = this;
this.selectors = this.settings.selectors;
this.sections = this.element.find(this.selectors.sections);
this.section = this.sections.find(this.selectors.section);
this.direction = this.settings.direction === 'vertical' ? true : false;
this.pagesCount = this.pagesCount();
this.index = (this.settings.index >= 0 && this.settings.index < this.pagesCount) ? this.settings.index : 0;
this.canScroll = true;
if (!this.direction) {
_initLayout(_this);
}
if (this.settings.pagination) {
_initPaging(_this);
}
_initEvent(_this);
},
pagesCount: function() {
return this.section.size();
},
switchLength: function() {
return this.duration ? this.element.height() : this.element.width();
},
prve: function() {
var _this = this;
if (this.index > 0) {
this.index--;
} else if (this.settings.loop) {
this.index = this.pagesCount - 1;
}
_scrollPage(_this);
},
next: function() {
var _this = this;
if (this.index < this.pagesCount) {
this.index++;
} else if (this.settings.loop) {
this.index = 0;
}
_scrollPage(_this);
}
};
function _initLayout(_this) {
var width = (_this.pagesCount * 100) + '%',
cellWidth = (100 / _this.pagesCount).toFixed(2) + '%';
_this.sections.width(width);
_this.section.width(cellWidth).css('float', 'left');
}
function _initPaging(_this) {
var pagesClass = _this.selectors.page.substring(1),
pageHtml = '<ul class="' + pagesClass + '">';
_this.activeClass = _this.selectors.active.substring(1);
for (var i = 0, len = _this.pagesCount; i < len; i++) {
pageHtml += '<li></li>';
}
pageHtml += '</ul>';
_this.element.append(pageHtml);
var pages = _this.element.find(_this.selectors.page);
_this.pageItem = pages.find('li');
_this.pageItem.eq(_this.index).addClass(_this.activeClass);
if (_this.direction) {
pages.addClass('vertical');
} else {
pages.addClass('horizontal');
}
}
function _initEvent(_this) {
_this.element.on('click touchstart', _this.selectors.page + ' li', function() {
_this.index = $(this).index();
_scrollPage(_this);
});
_this.element.on('mousewheel DOMMouseScroll', function(e) {
if (!_this.canScroll) {
return;
}
var delta = -e.originalEvent.detail || -e.originalEvent.deltaY || e.originalEvent.wheelDelta;
if (delta > 0 && (_this.index && !_this.settings.loop || _this.settings.loop)) {
_this.prve();
} else if (delta < 0 && (_this.index < (_this.pagesCount - 1) && !_this.settings.loop || _this.settings.loop)) {
_this.next();
}
});
_this.element.on('touchstart', function(e) {
var startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
_this.element.one('touchend', function(e) {
if (!_this.canScroll) {
return;
}
var endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY,
changeY = endY - startY;
if (changeY > 50) {
_this.prve();
} else if (changeY < -50) {
_this.next();
}
});
e.preventDefault();
});
if (_this.settings.keyboard) {
$(window).on('keydown', function(e) {
var keyCode = e.keyCode;
if (keyCode === 37 || keyCode === 38) {
_this.prve();
} else if (keyCode === 39 || keyCode === 40) {
_this.next();
}
});
}
$(window).resize(function() {
var currentLength = _this.switchLength(),
offset = _this.settings.direction ? _this.section.eq(_this.index).offset().top : _this.section.eq(_this.index).offset().left;
if (Math.abs(offset) > currentLength / 2 && _this.index < (_this.pagesCount - 1)) {
_this.index++;
}
if (_this.index) {
_scrollPage(_this);
}
});
_this.sections.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() {
_this.canScroll = true;
if (_this.settings.callback && type(_this.settings.callback) === 'function') {
_this.settings.callback();
}
});
}
function _scrollPage(_this) {
var dest = _this.section.eq(_this.index).position();
if (!dest) {
return;
}
_this.canScroll = false;
if (_prefix) {
_this.sections.css(_prefix + 'transition', 'all ' + _this.settings.duration + 'ms ' + _this.settings.easing);
var translate = _this.direction ? 'translateY(-' + dest.top + 'px)' : 'translateX(-' + dest.left + 'px)';
_this.sections.css(_prefix + 'transform', translate);
} else {
var animateCss = _this.direction ? {
top: -dest.top
} : {
left: -dest.left
};
_this.sections.animate(animateCss, _this.settings.duration, function() {
_this.canScroll = true;
if (_this.settings.callback && type(_this.settings.callback) === 'function') {
_this.settings.callback();
}
});
}
if (_this.settings.pagination) {
_this.pageItem.eq(_this.index).addClass(_this.activeClass).siblings('li').removeClass(_this.activeClass);
}
}
return XSwitch;
})();
})(jQuery);
$(function() {
$('[data-XSwitch]').XSwitch();
})
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
#container,
.sections,
.section {
position: relative;
height: 100%;
}
.section {
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
#section0 {
background-color: grey;
}
#section1 {
background-color: red;
}
#section2 {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="container" data-XSwitch>
<div class="sections">
<div class="section" id="section0">
Example Link
</div>
<div class="section" id="section1">
Example Link
</div>
<div class="section" id="section2">
Example Link
</div>
<div class="section" id="section3">
Example Link
</div>
</div>
</div>

So I've found an issue - just commented this code:
_this.element.on('touchstart', function (e) {
var startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
_this.element.one('touchend', function (e) {
if (!_this.canScroll) {
return;
}
var endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY,
changeY = endY - startY;
if (changeY > 50) {
_this.prve();
} else if (changeY < -50) {
_this.next();
}
});
/* e.preventDefault(); */
});

oPaging is undefined with datatables and twitter-bootstrap

On a project, I use datatables 1.10.2 with, to have pagination with bootstrap style, this script :
$.extend($.fn.dataTableExt.oPagination, {
bootstrap: {
fnInit: function(oSettings, nPaging, fnDraw) {
var els, fnClickHandler, oLang;
oLang = oSettings.oLanguage.oPaginate;
fnClickHandler = function(e) {
e.preventDefault();
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
return fnDraw(oSettings);
}
};
$(nPaging).addClass("pagination").append("<ul>" + "<li class=\"prev disabled\">← " + oLang.sPrevious + "</li>" + "<li class=\"next disabled\">" + oLang.sNext + " → </li>" + "</ul>");
els = $("a", nPaging);
$(els[0]).bind("click.DT", {
action: "previous"
}, fnClickHandler);
return $(els[1]).bind("click.DT", {
action: "next"
}, fnClickHandler);
},
fnUpdate: function(oSettings, fnDraw) {
var an, i, iEnd, iHalf, iListLength, iStart, ien, j, oPaging, sClass, _results;
oPaging = oSettings.oInstance.fnPagingInfo();
iListLength = 5;
an = oSettings.aanFeatures.p;
i = void 0;
ien = void 0;
j = void 0;
sClass = void 0;
iStart = void 0;
iEnd = void 0;
iHalf = Math.floor(iListLength / 2);
if (oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
} else if (oPaging.iPage <= iHalf) {
iStart = 1;
iEnd = iListLength;
} else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
i = 0;
ien = an.length;
_results = [];
while (i < ien) {
$("li:gt(0)", an[i]).filter(":not(:last)").remove();
j = iStart;
while (j <= iEnd) {
sClass = (j === oPaging.iPage + 1 ? "class=\"active\"" : "");
$("<li " + sClass + ">" + j + "</li>").insertBefore($("li:last", an[i])[0]).bind("click", function(e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($("a", this).text(), 10) - 1) * oPaging.iLength;
return fnDraw(oSettings);
});
j++;
}
if (oPaging.iPage === 0) {
$("li:first", an[i]).addClass("disabled");
} else {
$("li:first", an[i]).removeClass("disabled");
}
if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
$("li:last", an[i]).addClass("disabled");
} else {
$("li:last", an[i]).removeClass("disabled");
}
_results.push(i++);
}
return _results;
}
}
});
if ($.fn.DataTable.TableTools) {
$.extend(true, $.fn.DataTable.TableTools.classes, {
container: "DTTT btn-group",
buttons: {
normal: "btn",
disabled: "disabled"
},
collection: {
container: "DTTT_dropdown dropdown-menu",
buttons: {
normal: "",
disabled: "disabled"
}
},
print: {
info: "DTTT_print_info modal"
},
select: {
row: "active"
}
});
$.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
collection: {
container: "ul",
button: "li",
liner: "a"
}
});
}
}).call(this);
It works when I have a single datatable but when I have multiple datatables it break at the line if (oPaging.iTotalPages < iListLength) {. I seen than oSettings.oInstance is null for all datatables expect the last one.
What can I do to make it working?

add the plugin below
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};

Shift an array and rendering it in a html list

Using the following script I am not able to swift and set the focus for an array back in the list when clicking PREV.
It should work as this example:
http://jsfiddle.net/QAsQj/2/
my code here
http://jsfiddle.net/Eq4js/
Could you point me out what am I doing wrong here, I would appreciate a sample of code on
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.focus { color: red; }
</style>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function() {
var snippet = {
index: 0,
indexNew: 0,
start: 0,
$el: 'div.snippet-categories',
config: {
itemsVisible: 4
},
data: {
items: {
models: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
navigate: function(direction) {
if (direction === 'right') {
if (this.index < this.config.itemsVisible - 1) {
if (this.index < this.config.itemsVisible - 1) {
this.index++;
var result = '#' + this.index + '';
$('li.focus').removeClass('focus');
$(result).addClass('focus');
} else {
this.start++;
}
} else {
if (this.start < this.data.items.models.length - this.config.itemsVisible) {
this.start++;
this.renderItems();
var result = '#' + (this.config.itemsVisible - 1 + this.start) + '';
$('li.focus').removeClass('focus');
$(result).addClass('focus');
}
}
}
else if (direction === 'left') {
if (this.index > this.config.itemsVisible - 1) {
if (this.index > this.config.itemsVisible - 1) {
this.index--;
(Focus.to(this.getFocusable(-1, true)));
} else {
this.start++;
}
} else {
if (this.start > this.data.items.models.length - this.config.itemsVisible) {
this.index--;
this.renderItems();
} else {
}
}
}
},
render: function() {
this.renderItems();
},
renderItems: function(reverse) {
var reverse = reverse || false;
var html = '', result = '', subset = null;
var range = this.data.items.models;
var limit = range.length - this.config.itemsVisible;
if (this.indexNew !== null) {
if (reverse === false) {
} else {
}
subset = range.slice(this.start, this.start + this.config.itemsVisible);
var i = 0;
while (i < subset.length) {
var x = subset[i];
result += '<li id="' + this.data.items.models[x] + '" data-idx="' + this.data.items.models[x] + '" class="focusable">' + this.data.items.models[x] + '</li>';
i++;
}
html = result + '</ul>';
var el = $(this.$el);
el.empty();
el.append(html);
} else {
console.log('limit STOP');
}
},
};
snippet.render();
$('#next').click(function() {
snippet.navigate("right");
});
$('#prev').click(function() {
snippet.navigate("left");
});
});
</script>
</head>
<body>
<div class="snippet-categories"></div>
<div id="prev">prev</div>
<div id="next">next</div>
</body>
</html>
This question is related to
Are you able to solve it? JavaScript carousel implementation using an array

Finally I solved it
Algo example here
http://jsfiddle.net/QwATR/
Snippet_Categories = (function(Snippet) {
var Snippet_Categories = function() {
this.config = {
curPos: 0, // index for selected element
itemVisible: 4, // number of items visible
minIndex: 0, // define visible area start
maxIndex: 4 - 1, // define visible area end = "itemVisible -1"
outItems: 0 // number of element out of visible area
};
this.data = {
items: arguments[1].items
};
this.construct.apply(this, arguments);
};
$.extend(true, Snippet_Categories.prototype, Snippet.prototype, {
init: function() {
this.index = 0; // set default index
this.indexNew = 0; // set next index
this.start = 0;
this.render();
},
create: function() {
return this.parent.$el.find('.snippet-categories');
},
removeFocus: function() {
var test = $('li.focus');
Focus.blur(test);
//$('li.focus').removeClass('focus');
},
focus: function() {
//$('ul > li:eq(' + this.config.curPos + ')').addClass('focus');
var test = $('ul > li:eq(' + this.config.curPos + ')');
return Focus.to(test, true);
},
render: function() {
//debugger
this.renderItems();
this.focus();
},
renderItems: function() {
var html = '<ul>';
for (var i = 0; i < this.config.itemVisible; i++) {
html += '<li data-idx="' + this.data.items.at(i + this.config.outItems).get('id') + '" class="">' + this.data.items.at(i + this.config.outItems).get('label') + '</li>';
}
html += '</ul>';
$('.snippet-categories').empty();
$('.snippet-categories').html(html);
},
navigate: function(direction) {
if (direction === 'right') {
if (this.config.curPos < this.config.maxIndex)
{
this.removeFocus();
if (this.config.curPos < this.config.maxIndex)
this.config.curPos++;
else
{
this.config.outItems++;
}
} else {
if (this.config.outItems < this.data.items.length - this.config.itemVisible)
this.config.outItems++;
}
this.renderItems();
this.focus();
}
else if (direction === 'left') {
if (this.config.curPos > this.config.minIndex)
{
this.removeFocus();
if (this.config.curPos > this.config.minIndex)
this.config.curPos--;
else
{
this.config.clicks--;
}
} else {
if (this.config.outItems > 0)
this.config.outItems--;
}
this.renderItems();
this.focus();
}
},
onFocus: function() {
//this.index = parseInt(Focus.focused[0].dataset.idx, 10);
console.log('element in focus ' + this.index);
}
});
return Snippet_Categories;
})(Snippet);