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

Google Analytics Event Tracking on JqueryUI Range Slider

So I have a simple JQuery UI range slider with two handles, as shown in this JSFiddle.
HTML
<p class="results-val">
<span class="min-val">0 </span>to
<span class="max-val"> 30</span> days
</p>
<div id="slider"></div>
JS
$(function(){
$( "#slider" ).slider({
range: true,
min: -60,
max: 60,
step: 5,
values: [ 0, 30 ],
slide: function(event, ui) {
$(".min-val").text(ui.values[0] + " ");
$(".max-val").text(" " + ui.values[1]);
}
});
});
In practice, this slider acts as a filter for our Dashboard application, scoping data shown regarding the user's results based on the range of day values.
Via Google Analytics, we want to track different permutations of handle positions. For clarity, when I say permutations, this is what I mean:
"0 to 30 days" is one permutation.
"-5 to 15 days" is another permutation.
"-40 to 0 days" is another permutation.
And so there are tons of permutations.
My idea for this is to have two events, one for each slider handle, with the handle's current step position as the value being passed:
Category: Filtering,
Action: Adjustment,
Label: leftHandle,
Value: stepPos
Category: Filtering,
Action: Adjustment,
Label: rightHandle,
Value: stepPos
However, there's a problem here. While this approach will indeed report an Average Value for each handle individually, we want to see both values together. As stated above, it's important for us to know the most popular "permutations", with a single permutation consisting of both a left handle position value and a right handle position value.
If anyone has suggestions on how to set this logic, that would be wonderful. Thank you.

You can stuff both values into a comma separated string
You can debounce the slider event to only record values that the user keeps for more than a second or two.
var globalLeft, globalRight;
$(function(){
$( "#slider" ).slider({
range: true,
min: -60,
max: 60,
step: 5,
values: [ 0, 30 ],
slide: function(event, ui) {
$(".min-val").text(ui.values[0] + " ");
$(".max-val").text(" " + ui.values[1]);
globalLeft = ui.values[0];
globalRight = ui.values[1];
$.debounce(1300, doPingGa)
}
});
});
function doPingGa() {
ga('send', 'event', 'Filtering', 'RangeAdjust', globalLeft+','+globalRight);
}

Edge Animate: Play animation with javascript

I've disabled the autoplay-option in the Edge Animate Composition.
Now I would like to bind these animation with the waypoints.js so i need to call the animation by javascript.
This is my HTML
<div id="StageTwo" class="EDGE-4436041"></div>
This is the Javascript
<script>
AdobeEdge.loadComposition('animation_bereitstellung', 'EDGE-4436041', {
scaleToFit: "both",
bScaleToParent: "true",
centerStage: "horizontal",
minW: "0px",
maxW: "undefined",
width: "650px",
height: "463px"
}, {"dom":{}}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","500px","356px"],"fill":["rgba(255,255,255,1)"]}},"dom":{}});
</script>
The problem: I've multiple animations on a single site.

I think the easiest way to do this is to call the Adobe Edge API with a bootstrapCallback in a manner similar to the following:
var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
window.AdobeEdge.bootstrapCallback(function(compId) {
var comp = AdobeEdge.getComposition("EDGE-4436041");
//either to play the stage
var stage = comp.getStage().play();
//or to play a symbol inside the stage
var mySymbol = comp.getStage().getSymbol("symbol");
mySymbol.play();
});
}
});
Hope that helps!

How to reset value of jquery jRange slider

Hello I am using jQuery jRange slider to show time of video on my page. when I am changing my video url at that new time is not appending to slider.
It shows min and max value of previous video.
Here is link of api : http://nitinhayaran.github.io/jRange/demo/
Please help me out.
$("#video_url").change(function() {
player.pause();
var currtime = player.currentTime();
var dirtime = player.duration();
addSlider(currtime, dirtime);
jQuery(".annodds").change(function() {
$(".annodds").val(this.value);
});
});
function addSlider(currtime, dirtime) {
jQuery('.annodds').jRange({
from: Math.round(currtime),
to: dirtime,
step: 1,
// scale: [10,20,30,40,50,60,70,80,90,100],
format: '%s',
width: 300,
scale: false,
showLabels: true,
theme: "theme-blue",
isRange: true,
onstatechange: function() {
$(".annodds").trigger('change');
}
});
}

As mentioned here. You can simply use the setValue to set the desired value for your range selector
$('.annodds').jRange('setValue', 0);

You can use the code below to change the slider values :
$('.annodds').jRange('setValue', 20);

How to add a jquery ui slider to each cell of slickgrid?

I need to add a jquery ui slider to each cell of slickgrid. Number of records is over 10,000 with over 150 columns. The problem is that the initial set of sliders are rendered fine but as I scroll (left or right), they disappear. Somehow, the grid is not getting invalidated for those cells. I am using the following formatter on the column:
SliderFormatter = function (row, cell, value, colDef, dataContext) {
var html = "<div class='mySlider' id='slider_" + dataContext['id'] + "'></div>" + value;
return html;
}
and invoking the slider from my document.ready callback.
Any help will be appreciated. Thanks in advance !

SlickGrid renders only what's visible in the viewport, plus a small buffer. As you scroll, rows/cells are dynamically added and removed.
What this means for your case, is that when you initialize the slider widget in your document.ready callback, you're only initializing a tiny portion of them, and the ones that did get initialized, don't get re-initialized when the cells they are in are removed and recreated by SlickGrid.
SlickGrid doesn't allow you to use jQuery widgets like the slider in cells and requires that formatters output pure HTML in order to make it hard to implement the grid in a way that will slow it down. (I won't get into my reasoning behind that admittedly controversial decision.)
My advice here is to avoid using the jQuery UI slider here. It is simply not scalable or performant enough. Without virtualization, what you're trying to do is impossible - initializing 100 sliders is going to be really slow; initializing 10'000 x 150 of them is out of the question. With virtualization, you'll need to initialize and destroy them on the fly as you're scrolling around, and that's just too slow to scroll smoothly.
Consider using an HTML5 range input - <INPUT type="range">. It's supported by all major browsers with the exception of IE <10. See http://caniuse.com/#feat=input-range.

I've created an example using SlickGrid's async post-render option. #Tin is probably right that it would be better to use the native <input type="range"> but just in case you need to support older browsers here's how you can do it.
function waitingFormatter(value) {
return '<div class="slider"></div>';
}
function renderSlider(cellNode, row, dataContext, colDef) {
var cell = $(cellNode);
cell.find('.slider').slider({
value: dataContext.value,
slide: function(e, ui) {
data[row].value = ui.value;
cell.prev().html(ui.value);
}
});
}
var grid;
var data = [];
var columns = [
{ id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title" },
{ id: "value", name: "Value", field: "value", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator },
{ id: "chart", name: "Slider", sortable: false, width: 425, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSlider }
];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableAsyncPostRender: true
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d["title"] = "Record " + i;
d["value"] = Math.round(Math.random() * 100);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})