Angular ng-animate using javascript not working as expected - javascript

I tried to implement the demo example using JS but something went wrong with ng-switch ... I can see that new elements are being added in the dom, but ng-switch is not removing the unwanted DIVs. can you pls help ...
Here is the Fiddle...
var ngModule = angular.module('myApp', []);
ngModule.animation('js-wave-enter', function () {
return {
setup: function (element) {
//prepare the element for animation
element.css({ 'position': 'absolute', 'left': '100%' });
},
start: function (element, done, memo) {
//start the animation
element.animate({ 'left': 0 }, function () {
//call when the animation is complete
done();
});
}
}
});
ngModule.animation('js-wave-leave', function () {
return {
setup: function (element) {
//prepare the element for animation
element.css({'position': 'absolute', 'left': 0 });
},
start: function (element, done, memo) {
//start the animation
element.animate({ 'left': '-100%' }, function () {
//call when the animation is complete
done();
});
}
}
});

jQLite does not include the animate() method. You need to include jQuery proper before you include Angular and your code will work fine. So just add the following before the script tag that includes AngularJS:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Updated jsFiddle

Related

Change window onload to work after pagination

I have the following JQuery which works on initial page load:
$(window).on('load', function(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
});
Now that I have added pagination and filters to the page, the window onload obviously won't work once any pagination or filters have been triggered. I understand that I need to create an additional function to ensure the above will still work, however I believe that there is something not write with my code, as when pagination is used, I am still getting no jquery. I am using the correct approach?
This is what I have so far:
document.onreadystatechange = function(){
if (document.readyState === "complete") {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
}
else {
window.onload = function () {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
};
};
}
I am still learning.
Created a function (partA), and then triggered function when required (partB)
// PART A
function cardFunction(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 300);
});
}
// PART B
jQuery(document).ready(function () {
cardFunction();
});

Delay before dragging in gridster

I'm using gridster.net in project, and i've run into problem.
I'm trying to get widgets start dragging only after a second of holding mouse after click. I'm using the next code:
$(".gridster .gs-w").on('mousedown', function(e) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
}, 500);
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
but it didn't work. It seems that i have to call function of starting dragging, something like gridsterObj.on_start_drag.call(gridsterObj, e, ui);, but where can i get the UI object? It's used everywhere in gridster code, but i can't find where it created.
It seems that it jquery UI object. How can i create it?
You should be able to reference the UI object as $.ui or window.jQuery.ui.
So your code should look like this:
$(".gridster .gs-w").on('mousedown', function(e) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
gridsterObj.on_start_drag.call(gridsterObj, $.ui);
}, 500);
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
I've ended with the next code:
$(".gridster .gs-w").on('mousedown', function(e, data) {
var self = this;
if (!data || !data.start) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
$(self).trigger(e, [{ start: true }]);
}, 500);
} else {
$(self).addClass('dragging');
}
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
With that, gridster has delay 0.5 second before starting dragging.

multiple :not() with dynamic element attribute

Here is demo http://jsfiddle.net/NbzaE/3/
What i'm trying to do:
Disable animation if .list-item's attribute data-attr is true
Here is the working example:
$('.list-item > a:not(.active)').hover(function(){
$(this).clearQueue().stop().animate({
marginLeft: 40
}, 250);
}, function(){
$('.list-item:not([data-attr="true"]) > a:not(.active)').clearQueue().stop().animate({
marginLeft: 0
}, 250);
});
But i'm not sure that it's proper. Any ideas?
You really should use mouseenter, mouseleave events, based on: http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event and in your fiddle you have a part setting the data for a parent element on click that could be simpler:
$('li.list-item').on('mouseenter', '>a:not(.active)', function () {
$(this).clearQueue().stop().animate({
marginLeft: 40
}, 250);
});
$('li.list-item').on('mouseleave', '>a:not(.active)', function () {
$(this).clearQueue().stop().animate({
marginLeft: 0
}, 250);
});
$('.list-item[data-toggle="collapse"] ').on('click', '>a', function () {
$(this).parent().data('attr', !$(this).parent().data('attr'));
});
EDIT1: Side note, you can also capture that second event on the element not on the link saving the .parent() traversal as in:
$('.list-item[data-toggle="collapse"] ').click( function () {
$(this).data('attr', !$(this).data('attr'));
});
AND IF you are dynamically creating those li elements attach to the ul:
$('ul').on('click', '.list-item[data-toggle="collapse"] ', function () {
alert($(this).data('attr'));
$(this).data('attr', !$(this).data('attr'));
});

How do I "do stuff" at the end of this crazy jQuery animation loop without errors?

I am trying to "do some stuff" at the end of this crazy animation loop... The alert I have commented out at the end of the animation works great... However, what I really need it to do is remove/hide the closest div with a class of .item (something like this)
var jremove = $(this).closest('.item').hide();
$container.masonry('remove', jremove );
//Then trigger a reload function for masonry
reloadMasonry(); // not working yet
When I try do do anything but alert a simple message I get an error like this:
Uncaught TypeError: Object #<HTMLImageElement> has no method 'closest'
You can see it at the bottom of the animation below:
jQuery(function ($) {
$("body").on("click", ".clip_it", function () {
if ($(this).parent().find(".clip_it").length<1){
$(this).after('<a class="clip_it" href="javascript:void(0)" onclick="">CLIP IT!</a><img src="http://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gif" class="ToBeAnimated">');
}
animationLoop($(this).closest(".item-inner").eq(0),$(this).parent().find(".ToBeAnimated").eq(0));
});
});
function animationLoop(ctx,ctx2) {
ctx2.fadeIn();
ctx2.css({
top: (0 - parseInt(ctx2.height()) / 2),
left: (0 - parseInt(ctx2.width()) / 2),
position:"absolute",
"z-index":800
}).rotate(270);
ctx2.animate({
top: ctx.height() - ctx2.height() / 2
}, 1000, function () {
ctx2.animate({
rotate: "180deg"
}, 1000, function () {
ctx2.animate({
left: ctx.width() - ctx2.width() / 2
}, 1000, function () {
ctx2.animate({
rotate: "90deg"
}, function () {
ctx2.animate({
top: 0-ctx2.height() / 2
}, 1000, function () {
ctx2.animate({
rotate: "0deg"
}, function () {
ctx2.animate({
left: (0 - parseInt(ctx2.width()) / 2)
}, 1000, function () {
setTimeout(animationLoop(ctx,ctx2), 1000);
//I want to remove the coupon (.item) & reload masonry here
// TEST ALERT WORKS = alert("animation complete");
var jremove = $(this).closest('.item').hide();
$container.masonry('remove', jremove );
reloadMasonry();
return false;
});
});
});
});
});
});
});
}
I am open to other suggestions if you think there is a better way? THANKS FOR HELPING!
Uncaught TypeError: Object #<HTMLImageElement> has no method 'closest'
The problem is that $ outside of your ready handler (the function you're passing into jQuery(function($) { ... });) is not pointing to jQuery, it's pointing to something else (my guess would be Prototype or MooTools). So $(this) returns an HTMLImageElement (probably enhanced by Prototype or MooTools) rather than a jQuery object, and so it has no closest function.
Either move the animationLoop function into your ready handler (so it sees the $ that jQuery passes into the ready handler instead of the global), or use jQuery instead of $ in that function.

Animate an Image after hovering an item a second

after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing
Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.
Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.

Categories

Resources