How to fade out elements on delete in MeteorJS - javascript

Take a look at: http://shopping-list.meteor.com. I want to fade out the items when they're deleted instead of having them instantly disappear, and I'm not sure how I'd implement this.
The code is at http://github.com/chintanparikh/shopping-list.
If anyone can set me on the right path, that'd be awesome.
Cheers!

Have you tried using the callback:
Template.item.events({
'click .close': function()
{
var self = this;
$(self).fadeOut('slow', function() { Items.remove(self); });
}
})
Update: added "self" as suggested by Rahul.

Try this:
Template.item.events({
'click .close': function()
{
//get parent (li) and fade it out.
$(this).parent().fadeOut();
Items.remove(this);
}
})

Related

Jquery function should work with subclasses, not for all classes

A have a this jquery function....
$(".rolled-wrap").on('click', function() {
$(this).each(function() {
$('.button-text span').text($('.button-text span').data('hover'));
$('.button-text span').attr("data-hover", $('.button-text span').data('hover'));
});
});
this function need working only for subclasses, current .rolled-wrap (e.g. .rolled-wrap (this) .button-text span)..... however clicking on one class, result summbit for all .button-text span.... I do not know what to do, I will be grateful for any help. thank you in advance
To look inside the target element use .find()
$(".rolled-wrap").on('click', function() {
$(this).find('.button-text span').text($('.button-text span').data('hover'));
$(this).find('.button-text span').attr("data-hover", $('.button-text span').data('hover'));
});

Mootools function callback

How can I make sure that the thankyou fades in only after the newsletter fades out?
overlay_newsletter.fade('out');
thankYou.setStyle('display', 'block').fade('in');
The following doesn't seem to work
overlay_newsletter.fade('out' function(){
thankYou.setStyle('display', 'block').fade('in');
});
I don't know how your markup looks like so I made my own demo (here) that runs on mouseover.
var afterfadeout = function () {
alert('complete');
thankYou.setStyle('display', 'block').fade('in');
};
overlay_newsletter.set('tween', {
onComplete: afterfadeout
});

How to hide div on mouseout?

I'm trying to achieve a simple hover effect. When a user hovers an image (a view filled with images), it should show an extra div. No problem there.
But when I want to do the opposite thing, hide the same div when the user leaves the area of the div, it doesn't work: the div won't go away when leaving the div area (which should be done by default when using the hover, no?).
This is the code I use:
$(document).ready(function () {
$('.views-field-field-photo-fid').out(function () {
showDiv($(this), $('.views-field-title'));
});
$('.views-field-field-photo-fid').out(function () {
hideDiv($(this), $('.views-field-title'));
});
});
function showDiv(sender, object) {
$(object).show();
}
function hideDiv(sender, object) {
$(object).hide();
}
So far, I've tried .mouseenter, .mouseleave, .hover, .out, but nothing works to hide the div after leaving the div area.
UPDATE
I found the solution, more or less:
$(document).ready(function() {
$('#uicarousel-news-preview-block-2 .views-field-field-photo-fid').hover(
function() { $(this).find('.views-field-title').show(); },
function() { $(this).find('.views-field-title').hide(); }
)
});
But since there are a lot of .views-field-title, it's hiding/showing them too. So I figured to use the find, but no solution there.
Any ideas?
There is no jQuery function called out, I am not sure whether you are using a plugin or not. Anyway, this how a correct hover declaration should look like:
<script style="text/javascript">
$(document).ready(function() {
$('.views-field-field-photo-fid').hover(
function() {
showDiv($(this), $('.views-field-title'));
},
function() {
hideDiv($(this), $('.views-field-title'));
});
});
function showDiv(sender, object) {
$(object).show();
}
function hideDiv(sender, object) {
$(object).hide();
}
</script>
I suggest that you take a look at the jQuery.hover documentation.

Using unbind, I receive a Javascript TypeError: Object function has no method 'split'

I've written this code for a friend. The idea is he can add a "default" class to his textboxes, so that the default value will be grayed out, and then when he clicks it, it'll disappear, the text will return to its normal color, and then clicking a second time won't clear it:
$(document).ready(function() {
var textbox_click_handler = function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind(textbox_click_handler);
};
$(".default").mouseup(textbox_click_handler);
});
The clicking-to-clear works, but I get the following error:
Uncaught TypeError: Object function clear_textbox() { ... } has no method 'split'
what is causing this? How can I fix it? I would just add an anonymous function in the mouseup event, but I'm not sure how I would then unbind it -- I could just unbind everything, but I don't know if he'll want to add more functionality to it (probably not, but hey, he might want a little popup message to appear when certain textboxes are clicked, or something).
How can I fix it? What is the 'split' method for? I'm guessing it has to do with the unbind function, since the clearing works, but clicking a second time still clears it.
You can do it like this:
var textbox_click_handler = function(e) {
$(this).removeClass('default')
.attr('value', '')
.unbind(e.type, arguments.callee);
};
$(function() {
$(".default").mouseup(textbox_click_handler);
});
Or use the .one function instead that automatically unbinds the event:
$(function() {
$(".default").one('mouseup', function() {
$(this).removeClass('default').attr('value', '');
});
});
The unbind needs an event handler while you are specifying a function to its argument thereby giving you the error.
I am not sure if this is really different but try assigning the function to a variable:
var c = function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind('mouseup');
}
and then:
$(".default").mouseup(function(){
c();
});
if you don't want to completely unbind mouseup, check for the current state using hasClass(). No need to unbind anything.
$(document).ready(function() {
$('.default').bind('mouseup', function(e) {
var tb = $(this);
if(tb.hasClass('default')) {
tb.removeClass('default').val('');
}
});
});
Make sure you are unbinding mouseup:
function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind('mouseup');
}
$(function() {
$('.default').mouseup(clear_textbox);
});
Also I would write this as a plugin form:
(function($) {
$.fn.watermark = function(settings) {
this.each(function() {
$(this).css('color', 'gray');
$(this).mouseup(function() {
var $this = $(this);
$this.attr('value', '');
$this.unbind('mouseup');
});
});
return this;
};
})(jQuery);
so that your friend can simply:
$(function() {
$('.someClassYourFriendUses').watermark();
});

jQuery Multiclasses function

I'm trying to create function that will do this same thing for 3 different classes. The only problem is that every time when I hove over any of the divs it affect all the others instead just one.
Could anyone advice me please how can I make it work separately for each class on hover stage:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
Thank you for your help in advance.
Dom
If the divs have only one kind of subclass each, then it's pretty simple:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
If they have multiple subclasses, you'll have to first check which class the current div belongs to and build the selector based on it.

Categories

Resources