SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How-to: text input fadeout

    Hi,

    How can I fade out input and textarea values? All my attempts result in fading out the whole elements, not their content.

    Thanks in advance!

    Mike

  2. #2
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using jQuery:

    <script>
    $("#myInput").click(function() {
    $(this).hide("slow");
    });
    </script>

    <input id="myInput" />

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by transio View Post
    using jQuery:

    <script>
    $("#myInput").click(function() {
    $(this).hide("slow");
    });
    </script>

    <input id="myInput" />
    It fades out the whole input element, not just its value.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You could use the jquery animate plug-in and fade the text from the background color to the correct foreground colour. If it's just the default values you are fading then you'd need to check the default values against the current text input value and then once faded clear the attribute value and then reset the text color back to the correct color so you could see what's being typed in.

    Or maybe something like this plugin would do the hard work for you. You could set the color to match the background again etc.

  5. #5
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha... misunderstood the request.

  6. #6
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This method fades the text by changing its colour until it matches the background colour. I have done it using a transition from black to white. Other combinations will need different intermediate values for the colours chosen.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Fade textbox inout</title>
    <script type="text/javascript">
    <!--
    var allFades=new Array(); 
    var fadeCols=["000","080808","121212","1D1D1D","2A2A2A","383838","484848","575757","666","787878","888988","9A9A9A","AAA","BABABA","C9C9C9","D6D6D6","E3E3E3","FFF"]; // global
    // ---------------------
     
    var tOut, currentColour=-1;  // global
     function fadeIt()
      { clearTimeout(tOut);
        // reduce colour
          ++currentColour;
          window.status=currentColour;
          if(currentColour<fadeCols.length)
           { for(i=0;i<allFades.length;i++)
              { allFades[i].style.color = "#"+fadeCols[currentColour]; 
              } 
             tOut=setTimeout(fadeIt, 100)
           } 
      } 
    // -----------------------
    window.onload=function(){
     // get collection of class fade objects
       var i, dfe=document.myForm.elements;
       for( i=0;i<dfe.length; i++)
        { if(dfe[i].className=="fade")
           { allFades[allFades.length]=dfe[i]; }
        }
      }  
    // -----  
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; font-weight:bold; text-align:center; margin:10px 0px; }
    form { text-align:left; }
    #wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin:0px auto;  }
     
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <form name="myForm">
        <p><input class="fade" type="text" name="tBox1" value="BBB" size="20"> </p>
        <p><input class="fade" type="text" name="tBox2" value="CCCCC" size="20"> </p>
        <p><textarea class="fade" name="tArea1" cols="50" rows="5">HHHHHHHH</textarea></p>
        <p><input type="button" value="Fade input" name="B1" onclick="fadeIt()"> </p>
      </form>
      <!-- end form -->
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>

  7. #7
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a more interesting way to do the same thing. This one automatically determines all of the intermediate fade colours, rather than putting them in by hand.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Fade textbox input 2</title>
    <script type="text/javascript">
    <!--
    var allFades=new Array(), fadeCols=new Array(), tOut, currentColour=-1; // global
    // --------------------- 
    // fades all inout box text with class fade
     function fadeIt()
      { clearTimeout(tOut);
        // reduce colour
          ++currentColour;
          var i;
          if(currentColour<fadeCols.length)
           { for(i=0;i<allFades.length;i++)
                { allFades[i].style.color = fadeCols[currentColour]; 
                } 
             tOut=setTimeout(fadeIt, 100)
           } 
      } 
    // -----------------------
    window.onload=function()
     { // get collection of class fade objects
       var dfe=document.myForm.elements;
       for(var i=0;i<dfe.length; i++)
        { if(dfe[i].className=="fade")
           { allFades[allFades.length]=dfe[i]; }
        }
    // fill fadeCols array
        var hexChars="0123456789ABCDEF";
        var result, a, b;
        for(var i=0;i<=255;i=i+15)
         { b= i%16;
           a=(i-b)/16; 
           result=hexChars.charAt(a)+hexChars.charAt(b); 
           fadeCols[fadeCols.length]="#"+result+result+result;
        } 
          // make sure last one is background colour 
           fadeCols[fadeCols.length]="#FFFFFF";
      }  
    // -----  
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; text-align:center; margin:10px 0px; }
    input, textarea { font-weight:bold; font-size:14px; color:#000; }
    form { text-align:left; }
    #wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin:0px auto;  }
     
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <form name="myForm">
        <p><input class="fade" type="text" name="tBox1" value="BBB" size="20"> </p>
        <p><input class="fade" type="text" name="tBox2" value="CCCCC" size="20"> </p>
        <p><textarea class="fade" name="tArea1" cols="50" rows="5">HHHHHHHH</textarea></p>
        <p><input type="button" value="Fade input" name="B1" onclick="fadeIt()"> </p>
      </form>
      <!-- end form -->
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>

  8. #8
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul and Allan,

    Good workaround, but what if the the text fields have a background image rather than a simple color?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Is this for placeholder text only or are you doing something else with the values?

    If it was for placeholder text then you could absolutely place an element on top of the input in question which just containes the placeholder text and then fade that instead. You'd have to tie up all the loose ends etc as mentioned before

  10. #10
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    Is this for placeholder text only or are you doing something else with the values?
    Actually, I'd like the default values to fade out on focus.

    If it was for placeholder text then you could absolutely place an element on top of the input in question which just containes the placeholder text and then fade that instead.
    Seems clever and the only choice!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by White horse View Post
    Actually, I'd like the default values to fade out on focus.


    Seems clever and the only choice!
    Although once faded out you'd probably have to move it out of the way and then set the focus in the input underneath. You'd also have to ensure that users with javascript disabled had a usable method also as the element on top may stop them from getting to the input.

    Instead perhaps better place the graphical input background in a parent of the input and then set the inputs background to transparent and borders to none. Then you can just fade in and out the input text as you originally wanted.

  12. #12
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    Instead perhaps better place the graphical input background in a parent of the input and then set the inputs background to transparent and borders to none. Then you can just fade in and out the input text as you originally wanted.
    Perfect!

  13. #13
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was implementing your idea when I came to this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    * {font: 10pt Arial}
    div.container {width:244px; height:22px; border:1px solid red;}
    input {width:244px; height:22px; padding:3px;}
    </style>
    </head>
    <body>
    <div class="container"><input type="text" value="text"></div>
    </body>
    </html>
    vs.

    Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    * {font: 10pt Arial}
    div.container {width:244px; height:22px; border:1px solid red;}
    input {width:244px; height:22px; padding:3px;}
    </style>
    </head>
    <body>
    <div class="container"><input type="text" value="text"></div>
    </body>
    </html>
    If I don't use a doctype, the result seems correct!

  14. #14
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even the following doesn't look right:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    * {font: 10pt Arial}
    div.container {width:244px; height:22px; border:1px solid red;}
    input {width:100%; height:100%;}
    </style>
    </head>
    <body>
    <div class="container"><input type="text" value="text"></div>
    </body>
    </html>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Set it up like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    form{
        margin:0;
        padding:0;
        font-family:Arial, Helvetica, sans-serif;
    }
    label{
        font-size:13px;
        vertical-align:middle;
        display:inline-block;
        width:200px;
        height:22px;
        line-height:22px;
        margin:0 10px 0 0;
        text-align:right;
    }
    .inp, .inp input {
        width:244px;
        height:22px;
        margin:0;
        line-height:22px;
        border:1px solid red;
        background:blue;
        display:inline-block;
        font-family:Arial, Helvetica, sans-serif;
        font-size:13px;
        vertical-align:middle;
    }
    .inp input {
        border:none;
        background:transparent;
        padding:0 10px;
        width:224px;
        color:#fff;
    }
    </style>
    </head>
    <body>
    <form name="form1" method="post" action="">
        <fieldset>
        <legend>Example Form</legend>
        <label for="fade1">Enter text:</label>
        <span class="inp">
        <input type="text" name="fade" id="fade1" value="Enter text">
        </span>
    </fieldset>
    </form>
    </body>
    </html>


Tags for this Thread

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
  •