I am trying to use the afterAnimation event on the SuperSized jQuery plugin (docs:http://buildinternet.com/project/supersized/docs.html#theme-after) but cannot get it to fire.
Code (sample):
$.supersized({
//Functionality
slideshow : 1,
autoplay : 1,
start_slide : 1,
stop_loop : 0,
random : 0,
slide_interval : 3000,
transition : 6,
transition_speed : 1200,
// .. removed for clarity
//Theme Options
progress_bar : 1,
mouse_scrub : 0,
// This is where i'm trying to call afterAnimation()
afterAnimation : function() {
console.log('blech');
}}
});
Any guidance would be greatly appreciated!
Turns out that I was pretty close.
After the initialization of supersized, you can do this:
theme.afterAnimation = function() {
console.log('animate');
};
Related
What i am trying to achieve, is a basic slideshow that starts, gets to the last slide and stops. I am using Glide.js as it is so small and is really awesome however, with the below code it does not actually pause and the slide spins round back to the beginning again.
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
});
glide.on('move', (e) => {
if(glide.index == item_length) {
console.log(glide.index, item_length);
glide.pause();
}
});
glide.mount();
}
I am getting the console.log out which is telling me 5 5 meaning I am on the glide.index at the 5th slide and the item_length is 5. So the glide.pause() should work. Any help would be greatly appreciated I have been scratching my head for ages on this. I have tried run and other events instead of move and still no success.
Try setting the rewind option to false:
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
rewind: false,
});
glide.mount();
}
Reference
I'm using angular 6 to create a testimonial slider.
It looks great, but the problem is... I'm using RouterLink in my header, so everything loads at once. When you open the page with testimonial javascript for the first time it works, but then when you go onto another page and re-direct back it does not work.
Has anyone encountered a similar issue?
Is there a way to modify this function so it loads on page-view rather than page-load?
Thanks
JS Code:
function mfnSliderTestimonials(){
var pager = function( el, i ){
var img = $( el.$slides[i] ).find('.single-photo-img').html();
return '<a>'+ img +'</a>';
};
$('.testimonials_slider_ul').each(function(){
var slider = $(this);
slider.slick({
cssEase : 'ease-out',
dots : true,
infinite : true,
touchThreshold : 10,
speed : 300,
adaptiveHeight : true,
appendDots : slider.siblings( '.slider_pager' ),
customPaging : pager,
autoplay : window.mfn_sliders.testimonials ? true : false,
autoplaySpeed : window.mfn_sliders.testimonials ? window.mfn_sliders.testimonials : 5000,
slidesToShow : 1,
slidesToScroll : 1
});
});
}
EDIT: WORKS
All working fine now. Even when re-routing. In thecomponent I've declared the javascript function in such way:
declare function YOURFUNCTION(): any;
#component......
ngOninit
YOURFUNTION()
and obviously import * as $ from 'jquery'; was also necessary!
Thanks
I'm using Scrollreveal.js to reveal some divs on my website.
Now i want Scrollreveal to call a function after it has revealed a specific div.
As the documentation says:
"
// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}"
My code:
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
afterReveal: function (domEl) {domEl.demo();}});
Can anyone tell me what the correct syntax is to call my variable after the div has been revealed?
I have tried for a long time to do it myself, with no positive results, so i think it's ok to ask someone for help now :)
Thanks!
Figured it out, it wasn't difficult, as i suspected, just me being new to this :)
so to shorten this, this is how i used CountUp.js with Scrollreveal.js
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
beforeReveal: function(){var options = {
useEasing: true, useGrouping: true, separator: ',', decimal: '.',
};
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
if (!demo.error) {demo.start();
} else {console.error(demo.error);
}},
});
I am working in a Sencha Touch app with different Toasts to show messages like "successful" or "info" etc.. but I am having random behavior, for example:
1º if you navigate for the application tapping in a one action with Toast and you navigate to other screen while Toast is up, toast has a random behavior getting the last color instead of change..( in the test case with the same color but with different message, please you can read the code)
2º Sometimes Toast is not appearing and I do not have explanation.
Any suggestion about the code? currently it is a singleton class, and it is called from other parts/controllers of the app depending the action.
On the other hand, any other approach with a similar behavior? maybe it is needed to change the strategy and no use Toasts..
It is happening in Windows 8 and iOS and I am using 2.4.1 version, reading the release notes of 2.4.2 has not news about this element of the framework, and I guess is not relevant to update to the latest framework version.
Here my Toast Manager class:
/**
* Loading popup as a static-functions class
*
* Different toast-messages colors:
* 0 --> green
* 1 --> orange
* 2 --> red
*
* We create a config object and depending of the status we show a Toast
*/
Ext.define('xx.view.components.ToastManager', {
singleton : true,
requires : [
'Ext.Toast'
],
config : {
toastOptions: {
message : '',
centered : false,
width : 200,
height : 100,
bottom : '10%',
modal : false,
right : 10,
style : '',
type : 'slide', duration: 850, easing: 'ease-out',
hideAnimation: {type: 'fadeOut', duration: 650, easing: 'ease-out'},
timeout : 3000
},
toastComponent : null,
t : null
},
constructor : function () {
this.initConfig();
},
changeVisibility: function() {
if(this.getT()) {
clearTimeout(this.getT());
}
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'visible');
}
var t = setTimeout(function() {
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'hidden');
}
}, 4000);
this.setT(t);
},
/**
* Shows a successful message
* #param label
* #param status
*/
showToastMessage : function (label, status) {
var options = this.getToastOptions();
options.message = label;
switch (status) {
case 0:
options.style = 'background-color: #30B420';
break;
case 1:
options.style = 'background-color: #FFA500';
break;
case 2:
options.style = 'background-color: #ff0000';
break;
default:
options.message = "?"
}
this.changeVisibility();
this.setToastComponent(Ext.toast(this.getToastOptions()));
}
});
I'm using this function for my toast messages (in ExtJS though):
showToastMessage: function(message, alignTo){
Ext.toast({
cls: 'toast-window',
header: false,
html : '<div class="toast">' + message + '</div>',
animate: true,
slideInAnimation: 'ease',
slideInDuration: 300,
slideOutDuration: 200,
autoCloseDelay: 1500,
align: alignTo ? alignTo : 't'
});
}
You can apply some css to toast-window and toast classes to make you message look nice.
You just pass your message to this function and it should show a nice toast!
I'm creating an audio player with MediaElement.js, like this:
//button has been clicked, create new audio player and play
var audioElement = $('<audio>', {
id : 'audioPlayer' + index,
src : '/streamFriendFile',
loop : 'loop',
preload : 'none'
})[0];
$(row).append(audioElement);
new MediaElement(audioElement, {
plugins : ['flash', 'silverlight'],
pluginPath : 'http://localhost:3000/mediaelement/',
flashName : 'flashmediaelement.swf',
silverlightName : 'silverlightmediaelement.xap',
pluginWidth : 0,
pluginHeight : 0,
audioWidth: 0,
audioHeight : 0,
startVolume: 0.8,
//loop: true,
//enableAutosize: false,
//features : [],
//timerRate : 250,
success : function(mediaElement, domObj) {
console.log('mediaElement success!');
mediaElement.play();
},
error : function(mediaElement) {
console.log('medialement problem is detected: %o', mediaElement);
}
});
The error callback is immediately called, but it only contains the media element as an argument. This does not tell me what is wrong.
How can I get the actual error message so I can debug this issue?
Note that I'm only using the MediaElement core API, thus not the actual player (so I only include mediaelement.js).
In your MediaElement options (along with flashName, silverlightName, etc...) add enablePluginDebug:true and it should show debug errors on the screen. From the API reference in the code example at right.
Other than that I don't believe they have any detailed error handling yet for that error object, from looking at the github repo it seems to be a "to do" feature mentioned at the bottom (most likely a 2.2 feature).
Looks like you might have to figure out your own error handling for the time being.