Develop Reference

Vue.js slider with local image doesn't work

Hi i find this image slider for Vue.js on "digitalocean.com" but works only with image uploaded on (imgbb, pixabay, etc). i try to set with local image (on assets) but doesn't work, some one can help me?
i already tried with ../assets/castelgandolfo.jpg or ./assets/castelgandolfo.jpg
sorry for my english!
This is the code:
export default {
name: "Slider",
data() {
return {
images: [
"https://i.ibb.co/6NJ7p6w/Castelgandolfo.jpg",
"https://i.ibb.co/QJN06cG/Grottaferrata.jpg",
"https://i.ibb.co/R3pHtGx/Ariccia.jpg",
],
timer: null,
currentIndex: 0
};
},
mounted: function() {
this.startSlide();
},
methods: {
startSlide: function() {
this.timer = setInterval(this.next, 10000);
},
next: function() {
this.currentIndex += 1;
},
prev: function() {
this.currentIndex -= 1;
}
},
computed: {
currentImg: function() {
return this.images[Math.abs(this.currentIndex) % this.images.length];
}
}
};

You can refer images directly using '#'
Example:
<img src="#/assets/images/home.png"/>

How to remove external JS when navigate to another page VUEJS

I have java script component in home component with external js. I need to remove external js when page navigate to another page. Page does not refresh.
<script>
function initFreshChat() {
window.fcWidget.init({
token: "***",
host: "https://wchat.freshchat.com"
});
}
function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>
This is the external js: https://wchat.freshchat.com/js/widget.js
I need this because i need to keep this freshchat window in one page.
This can be done by putting any condition. But it will works if we refresh the page. Here pages are not refreshing at all.
Therefore I need to remove the external js when navigate to another pages. And mount back when came to this page.

You can wrap the script in side a Vue component life circle,
render
remove
refresh
whenever you need.
I found this code on codepen https://codepen.io/akccakcctw/pen/LBKQZE
Vue.component("fc-button", {
template: "#fcButton",
props: {
fc: {
type: Object,
default: {},
}
},
methods: {
openWidget: function() {
document.getElementById("fc_frame").style.visibility = "visible";
window.fcWidget.open();
}
}
});
const vm = new Vue({
el: "#app",
data: function() {
return {
fc: {
isInit: false,
},
};
},
mounted: function() {
var self = this;
window.fcSettings = {
token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",
host: "https://wchat.freshchat.com",
config: {
cssNames: {
widget: "custom_fc_frame",
open: "custom_fc_open",
expanded: "custom_fc_expanded"
},
headerProperty: {
hideChatButton: true
}
},
onInit: function() {
window.fcWidget.on("widget:loaded", function() {
self.fc.isInit = true;
window.fcWidget.on("unreadCount:notify", function(resp) {
console.log(resp);
test = resp;
if (resp.count > 0) {
// document.getElementById('notify').classList.add('h-btn-notify');
document.getElementById("notify").style.visibility = "visible";
} else if (resp.count == 0) {
// document.getElementById('notify').classList.remove('h-btn-notify');
document.getElementById("notify").style.visibility = "hidden";
}
});
window.fcWidget.on("widget:closed", function() {
document.getElementById("fc_frame").style.visibility = "hidden";
document.getElementById("open_fc_widget").style.visibility =
"visible";
});
window.fcWidget.on("widget:opened", function(resp) {
document.getElementById("open_fc_widget").style.visibility =
"hidden";
});
});
}
};
}
});

Stuck on executing this function after 10 seconds of page load.

I created this function that checks for user's cookies and then shows a newsletter Popup. I need to load this after the user has spent 10 seconds navigating on the site. I've use window.setTimeout but it hasn't worked so far. The script works beautifully except for this 10 second delay execution. Any idea what I'm doing wrong?
theme.ModalNewsletter = function() {
if ($.cookie('tada-cookies')) {
}
else {
var el = $('#newslettermodal');
if (el.length) {
$('#newslettermodal').removeClass("hide");
$.magnificPopup.open({
items: {
src: el
},
type: 'inline'
});
}
}
$.cookie('tada-cookies', 'true', { expires: 7});
}

Make sure your timeout passes the function itself and doesn't execute it.
Correct way:
setTimeout(theme.ModalNewsletter, 10000);
Incorrect way:
setTimeout(theme.ModalNewsletter(), 10000);

Is this the right approach?
setTimeout(theme.ModalNewsletter, 10000); {
theme.ModalNewsletter = function()
if ($.cookie('tada-cookies')) {
}
else {
var el = $('#newslettermodal');
if (el.length) {
$('#newslettermodal').removeClass("hide");
$.magnificPopup.open({
items: {
src: el
},
type: 'inline'
});
}
}
$.cookie('tada-cookies', 'true', { expires: 7});
}

How to turn music on and off with one button?

For my website I use the ION.sound plugin and i would like to pause a fragment and play it again with the same button. Unfortunately, Jquery's .toggle has been removed in version 1.9 and can not be used anymore. How could I turn this audiofragment on and off with the same button? This is what i have so far:
$.ionSound({
sounds: [
"track_radio"
],
path: "sounds/",
multiPlay: true,
volume: "0.8"
});
playRadio = function() {
$.ionSound.play("track_radio");
}
stopRadio = function() {
$.ionSound.stop("track_radio");
}
$("#speakers").click(function(event){
playRadio();
});

You need something to track the playing status and check it when clicked.
$.ionSound({
sounds: [
"track_radio"
],
path: "sounds/",
multiPlay: true,
volume: "0.8",
playing: false;
});
onOffRadio = function() {
$.ionSound.play("track_radio");
$.ionSound.playing = true;
}
stopRadio = function() {
$.ionSound.stop("track_radio");
$.ionSound.playing = false;
}
$("#speakers").click(function(event){
if ($.ionSound.playing) {
stopRadio();
}
else {
playRadio();
}
});

You can simply make use of the 'text' attribute of the button element.
<button id="play-pause">Play</button>
$("#play-pause").click(function() {
if($(this).text() == 'Play') {
playRadio();
$(this).text('Pause');
}
else {
pauseRadio();
$(this).text('Play');
}
});
Here's the fiddle

Better way to check for Video.js object on instantiation?

I am really getting into object-oriented Javascript, and Video.js. In order to make the custom video controls appear each time the page is loaded, the cached Video.js object has to be disposed of, and rebuilt.
I have created the following script that correctly checks for a cached object, but wasn't sure if there was a better way, one that doesn't need to create a second global variable:
<div class="video-wrapper"></div>
<script>
var VideoObj;
var Continuum = function(container, el, shortName) {
this.container = container;
this.el = el;
this.shortName = shortName;
};
Continuum.prototype = {
/* Build up the <video> tag and and attributes */
prepareVideo: function() {
if(VideoObj) {
VideoObj.dispose();
}
$(this.container).append($(this.el));
$(this.shortName).attr({
'id': 'video_1',
'class': 'video-js vjs-default-skin',
'controls': true,
'poster': 'http://video-js.zencoder.com/oceans-clip.jpg',
'preload': false
});
this.createVideoObject('video_1');
},
/* Instantiate the object with the Video.js call */
createVideoObject: function(vidID) {
_V_(vidID, {}, function () {
this.vidID = VideoObj = videojs(vidID);
this.vidID.src([
{ type: "video/mp4", src: "http://video-js.zencoder.com/oceans-clip.mp4" },
{ type: "video/webm", src: "http://video-js.zencoder.com/oceans-clip.webm" },
{ type: "video/ogg", src: "http://video-js.zencoder.com/oceans-clip.ogv" }
]);
this.vidID.pause();
});
}
};
var vid = new Continuum('div.video-wrapper', '<video/>', 'video');
vid.prepareVideo();

You can easily check if videojs is loaded in this way:
videojs.getAllPlayers().length
If it is 0 you can rebuild it.
Other way is to iterate
videojs.getAllPlayers()
and dispose them before rebuilding.