We Keep Coding

Repeat JS Textillate function each time modal is opened

I am using uikit modal on a project. I am also using JS Textillate to animate the text when the modal is opened. However, I want the text to be animated if the modal is closed and opened again continuously. For now, it only animate once when the modal is opened for the first time, when closed and opened again, the animation does not run again.
This is the JavaScript code below:
$(".uk-modal-full").on('show', function(){
var $title = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
var $title = $(".txt2").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
});
I am thinking maybe the function can be removed when modal closes so that it can be repeated when it is opened again. I am not sure if that is possible as I am only a Jquery learner.
$(".uk-modal-full").on('hide', function(){
// code here?
});
Full options for Textillate is here https://github.com/jschr/textillate
UPDATE
Thank you! I have created a codepen here to test my full code inside a modal using your example. It seems to be working but with some issues. When I use $element.textillate('in') and $element.textillate('out'), the other options do not work (e.g. initialDelay). It seems to only control the "in" and "out" options. When I used $element.textillate('start') and $element.textillate('stop'), the other options worked but when modal is reopened, the text are briefly loaded first before animating.
Please see codepen here - https://codepen.io/ajaxthemestudios/pen/XWJRBbW

Looking through the readme of Textillate, I think this section is what you need:
$element.textillate('start') - Manually start/restart textillate
$element.textillate('stop') - Manually pause/stop textillate
$element.textillate('in') - Trigger the current text's in animation
$element.textillate('out') - Trigger the current text's out animation
So I would do something like first define the animations (outside the event functions)
var title1 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
var title2 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
And then in the event function:
$(".uk-modal-full").on('show', function(){
title1.textillate('in');
title2.textillate('in');
}
EDIT
I got it to work in this codepen: https://codepen.io/thomas-short/pen/zYxdzWY
Test it by clicking on click repeatedly.
EDIT 2
The problem of the text being briefly visible seems to be a limitation of the library. I could not find a way to solve it using the tools they provide. The only way I managed to make it work is by control it myself:
$(".uk-modal-full").on('show', function(){
title1.textillate('start');
$(".txt2").hide();
setTimeout(() => {
$(".txt2").show();
title2.textillate('start');
}, 1500);
})
And remove initialDelay from the options

Highcharts - How do I track/follow a live updated chart without using a navigator?

I have a graph which has live data feeding in, but the chart only tracks or follows the data line if the navigator is enabled.
I am unsure if this is a feature or is it a bug.
On the JSFiddle, notice how it doesn't track, but as soon as you change enabled: false to enabled: true, on line 43, it instantly starts tracking.
http://jsfiddle.net/6eso1hgy/1/
Is it possible to make it have the tracking behavior without a navigator?

I don't know if you really need Highstock. If not then you can change the code to just Highcharts and then remove all unnecessary code and add the following:
series: [{
marker: {
radius: 0
},
...
Fiddle

You can achieve it using xAxis.setExtremes() method:
Code:
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
var chart = this;
setInterval(function() {
NewTime = (new Date()).getTime(); // current time
var x = NewTime,
y = Math.round(Math.random() * 10);
series.addPoint([x, y], false, false, false); //redraw shift animation
chart.xAxis[0].setExtremes(
chart.xAxis[0].min + 1000,
chart.xAxis[0].max + 1000,
true,
false
);
}, 1000);
}
}
Demo:
http://jsfiddle.net/BlackLabel/z1mu0Lgh/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

bx slider : how to disable slide show when only one image is present

I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ?
bxslider options are
var coverSlider = $('.bxslider').bxSlider({
auto: true,
minSlides: 1,
maxSlides: 1,
pager: false,
speed: 500,
pause: 3000,
autoHover: true,
mode: 'fade',
controls: false
})
I am using reload method to update the slider when a new image is appends or removes
coverSlider.reloadSlider();

this helps me:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: ($(".bxslider li").length > 1) ? true: false,
pager: ($(".bxslider li").length > 1) ? true: false,
controls: false
});
});

You should check the number of images before reloading, and use destroySlider() method if there is only 1 image.
// Get the quantity of images (add your code if you want an example)
var numberOfImages = ...;
if (numberOfImages > 1) {
coverSlider.reloadSlider();
} else {
coverSlider.destroySlider();
}

Try
var numImgs = $('div.myClassName img').length;
if(numImgs>1)
{
\\Do your bxslider reload here
}
Instead you can use Jquery Selector too like below
jQuery(".image").Length
Hope this helps...
Click here to read about selectors Click

var numImgs = $('div.bxslider img').length;
if (numImgs > 1) {
$('.bxslider ').bxSlider({
controls: true,
...
});
}

This solution works for me
Change auto: true
to
auto: ($('#slidername').children().length < 2) ? false : true
Thanks to https://github.com/stevenwanderski/bxslider-4/issues/607

bx slider : how to disable slide show when only one image is present?
Set auto to false:
var coverSlider = $('.bxslider').bxSlider({
auto:false
})

how to move slider as video is being moved

I am doing a customized control bar. right now i am working on seek bar .i am able to play video on that particular time as the seek bar is moved . Now i need to do the vice versa that is . when my video is being played seekbar should automatically move
i got tired of searching through google .
i know there are great number of intelligent people are in stack overflow .
help me ,give me some idea sothat i can start again
i am kind of stuck here
thanks for your help :)
my code is here in this link how to make custom seek bar for player in jwplayer
and i am including here as well
$(document).ready(function() {
var videoLength;
function setPosition(myPosition ) {
jwplayer().seek(myPosition);
}
// finding durartion of the video
jwplayer().onTime(function(event){
jwplayer().play();
jwplayer().pause();
videoLength=event.duration;
seek(videoLength);
});
function seek(pos)
{
var position = Math.round(pos);
$("#volume").slider({
min: 0,
max:position,
value: 0,
range: "min",
animate: true,
slide: function(event, ui) {
var range = $( ".selector" ).slider( "option", "range" );
setPosition(ui.value);
}
});
}
});
jwplayer code
<script type="text/javascript">
var trackpathEn = "myCaptionsEn.vtt";
var trackpathEn = "myCaptionsEn.vtt";
var trackpathJa = "myCaptionsJa.vtt";
jwplayer('player').setup({
flashplayer: './jwplayer.flash.swf',
file: 'example1.mp4',
skin: "./skins/six/six.xml",
controls: false,
tracks: [
{ file: trackpathEn, back: false,color: 'cc0000', fontsize: 20 , label: "English", kind: "subtitles",default:true },
{ file: trackpathJa, back: false,color: 'cc0000', fontsize: 20 , label: "Japanese", kind: "subtitles" },
]
});

hey i found the way
thanks guys all for your help
$("#seekBar").slider('option', 'value',slider_range);
just make sure that your passing right value in "slider_range"..after calculation
and it must be integer:)

Applying style for YouTube Popup Player's popup Window

I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..

You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!

customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);