Jquery append and fadeIn help?

JavaScript
1

Hey guys please see this example Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

When you click an item they are cloned in a new ordered list. Problem is every time a new item is clicked all the saved items in the new list fadeIn. Does anyone know how to make it so just the newly clicked item does the fadeIn effect??

2

Move the bracket around the fade and then it should fade the list item and not the ol (with any luck).


 $("#Save ol").append[COLOR=#88FF88][B]([/B][/COLOR]$(this).clone(false).hide().fadeIn(500)[COLOR=#88FF88][B])[/B][/COLOR];
3

A better way would be to first hide it, then append it, and then fade in. i.e. :


var clone=$(this).clone(false).hide();
$("#Save ol").append(clone);
clone.fadeIn(500);

Paul’s version should also work in theory, but can have timing issues in that it already faded in when it’s appended (on slow -or heavily loaded- systems), so you don’t see the intended effect.

4

Good point Remon :slight_smile:

5

cool thanks for help guys!

I have one more question… Please click this link Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
When items are clicked in the first list the value is added to the total but when an item is removed from the new list the total does not change… Any ideas how to update the total when the item is removed?

6

After you’ve hidden it, you need to remove it then get the total again.

7

OK 272 revisions later this is where I have got it to… Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

When you remove an item from the new list an alert pops up with the current total minus the amount from the item that was clicked. The alert sum is correct but for some reason the total is not updating and removing the value that is in the pop up… Can someone explain how to get this working ??

8

That’s the wrong approach, because the hidden elements are still going to be there mucking things up for you when you remove a second item.

When you hide it, use a callback to do things after the hiding has finished occurring.


$(this).fadeOut(500, function () {
    $(this).remove();
    ...
}

That will allow you to then remove the element, and to then calculate the price from the remaining elements.

9

thanks Paul I was aware of that problem but didn’t get round to fixing it.

wow finally got there in there in the end… check it out! Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

This brings me onto another question :slight_smile: This script currently doesn’t save items that have been added to the saved list but if I was to add this feature how could it be done? Would it be storing cookies and sessions? Right now if you add items and refresh the browser the items will vanish. It would be good to know how to fix this but it is not critical. Thanks for all your help :slight_smile:

10

You can use cookies. Here’s a jQuery plugin that helps you to handle that side of things.

11

I’ve found a bug in this script… Cast your eyes over to Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

After adding a few items to the saved list and at some point the total explodes into a bigger number… I am a bit stumped as to what to do?? How can I limit only 2 numbers to appear after the decimal? I’ve tried adding .toFixed(2)

total += parseFloat(this.innerHTML)//.toFixed(2)

but it just chains the numbers together…

12

Using toFixed() turns it from a number in to a string, so that the fixed number of decimal places can be correctly displayed.

So remove toFixed() from where the total is added up, and use it instead where you display the total.

13

thanks for the quick reply paul. I updated it as you recommend but this did not work?

$('#total').text(total).toFixed(2);
14

I have found an alternative dirty fix for this… Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

I have added .slice(0,5) to the total which hides the “explosion”… Only problem I can see with this is if the total goes over 5 digits but for this is not an issue for this project.

What is the reason for the calculation to explode like that in the first place? How come toFixed(2) wasn’t working?

15

Because you should have been applying toFixed to the total, and not to the jQuery object.


$('#total').text(total.toFixed(2));
16

ah thats one thing I didnt try! Finally got it working :slight_smile: Thanks!