Develop Reference

Swiper JS, swiper.destroy() doesnt work and I cant find the issue

I am trying to use Swiper JS and can't find a way to destroy the swiper when needed and using the function with $(window).resize()
Please tell me what can be the issue.
Here is my code:
$(document).ready(() => {
initTopInfoContainerSwiper()
}
$(window).resize(() => {
initTopInfoContainerSwiper()
}
let swiperInitParam = true;
let swiperDestroyParam = false;
const initTopInfoContainerSwiper = () => {
const swiper = new Swiper('#js__swipper-top-wrapper-index', {
init: false,
speed: 400,
slidesPerView: 1,
centerInsufficientSlides: true,
spaceBetween: 15,
loop: true,
});
if (window.innerWidth <= 1000) {
if (swiperInitParam) {
swiper.init();
swiperInitParam = false;
swiperDestroyParam = true;
}
}
else {
if (swiperDestroyParam) {
swiper.destroy()
swiperDestroyParam = false;
swiperInitParam = true;
}
}
}
I tried to all of this methods but none worked
if (window.innerWidth <= 1000) {
if (swiperInitParam) {
swiper.init();
swiper.enable();
swiperInitParam = false;
swiperDestroyParam = true;
}
}
else {
if (swiperDestroyParam) {
swiper.loop = false;
swiper.allowTouchMove = false;
swiper.enable = false;
swiper.enabled = false;
swiper.disable = true;
swiper.disabled = true;
swiper.allowClick = false;
swiper.allowSlidePrev = false;
swiper.allowSlideNext = false;
swiper.allowClick = false;
swiper.initialized = false;
swiper.init()
swiperDestroyParam = false;
swiperInitParam = true;
}
}
Please Help

First of all, you are calling initTopInfoContainerSwiper() on every resize. That is not a good option when you probalby just want to listen to a specific viewport width. Instead you could do something like this:
const mediaQuery = window.matchMedia(`(min-width: 1000px)`)
mediaQuery.addEventListener('change', () => {
initSwiper()
})
To destroy the swiper, you can simply say
if (window.innerWidth <= 1000) {
swiper.init();
}
else {
swiper.destroy(true, true)
}
(see here for more information).
And i also think there is no need for swiperInitParam and swiperDestroyParam unless you are accessing them somewhere else.

Understanding callback function differences

My code:
checkIsMotoOrEcomerce: function(booAnim) {
var objIsEcmOrMto = $('.isMotoOrEcm'),
objEcom = objIsEcmOrMto.filter('[name="ecommerce"]'),
objMoto = objIsEcmOrMto.filter('[name="moto"]'),
objMotoBox = $('.motoBox'),
objEcmBox = $('.apiIntegrationBox'),
strBehaviorShow,
strBehaviorHide,
objMain = this;
if (booAnim) {
strBehaviorShow = 'slideDown';
strBehaviorHide = 'slideUp';
} else {
strBehaviorShow = 'show';
strBehaviorHide = 'hide';
}
if (objEcom.is(':checked')) {
objEcmBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible());
} else {
objEcmBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible());
}
if (objMoto.is(':checked')) {
objMotoBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible());
} else {
objMotoBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible());
}
},
checkIsMotoOrEcmVisible: function() {
var objMotoBox = $('.motoBox'),
objEcmBox = $('.apiIntegrationBox');
if (objMotoBox.is(':visible') && !objEcmBox.is(':visible')) {
console.log('moto');
} else if (!objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('eccomerce');
} else if (objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('both');
} else {
console.log('none');
}
}
I cannot understand why this is working on first run, but when I'm running second time then its returning error "Uncaught TypeError: undefined is not a function".
When I am using this code:
if (objEcom.is(':checked')) {
objEcmBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible);
} else {
objEcmBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible);
}
if (objMoto.is(':checked')) {
objMotoBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible);
} else {
objMotoBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible);
}
It not returning any errors but working only on first run.
Can you help me understand the differences between using objMain.checkIsMotoOrEcmVisible() and objMain.checkIsMotoOrEcmVisible
Why when I put function name instead calling object propety, everything seams to work?
function blabla() {
var objMotoBox = $('.motoBox'),
objEcmBox = $('.apiIntegrationBox');
if (objMotoBox.is(':visible') && !objEcmBox.is(':visible')) {
console.log('moto');
} else if (!objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('eccomerce');
} else if (objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('both');
} else {
console.log('none');
}
}
if (objEcom.is(':checked')) {
objEcmBox[strBehaviorShow](blabla());
} else {
objEcmBox[strBehaviorHide](blabla());
}
if (objMoto.is(':checked')) {
objMotoBox[strBehaviorShow](blabla());
} else {
objMotoBox[strBehaviorHide](blabla());
}

Javascript - Object not a collection

i try to create an video object with activex but i take this error : "Object not a collection". This is my code and error begins on line "this.parts = null;". There may be other things which causes error before this line. I search on the Net about this error but there is no example to solve it.
function detailKeyPress(evt) {
var evtobj=window.event? event : evt;
switch (evtobj.keyCode) {
case KEYS.OK:
if (player.isFullScreen == false)
player.makeFullScreen();
else
player.makeWindowed();
break;
case KEYS.PLAY:
player.isPlaying = true;
player.object.play(1);
break;
case KEYS.PAUSE:
player.pause();
break;
case KEYS.STOP:
player.makeWindowed();
player.stop();
break;
}
}
function Player(id) {
this.id = id;
this.object = document.getElementById(id);
this.isFullScreen = false;
this.isPlaying = false;
this.parts = null;
return this;
}
Player.prototype.play = function () {
this.isPlaying = true;
return this.object.play(1);
}
Player.prototype.playByUrl = function (url) {
this.object.data = url;
return this.play();
}
document.onkeydown = function (evt) {
detailKeyPress(evt);
}
window.onload = function () {
player = new Player('playerObject');
player.playByUrl($mp4Link);
}
Player.prototype.makeFullScreen = function () {
try {
this.object.setFullScreen(true);
this.isFullScreen = true;
}
catch (ex) {//If philips
this.object.fullScreen = true;
this.isFullScreen = true;
}
}
Player.prototype.makeWindowed = function () {
try {
this.object.setFullScreen(false);
this.isFullScreen = false;
}
catch (ex) { //If philips
this.object.fullScreen = false;
this.isFullScreen = false;
}
}
Player.prototype.pause = function () {
this.isPlaying = false;
this.object.play(0);
}
Player.prototype.stop = function () {
this.isPlaying = false;
this.object.stop();
}

This may caused by your registry. If you clean it, you can solve or probably a bug. I have searched also a lot about this error. There is no another thing to say.

Exit Popup not working

I'm trying to get an exit popup to work. When user closes browser, it asks them if they want to stay or not, and in the background, it starts to redirect already.
This code works in Firefox, but not in Chrome and Opera.
In Chrome, the popup appears but no redirect happens.
In Opera, the popup doesn't appear at all.
function DisableExitTraffic() {
PreventExitSplash = true;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function addClickEvent(a, i, func) {
if (typeof a[i].onclick != 'function') {
a[i].onclick = func;
}
}
theBody = document.body;
if (!theBody) {
theBody = document.getElementById("body");
if (!theBody) {
theBody = document.getElementsByTagName("body")[0];
}
}
var PreventExitSplash = false;
var LightwindowOpening = false;
function DisplayExitSplash() {
if (PreventExitSplash == false) {
window.scrollTo(0, 0);
window.alert(exitsplashalertmessage);
PreventExitSplash = true;
document.location.href = RedirectUrl;
return exitsplashmessage;
}
}
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
disablelinksfunc = function() {
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
}
addLoadEvent(disablelinksfunc);
disableformsfunc = function() {
var f = document.getElementsByTagName('form');
for (var i = 0; i < f.length; i++) {
if (!f[i].onclick) {
f[i].onclick = function() {
if (LightwindowOpening == false) {
PreventExitSplash = true;
}
}
}
else if (!f[i].onsubmit) {
f[i].onsubmit = function() {
PreventExitSplash = true;
}
}
}
}
addLoadEvent(disableformsfunc);
window.onbeforeunload = DisplayExitSplash;
var exitsplashalertmessage = '>>> W A I T ! <<<\n\nCongratulations!\nYour IP-address is selected, you could be a winner\n';
var exitsplashmessage = '>>> CONGRATULATIONS <<<\n\nClick the **CANCEL** button to select your prize!\n';
var RedirectUrl = 'http://google.com';

So you want to redirect the user inside an onbeforeunload event.
It looks like this answer could help you.
Code snippet:
window.onbeforeunload = function(){
location.assign('http://www.google.com');
return "go to google instead?";
}
You probably won't ever get exactly what you want, but you'll at least display a prompt, and if the user clicks on OK, it should redirect.

The easiest, and for everyone most satisfying answer to this question is: don't do that! If a user closes a browser that is the most powerful expression of "i really don't want to stay anymore" so why ask them again?
The only thing worse on the internet are those annoying sites where you click the back button and can't leave the page.
So please don't do such evil evil things with programming.

Javascript automatic next image

I created this site which uses a simple javascript function to show images based on the user mousing over or clicking numbered boxes on the right. Now after testing it's been determined that an automatic slideshow should be added on top of this, so that next image will show after a few seconds.
http://www.philippedollo.com/photo/fineart/f_amw.htm
Is there a way to amend this code easily to make it happen easily? --
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

Use setInterval().
function getNextPic()
{
// ???
}
setInterval(function ()
{
showPic(getNextPic());
}, 3000); // 3 seconds
There's no need for the if(document.getElementById) check, since the function is 100% cross-browser.
function showPic(whichpic)
{
document.getElementById('placeholder').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title ?
whichpic.title : whichpic.childNodes[0].nodeValue;
return false;
}

The following should work for you, I tested it and it works fine on my end.
var curPic,
gallery,
pics;
function cyclePic(){
if(curPic < pics.length){
showPic(pics[curPic]);
}
curPic++;
setTimeout(cyclePic,5000);
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
window.onload = function(){
curPic = 0,
gallery = document.getElementById("gallery"),
pics = gallery.getElementsByTagName("a");
cyclePic();
}