Combining multiple Play and Pause buttons with Multiple Lottie Animations - javascript

I am building a webpage that has three Lottie animations on it and I want to add "Play" and "Pause" buttons to each animation - one set of buttons per animation. I stumbled upon this example on Codepen and used it successfully to create one single instance of a "play" and "pause" button on a Lottie animation: https://codepen.io/sangziii/pen/OogKYZ?editors=1010
When I tried to duplicate this code a second time and add a second set of buttons I could not figure out how to separate the two scripts successfully. I am somewhat new to coding Javascript and I am really stuck where i'm at with one Play and Pause button and code that I cannot seem to alter correctly in order to separate the two scripts from one another one the same page.
I duplicated this Javascript and added the correct file path for my second (different) animation and also changed the "lottie" variable to correspond to the second animation's ID on the webpage.
//counters
var animCycles = 0;
var animFrame = 0;
var targetAnim = document.getElementById('lottie');
var animRange = document.getElementById('fRange');
var animation = bodymovin.loadAnimation({
container: targetAnim, // Required
path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/914929/estimate.json', // Required
renderer: 'svg', // Required
loop: true, // Optional
autoplay: true // Optional
})
animRange.addEventListener('change', function(){
var gotoFrame = $('#fRange').val();
animation.goToAndPlay(gotoFrame, true)
console.log(gotoFrame);
})
targetAnim.addEventListener('click', function(){
animation.play();
})
animation.addEventListener('data_ready', function(){
$('.tFrames').html(animation.totalFrames);
$('#fRange').attr('max',animation.totalFrames);
})
animation.addEventListener('loopComplete', function(){
animCycles++;
$('#aCycles').html(animCycles);
})
animation.addEventListener('enterFrame', function(){
animFrame = parseInt(animation.currentRawFrame);
$('#aFrames').html(animFrame);
$('#fRange').val(animFrame);
})
When I duplicated this script I could not figure out how to separate it from the first script so that I can run the same script twice on the same page and have two different Lottie animations each with their own Play and Pause buttons.
Any help would be appreciated!

Related

jQuery not using selected element

I am building a custom WordPress plugin that requires me to build into it a custom media library button that lets a user associate an image with a certain option for a post. The user needs to be able to add the elements dynamically, so there are multiple options, i.e. multiple medial library buttons.
The issue that I am running into is that if I have 5 options with five buttons, setting the first image works fine. But if I click buttons 2-5 to set the images for the additional options, they are not getting set but the first option is changing.
It's almost like once the initial element is set on click, then it never changes.
Here is a sample of the HTML (the generic.jpg is the default image before the image is set from the library):
<div class="image-preview-wrapper">
<img class="image-preview" src="https://WEBSITE/wp-content/plugins/atas_spec_writer/admin/assets/generic.jpg" style="max-height: 100px; width: 100px;" width="100" height="100">
<input type="button" class="button upload_image_button" value="Add Image">
<input type="hidden" name="options[section_4][3][img_id]" class="image_attachment_id" value="">
</div>
Here is the JS code:
// Uploading files
var j = jQuery;
var file_frame;
j(document).on('click', '.upload_image_button', function(event) {
var el = j(this);
event.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame) {
// Open frame
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select a image to upload',
button: {
text: 'Use this image',
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
el.siblings('.image-preview').attr('src', attachment.url);
el.siblings('.image_attachment_id').val(attachment.id);
});
// Finally, open the modal
file_frame.open();
// Restore the main ID when the add media button is pressed
j('a.add_media').on('click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
I've switched up using j(this), event.target, and they both seem to stick with the first element clicked.
I originally thought that it might just go to the first element in the DOM that matches what is clicked, but if I add 2 options with images and then come back two days later and add two more, the click event sticks with the first element that was set that day, not the first element in the DOM.
So I am completely at a loss......
Any help is much appreciated!!
Looks like once you open a frame file_frame variable will never be nullified or resetted.
I guess problem lies in the following return statement:
if (file_frame) {
// Open frame
file_frame.open();
return;
}

Advance slick slider when image in gallery is clicked (multiple slick sliders on one page)

I came across this modification for slick slider for advancing when clicking on the current image (see below). When I implement it on my page with multiple galleries it advances all galleries when I click on one, not only the one selected. Is there a possibility to use e.g. "this" selector in here?
http://codepen.io/ethanclevenger91/pen/MYNGrN
window.onload=function(){
$slideshow = $('.slider').slick({
dots:false,
autoplay:false,
arrows:false,
adaptiveHeight: true,
slidesToShow:1,
slidesToScroll:1
});
$(".slide").click(function() {
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});
};
Please see the following codepen: http://codepen.io/anon/pen/ZOGmWo?editors=1010
The main idea is to define each slider separately.
First, define an object to hold all the sliders:
var sliders = {};
Then, looping through all the sliders, extracting the ID and saving a reference to the newly defined slider in our map, indexed by the ID:
$('.slider').each(function (index, slider) {
var id = slider.getAttribute('id');
console.log(id);
sliders[id] = $(slider).slick({ ... })
});
Now, on the click handler, we determine to which slider do the clicked slide belong to, using $(this).closest('.slider') and using progressing it.
$('.slide').click(function() {
var id = $(this).closest('.slider').get(0).getAttribute('id');
var $slideshow = sliders[id];
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});

BJQS Slider pause on click

I am using a BJQS slider on my website.
I am also using fancybox on the same website.
I would like BJQS to pause when the fancybox is open and resume when closed.
Does anyone know how I could create a pause/play toggle button for BJQS?
Thanks
fancybox comes with some callbacks, so you should be able to do something like:
Adopting Lee and Edwards idea about virtual hovering..
$(".fancybox").fancybox({
padding : 0,
openEffect : 'elastic',
closeEffect: 'elastic',
beforeLoad: function(){
$(".banner").trigger("mouseover");
},
afterClose: function(){
$(".banner").trigger("mouseout");
}
});
Without editing the source file to provide either a method to pause the slider, or add in a button you can hide and trigger a click on, the quickest method is to trigger the mouse events that cause the slider to pause.
Looking at the demo, you can see that when you mouseover the slider, the slider stops animating until you move your mouse outside of it. Therefore you can simulate these events.
Assuming your slider div is #slider like the demo on the BJQS site, you would do:
On fancybox open
$('#slider').trigger('mouseover');
On fancybox close
$('#slider').trigger('mouseout');
Go here: http://fancybox.net/api to see how to define open/close callbacks (see near bottom of first table, the "on" options)
I check the plugin but I cant' find any method to pause/play the slider.
I see an option called:
hoverpause : true, // enable/disable pause slides on hover
So we can "hack" in this way using it by triggering the over state on the slider itself:
var stopbjqs = false;
$(function () {
$('#dialog').bjqs({
'showmarkers': false,
'responsive': true,
'automatic': true
});
$("#btn").click(function () {
if (!stopbjqs) {
$("#dialog").trigger("mouseover");
stopbjqs=true;
} else {
$("#dialog").trigger("mouseout");
stopbjqs=false;
}
});
});
But it will be definitely better to have some methods to manipulate the slider.
Demo: http://jsfiddle.net/IrvinDominin/P8UgQ/
Came across this whilst trying add a play/pause button to the plugin. #Irvin Dominin's suggestion relating to hoverpause is good but it will fail as soon as you hover the banners as the mouseover/mouseout is triggered.
I decided to extend the plugin with a new setting and turn off hoverpause.
First add the setting to the defaults object e.g.
// slider default settings
var defaults = {
enableplaypause: false // shows play/pause button
};
Next you'll want to set the click binding to your button, this is done in the init() function e.g.
// run through options and initialise settings
var init = function () {
// configurations only avaliable if more than 1 slide
if (state.slidecount > 1) {
//enable play/pause button using setting we defined earlier
if (settings.enableplaypause) {
conf_enableplaypause();
}
}
};
Now for the conf_enableplaypause(); function which handles the state + button bindings:
var conf_enableplaypause = function () {
$('#btn').click(function () {
if (!state.paused) {
clearInterval(state.interval);
state.paused = true;
$('#btn').text('PAUSED');
} else {
state.interval = setInterval(function () {
go(vars.fwd, false);
}, settings.animspeed);
state.paused = false;
$('#btn').text('PLAYING');
}
});
};
Pretty straightforward and is essentially a copy of what hoverpause does except on a button click along with updating the button text.
Hopefully this helps someone

Issue on steriotab system

I have playing around with a steriotab system with the prototype.js library, everything works fine except the next DIV under the container of steriotabs is showing like a flash when turning to next tab.. I know its little bit difficult to understand.. here you can see it on their website http://stereointeractive.com/blog/code/prototype-tabs/
You can see that by changing the four tabs(features, setup, configuration, download) continuously three four times. The comment section will show up like a flash just below the navigation tabs(Features, Setup, Configuration, Download).
I think the issue was when it goes to next tab the current one is display:none and ofcourse there is nothing in the meantime(1 or 2 seconds) so the next block of html code is coming to the top just below the navigation..
this javascript may causing the issue..
activate: function(tab) {
var tabName = tab.id.replace(this.options.ids.tab,'');
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
if (this.showPanel) {
if (this.options.effects) {
new Effect.Fade(this.showPanel, {queue: 'front'});
} else {
$(this.currentPanel).hide();
}
}
if (this.options.effects) {
new Effect.Appear(this.currentPanel, {queue: 'end'});
} else {
$(this.showPanel).show();
}
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
}
you guys have any thought?
You're suspicion is correct, the reason you get the flash is the few milliseconds there is no container there holding back the content below the object. One option you could consider is while fading the container also sliding it up (look into parallel effects in scripty) that way it would not be nearly as jarring with the content disappears.

Javascript making text slide in from html

I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.

Categories

Resources