Apologies in advance for my ignorance as I suspect this is a very easy question to answer, but I'm stuck.
I'm using bodymovin to play an svg animation on a website. I want to use the onComplete event to trigger a function when the animation completes, but I can't figure out how to code it.
I've tried
$("#bodymovin").on("onComplete", function(){
console.log('test completed');
});
And
document.getElementById("bodymovin").addEventListener("complete", doalert);
function doalert() {
console.log('test completed');
}
Bodymovin docs - https://github.com/bodymovin/bodymovin#events
I figured it out. Here is the entire code
var anim;
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'thelogo.json'
};
anim = bodymovin.loadAnimation(animData);
anim.addEventListener('complete',doalert);
function doalert() {
console.log('test completed');
}
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'folder_path/data.json'
};
var anim = bodymovin.loadAnimation(animData);
// function for DOM Loading
anim.addEventListener('DOMLoaded', function(e) {
console.log('DOM loaded');
});
// function for Completion of animation
anim.addEventListener('complete', test_complete);
function test_complete() {
console.log('test completed');
}
// function for certain frame
anim.addEventListener('enterFrame',enterframe);
function enterframe() {
console.log('In Frame');
}
//function for Mouse Enter for bodymovin
anim.addEventListener('DOMLoaded', function(e) {
var elem = document.getElementById('bodymovin');
elem.addEventListener('mouseover', mouseElem)
function mouseElem() {
anim.goToAndStop(1, true);
}
});
Related
I have a one page website with sections. Using Swiper + body-scroll-lock to lock a middle section while the user swipes through the slides.
If user scrolls down the body lock should be active until last slide and vice versa if the user scrolls back to the top of the page.
// body lock while going down
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("the-dashboard");
if (window.scrollY > elementTarget.offsetTop + elementTarget.offsetHeight) {
$('html').addClass('no-scroll') // locks
}
});
// SWIPER
var leftSwiper = new Swiper(".swiper-container-left", {
direction: "vertical",
mousewheel: {
invert: true,
mousewheelReleaseOnEdges: true
},
allowTouchMove: false,
initialSlide: 3
});
var rightSwiper = new Swiper(".swiper-container-right", {
direction: "vertical",
mousewheel: true,
mousewheelReleaseOnEdges: true,
pagination: {
el: ".swiper-pagination"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
rightSwiper.on("reachEnd", function() {
$('html').removeClass('no-scroll') // unlocks but the first lock still active and locks it again
});
Problem:
Unable to unlock screen again since user has "passed" the top of the div and not i.e "touched" the top of the div with window top.
Possible Solution:
A good way to body lock a section while reaching its top until the Swiper "reachEnd" event is triggered.
VIEW PEN: https://codepen.io/rulloliver/pen/LYPyxaM
A javascript solution can be found on this pen using mousewheel events: https://codepen.io/kaido24/pen/pozpGwR
Code:
window.addEventListener("scroll", function() {
$target = $("#swipes");
if (window.scrollY > $target[0].offsetTop && window.scrollY < $target[0].offsetTop + 150) {
$('html').addClass('no-scroll');
}
else {
$('html').removeClass('no-scroll');
}
});
var leftSwiper = new Swiper(".swiper-container-left", {
direction: "vertical",
/** mousewheel: {
invert: true,
mousewheelReleaseOnEdges: true
},
**/
allowTouchMove: false,
initialSlide: 3
});
var rightSwiper = new Swiper(".swiper-container-right", {
direction: "vertical",
/** mousewheel: true,
mousewheelReleaseOnEdges: true, */
pagination: {
el: ".swiper-pagination"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
leftSwiper.on("slideNextTransitionStart", function() {
rightSwiper.slidePrev(500, false);
});
leftSwiper.on("slidePrevTransitionStart", function() {
rightSwiper.slideNext(500, false);
});
rightSwiper.on("slideNextTransitionStart", function() {
leftSwiper.slidePrev(500, false);
});
rightSwiper.on("slidePrevTransitionStart", function() {
leftSwiper.slideNext(500, false);
});
rightSwiper.on("reachEnd", function() {
});
rightSwiper.on("reachBeginning", function() {
});
var waiting = false;
$(window).bind('mousewheel', function(event) {
if ($('html').hasClass('no-scroll')) {
if (event.originalEvent.wheelDelta >= 0) {
if (waiting == false) {
l = leftSwiper.slideNext();
if (l == false) {
$('html').removeClass('no-scroll');
console.log('top');
console.log($(window));
} else {
waiting = true;
setTimeout(function () {
waiting = false;
},500);
}
}
}
else {
if (waiting == false) {
var r = rightSwiper.slideNext();
if (r == false) {
$('html').removeClass('no-scroll');
} else {
waiting = true;
setTimeout(function () {
waiting = false;
}, 500);
}
}
}
}
});
$(document).on('mousewheel', function() {
$(document).trigger('mousewheel');
});
(not by me)
I want to add class to navbar when active slide has got attribute set for example "navbar-dark". I tried with class but my function doesn't work perfect. It is when I changed slide the class was adding to the second slide not to first slide.
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: false,
mousewheel: {
invert: false,
},
});
mySwiper.on('slideChange', function (realIndex) {
if ($('.swiper-slide.swiper-slide-active').hasClass('dark')) {
$('#navbar').addClass('darknav')
} else {
$('#navbar').removeClass('darknav');
}
});
});
I googled for "swiper jQuery plugin", opened the first suggested page and went to the API.
And there's the Events section, and there's the .on init method. Let's try it
jQuery(function($) {
function darkNav() {
//if ( $('.swiper-slide.swiper-slide-active').hasClass('dark') ) { // `this` rather?
if ( $(this).find('.swiper-slide-active').hasClass('dark') ) {
$('#navbar').addClass('darknav')
} else {
$('#navbar').removeClass('darknav');
}
}
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: false,
mousewheel: {
invert: false,
},
on: {
init: darkNav, // do also on init
slideChange: darkNav // is this needed?
}
});
});
Also, instead of $('.swiper-slide.swiper-slide-active').hasClass('dark') you could rather try with $(this).find('.swiper-slide-active').hasClass('dark')
Backbonejs.org says
"— while very deliberately avoiding painting you into a corner by making any decisions that you're better equipped to make yourself."
So I have a BackBone view like this:
var LotsaToys= Backbone.View.extend({
el: '#CaveToy',
events: {
'click .slide': 'slideAnimal'
},
initialize: function (obj) {
this.collection = new Yoyo(obj);
this.render();
},
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
},
renderBook: function (item) {
var ToyView = new oneToy({
model: item
});
this.$el.append(ToyView .render().el);
}
});
And simple Jquery code like this:
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
Do I combine these to by simply adding the JQuery code in the slide function?
(Simple Jquery image slider)
slideAnimal: function (event) {
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
});
Im a noob, so please give me a explanation ,not sure what way is 'good practice' or what way would be better to implement..
You need place it after render
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
this.slideAnimal();
},
slideAnimal: function() {
this.$("#slider").sudoSlider({
vertical: true,
continuous: false
});
}
DEMO
I have following code in iviewer. here i want to show the image to be filled in whole grey box.
HTML:
<div id="viewer" class="viewer"></div>
JS:
var $ = jQuery;
$(document).ready(function () {
var iv1 = $("#viewer").iviewer({
src: "http://test.dpetroff.ru/jquery.iviewer/test/test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function (ev, coords) {},
onStartDrag: function (ev, coords) {
return false;
}, //this image will not be dragged
onDrag: function (ev, coords) {}
});
$("#in").click(function () {
iv1.iviewer('zoom_by', 1);
});
$("#out").click(function () {
iv1.iviewer('zoom_by', -1);
});
$("#fit").click(function () {
iv1.iviewer('fit');
});
$("#orig").click(function () {
iv1.iviewer('set_zoom', 100);
});
$("#update").click(function () {
iv1.iviewer('update_container_info');
});
});
Does anyone have idea for how to do that?
Add this callback to your iviewer initialization:
onFinishLoad: function () {
iv1.iviewer('zoom_by', 1);
}
Fiddle updated here.
This is my imgSelectArea code:
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
handles: true,
autoHide: false,
minChars: 0,
autoFill: true,
selectOnly: true,
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onSelectEnd: function (img, selection) {
$("#tagBox").show();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = selection.x2;
var y2 = selection.y2;
var position = $('#<%=imgMain.ClientID%>').position();
}
});
This works fine but I want to know when imgSelectArea is closed i.e when you click on overlay area, I want to get notified. I couldn't find this in documentation.
This is the documentation link:
http://odyniec.net/projects/imgareaselect/usage.html#callback-functions
Has anybody got around this issue?
Ok, I haven't got a working dev environment where I am so I can't test this but...
In jquery.imgareaselect.js (I'm using v0.9.8) around line 421:
function cancelSelection() {
$(document).unbind('mousemove', startSelection)
.unbind('mouseup', cancelSelection);
hide($box.add($outer));
setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
if (!this instanceof $.imgAreaSelect) {
options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection());
}
/*ADD THIS LINE*/
options.onCancelSelection(img);
}
Also, around line 461, add a default, empty function:
...
onInit: function () {},
onSelectStart: function () {},
onSelectChange: function () {},
onCancelSelection: function () {}, /* Add This line */
onSelectEnd: function () {}
}, options));
You should then be able to register an event handler as usual...
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
...
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onCancelSelection: function (img) {
/*Do something*/
},
...
});
That's about the best I can do in notepad/ie. If it's still an issue tomorrow, I'll have a go with a dev env.