SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jquery append and fadeIn help?

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Move the bracket around the fade and then it should fade the list item and not the ol (with any luck).
    Code:
     $("#Save ol").append($(this).clone(false).hide().fadeIn(500));

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,069
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    A better way would be to first hide it, then append it, and then fade in. i.e. :

    Code javascript:
    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.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ScallioXTX View Post

    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.
    Good point Remon

  5. #5
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    After you've hidden it, you need to remove it then get the total again.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shtoom View Post
    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 ??
    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.

    Code javascript:
    $(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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shtoom View Post
    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?
    You can use cookies. Here's a jQuery plugin that helps you to handle that side of things.
    https://github.com/carhartl/jquery-cookie
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

    Code:
    total += parseFloat(this.innerHTML)//.toFixed(2)
    but it just chains the numbers together..

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shtoom View Post
    but it just chains the numbers together..
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the quick reply paul. I updated it as you recommend but this did not work?

    Code:
    $('#total').text(total).toFixed(2);
    http://jsfiddle.net/AATfe/344/

  14. #14
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shtoom View Post
    What is the reason for the calculation to explode like that in the first place? How come toFixed(2) wasn't working?
    Because you should have been applying toFixed to the total, and not to the jQuery object.

    Code javascript:
    $('#total').text(total.toFixed(2));
    Last edited by paul_wilkins; Aug 26, 2011 at 05:50.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah thats one thing I didnt try! Finally got it working Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •