www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Fade font color in/out when checkbox checked

  1. #1
    Join Date
    Jun 2008
    Location
    London
    Posts
    175

    Fade font color in/out when checkbox checked

    Hey guys. My code changes the font color of a table row to red when a checkbox is checked, and reverts when unchecked. I need to apply this to the text in a specific DIV rather than the checkbox row. I also need the text to fade to red then revert each time a checkbox changes state, rather than stay red and revert when unchecked. I basically want to draw users attention to a totals panel whenever there is checkbox activity. thanks guys, appreciate any help.

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("#table input").click(function() {
    var color=$(this).attr('checked')?'#e73c27':'#e73c27';
    $(this).parent().parent().children().animate({'color':color}, 500);
    });
    });
    </script>

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    I cant quite wrap my head around what you are tying to do jsut yet, bu Id like to point out you have the same color listed for both options on the color var

  3. #3
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    Sorry, here's the full corrected code. I'm basically trying to make text in a specific DIV 'flash' red when there is any checkbox activity.

    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <title>Test</title>
            <style type="text/css" media="screen">
                html {
                    font-family:Helvetica, sans-serif;
                }
            </style>
            <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
            <script type="text/javascript" charset="utf-8">
                google.load('jquery', '1.4');
                google.load('jqueryui', '1.7.2');
            </script>
            <script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
                    $("#table input").click(function() {
                        var color=$(this).attr('checked')?'#e73c27':'#000';
                        $(this).parent().parent().children().animate({'color':color}, 500);
                    });
                });
            </script>
        </head>
        <body>
            <form>
                <table id="table">
                    <tr>
                        <td width="117">
                            <input type="checkbox" name="cb1" id="cb1" value="y" />
                        </td>
                        <td width="309">
                            Click me
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="cb2" id="cb2" value="y" />
                        </td>
                        <td>
                            Click me
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="cb3" id="cb3" value="y" />
                        </td>
                        <td>
                            Click me
                        </td>
                    </tr>
                </table>
            </form>
        <div id="text">This should flash red (once) when any checkbox changes state</div>
        </body>
    </html>

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    somethig like this perhaps?

    Code:
            <script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
                    $("#table input").click(function() {
                        $(this).parent().parent().children().fadeOut(500).fadeIn(500);
                    });
                });
            </script>

  5. #5
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    you could also use the code you have, but put one of the colors as a much lighter red and do another animate in the callback function of the original animate function. if you would rahter do somethign like that I think I could write it for you

  6. #6
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    Thanks, thats great. the effect is working but rather than fade from black to transparent to black, I need from black to red to black, so a color fade rather than fade. Also it currently affects the checkbox row including the checkbox, not text in the test DIV. thanks again

  7. #7
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    oh wait. so you want the text in that one div to go from red to black back to red whenever any of the checkboxes is clocked?

  8. #8
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    yes, but black to red to black

  9. #9
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Code:
            <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
         $("#table input").click(function () {
             $('#text').animate({'color': '#e73c27'}, 500, function () {
                 $('#text').animate({'color': '#000'}, 500);
             });
         });
     });
            </script>

  10. #10
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623

  11. #11
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    Hmmm, not doing anything now.

  12. #12
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    sorry, my mistake its working. Just what I was looking for. thanks

  13. #13
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    Just went to apply this to my actual page and it's not working on form fields within that DIV, only normal text. Can this solution be applied to text within form elements?

  14. #14
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    OK, I assigned the fields classed and applied the script to the class. All working Sorry, just getting to grips with this.

  15. #15
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    ok, i jsut ran your orginal code on my test server. im still confused I guess. ok so you want the individual "clcik me" text to change whenever the checkbox is checked, or whenever it changes?

    also the text in the #text div, what do you want to happen there?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles