Essentially I had an 'animejs' animation trigger when the nav button is clicked and then the same animation would reverse after a second click. It would toggle. Now this no longer works after updating animejs.
I've tried using a variable such as
var playing = true; and to toggle between it but that doesn't possess the same functionality as before.
the code looked something like this (this is simplified)
var navAnimation = anime.timeline({
duration: 100,
});
animation.add({
targets: 'navStuff'
//animation would be here
});
document.querySelector('.nav').onclick = () => {
animation.play();
// animation.play still functions properly
animation.reverse();
// animation.reverse(); is broken
};
//before the update you could simply place a two methods within the onclick function and it would toggle between them but that no longer is the case with animejs
What I want to happen is to be able to use a single target (button) to open my navigation and close it (toggle between the two state). I want to be able to spam the button and not see and glitches (as before).
Please beleive me I've spent an uncessary amount of time trying to get this working and it just refused to giv in.
I've attempted working with heights / transforms / colors, variable diffs, close inspection. Nothing works.
This is how I animate "reverses" now:
const notificationsContainerElement = document.querySelector('#demo-install-notifications-container');
let notificationsContainerAnimation = anime({
targets: notificationsContainerElement,
height: '350px',
easing: 'easeOutElastic(1.5, .5)',
duration: 1500,
delay: 0,
autoplay: false,
});
notificationsContainerElement.addEventListener('click', () => {
if(notificationsContainerAnimation.began === false) {
notificationsContainerAnimation.play();
} else if(notificationsContainerAnimation.began === true) {
notificationsContainerAnimation.began = false;
anime({
targets: notificationsContainerElement,
height: '100px',
easing: 'easeOutElastic(1.5, .5)',
duration: 1500,
delay: 0,
});
}
});
My first animation is autoplay: false, then, when I click an element, I .play() that animation, but notice the checks for the original animation's began. Once you hit play on an animation, the began property keeps changing.
Right...
But just doing notificationsContainerAnimation.reverse() on my animation just doesn't work no matter what. It just doesn't. I strongly believe it has to do with anime not being able to get where it's supposed to actually reverse to - the values.
The logic is sound, there's no way why it shouldn't work...but it doesn't.
So, for now, use 2 animations.
Related
I am working on getting SlideJS running, and have some aspects of presentation and behavior in order.
One thing I haven't yet managed is to get it to automatically slide, or transition, from one slide to the next.
The code that is getting the reported error is line 67 in SlideJS's main plugin file, at the last line besides the closing brace below; my copy is at https://cjshayward.com/wp-content/Slides-SlidesJS-3/source/jquery.slides.js:
if (typeof TouchEvent !== "undefined") {
$.data(this, "touch", true);
this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
}
Commenting out the assignment, with my invocation, suppresses the reported error, but I think the code may want more information than this line which appears to merely halve an existing setting. I can assign, without immediate reported error,
this.options.effect['qwerty'] = 'qwerty';
But I get a similar error (i.e. setting a property of undefined), if I have as much as:
this.options.effect.slide['qwerty'] = 'qwerty';
I've tried a number of configuration options, and I can see the manual circles to click to move between slides, but have not yet managed to get an automatic transition (the plugin supports slide or fade options; I want the 'slide' effect). My present options target is:
<script>// <![CDATA[
jQuery(function(){
jQuery('#slides').slidesjs({
slide:
{
speed: 200
},
interval: 2000,
active: true,
auto: true,
effect: 'slide',
height: 528,
interval: 5000,
pauseOnHover: true,
restartDelay: 2500,
swap: false,
width: 940
});
});
// ]]></script>
In view-source:http://www.slidesjs.com/, there are multiple sample invocatiosn, but the only invocation I see after slidejs.min.js's inclusion (the last script loaded from a URL) is:
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 350,
navigation: false
});
});
</script>
Thanks,
Have look at:-
https://jsfiddle.net/5x2tqdsv/
You need to fix your html and also remove the following line:-
effect: 'slide',
There were two issues.
One was that the HTML needed fixing.
The other was that the options were being presented, flat, where the source to http://www.slidesjs.com/examples/playing/ has:
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
I presently have everything I want, besides the data initially displayed all at once before being Hijaxed (I should be able to address that several ways, and it's not my concern). Besides the HTML issue, there was another issue I had in that I was trying to use a flat dictionary to specify options when I needed to have one option/key (play) have its own dictionary as the value instead of e.g. a number or boolean as its value the way most other options appear to.
The updated JSfiddle I'm working from now is https://jsfiddle.net/ydvtynjL/
I have contenteditable td elements in a table. I'm using bootstrap and table-hover (so the colour changes when you hover over a row. On blur of the td I do an ajax request that updates the value on the server and then I get a response that indicates success or the error. On success I want to indicate that the value has updated successfully. Right now I'm doing this:
var trueColor;
trueColor = $(element).css('backgroundColor');
$(element).animate({
backgroundColor: '#cce2ff'
}, {
duration: 100,
complete: function() {
$(element).delay(10).animate({
backgroundColor: trueColor
}, {
duration: 900
});
}
});
So I'm using the complete callback of the first animate to put the colour back to what I want it to be. The code works but the problem is obviously if you're hovering over the element when it sets trueColor. I've thought of using css animations but the main thing was that I didn't know how to get a "flash" kind of effect (I think maybe keyframes would help but I don't know how to use them let alone how browser compatible they are).
So the question is basically how do I achieve the effect? I don't mind whether it's css or javascript and I welcome superior suggestions if you think there's a better way to give this sort of visual feedback to a user.
Update
Thanks to #chiliNUT I am removing the class to get the colour but the problem was then that jquery's animate had styled the element and so hovering was broken on modified cells. So now I also removeAttr("style") to get rid of that once we're done
var trueColor;
$(el).closest('table').removeClass('table-hover');
trueColor = $(el).css('backgroundColor');
$(el).closest('table').addClass('table-hover');
$(el).animate({
backgroundColor: '#cce2ff'
}, {
duration: 100,
complete: function() {
$(el).delay(10).animate({
backgroundColor: trueColor
}, {
duration: 900,
complete: function() {
return $(el).removeAttr("style");
}
});
}
});
You can remove the hover effect while its doing the display update, then restore it once the display update finishes. You can get the table element containing the td with $(element).closest('table') and then remove the hover effect with removeClass('table-hover') and then put it back with addClass('table-hover'), so
var trueColor;
//remove hover
$(element).closest('table').removeClass('table-hover');
//get original color
trueColor = $(element).css('backgroundColor');
//restore hover
$(element).closest('table').addClass('table-hover');
//..rest of your original code
I have been trying to set up LightBox_Me for a client. The idea is for an Age Verification overlay to appear when the page loads which asks "Are you over 18?". Yes or No. Upon clicking yes, the overlay disappears.
The Overlay will fade in, but I cannot work out how to get it to fade out.
Jive Release Notes with fadeOut support
The above link shows that the there should be support for fadeOut.
I have tried implementing this into the lightbox_me.js file which is where all of the appear effects are, but to no avail.
I have also tried implementing it into my age verification script, which is:
$(window).load(function () {
// Age Verification
if(!$.cookie('legal-age')){
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
//disappearEffect: fadeOut,
//overlayDisappearSpeed: 300,
//lightboxDisappearSpeed: fast,
overlayCSS: {background: '', opacity: 0},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: '*Snip*', path: '/'});
}
});
e.preventDefault();
}
});
The code above shows the 3 lines of code that should determine the fadeout animations.
Any help would be appreciated.
Cheers
If you are using the 'latest' build (which is over two years old now), then those particular options are no longer available. They were originally added over three years ago, and subsequently removed 9 months later.
Unfortunately there doesn't appear to be a graceful built-in way to fade out a lightbox_me lightbox any longer. If you are comfortable with jQuery you could probably re-add the code that was removed from that first commit, although I suspect it was removed for good reason.
A couple of other things worth pointing out:
Unless you're using a pre-1.9.x version of jQuery, the script is going to error out around line 31 - you'll want to replace this:
ie6 = ($.browser.msie && $.browser.version < 7);
...with this:
ie6 = navigator.userAgent.match(/MSIE 6/);
And if you do intend to re-add these effects, you'll want to make sure your values for disappearEffect & lightboxDisappearSpeed are declared as strings, otherwise it will error out:
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
disappearEffect: 'fadeOut',
overlayDisappearSpeed: 300,
lightboxDisappearSpeed: 'fast',
overlayCSS: {background: '', opacity: 0},
closeSelector: '.v-yes',
onClose: function() {
$.cookie('legal-age','yes', {domain: '*Snip*', path: '/'});
}
});
I am making a site currently being tested at test2.applicationcreations.net. With an image gallery that dynamically changes the images. I'm using swipeJS for the slider.
When you navigate to project gallery then to custom homes the new HTML with correct formatting loads in but the rotator does not work. I believe the problem is that swipeJS is not initialized on the new code. I have tried passing the new items to the object using window.mySwipe = new Swipe(document.getElementById('slider')); but I have had no luck.
For some reason if I click on inspect element on Chrome 18 OS X the rotator works with the new content.
Any help getting this working is greatly appreciated. Thank you.
Yup, you got it right, once you have added the new element, all you need to do is reinitialize the mySwipe object.
This is the first initialization of the swipe slider object:
/*----------------------------------------
Swipe slider to enable touch sliding
----------------------------------------*/
document.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 0,
speed: 400,
auto: 5000,
callback: function(event, index, elem) {
// do something cool
}
});
Now just define a method which re-initializes the swipe object.
/*----------------------------------------
Reinitializing the Swipe Slider.
----------------------------------------*/
document.reinit = function(){
document.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 0,
speed: 400,
auto: 5000,
callback: function(event, index, elem) {
// do something cool
}
});
}
Call that method when you have finished adding new elements to the existing slider.
// Finished adding new elements
document.reinit();
so I want the following behavior out of qtip:
the qtip should show up when I click on the object (I got this working without problem)...but then I want to have it disappear after a few miliseconds without me having to do anything....how would you go about configuring qtip to do this?
i tried
hide: {
when : 'inactive',
delay : 100,
fixed: false
}
but it's not working....
any help would be appreciated...thanks
If you only want the tooltip to flash on screen:
$(".tooltip").qtip({
content: "Test tooltip",
api: {
// As soon as the qtip is fully visible..
onShow: function (event) {
// Keep a reference to the qtip..
that = this;
// After 1ms (to let things settle down)
setTimeout(function () {
// Hide the qtip
that.hide();
}, 1); // change this value to have it stay on screen longer
}
},
show: "mouseover"
});
I know this is an old question but just in case someone passes by, the right way to do it in qTip2 is: (events instead of api)
events: {
show: function(event, api){
var that = this;
setTimeout(function () {
// Hide the qtip
that.hide();
}, 3000); // change this value to have it stay on screen longer
}
}
I think your code is correct, but the delay is causing problems. 100ms is only 0.1 seconds, so maybe the qtip is taking longer than that time to render, in which it won't exist yet when it's told to hide itself (just a guess).
I would increase the delay (you probably want your users to see the tip for a few seconds anyway) and see if that helps. Here's an example that uses 1000ms: http://jsfiddle.net/andrewwhitaker/dVEYq/