Fade font color in/out when checkbox checked

**drennan** · 08-25-2011 08:34 AM

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>

**DanInMA** · 08-25-2011 09:20 AM

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

**drennan** · 08-25-2011 09:30 AM

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>

**DanInMA** · 08-25-2011 09:37 AM

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>

**DanInMA** · 08-25-2011 09:38 AM

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

**drennan** · 08-25-2011 09:43 AM

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

**DanInMA** · 08-25-2011 09:51 AM

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?

**drennan** · 08-25-2011 09:53 AM

yes, but black to red to black

**DanInMA** · 08-25-2011 09:57 AM

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>

**DanInMA** · 08-25-2011 09:58 AM

hows that?

**drennan** · 08-25-2011 10:01 AM

Hmmm, not doing anything now.

**drennan** · 08-25-2011 10:02 AM

sorry, my mistake its working. Just what I was looking for. thanks

**drennan** · 08-25-2011 10:06 AM

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?

**drennan** · 08-25-2011 10:08 AM

OK, I assigned the fields classed and applied the script to the class. All working

Sorry, just getting to grips with this.

**DanInMA** · 08-25-2011 10:09 AM

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: Fade font color in/out when checkbox checked

Thread Tools

Display

Fade font color in/out when checkbox checked

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions