SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery - fadeOut text

    JQuery - fadeOut text

    Hi all

    I have a simple form here

    http://www.ttmt.org.uk/forum/jForm/

    There is an empty p tag at the bottom that is populated with text when the send button is clicked without filling in all fields or when the email is sent.

    I wanted to fade out the text after a few seconds. I have achieved this with

    Code:
    $("#status p").fadeOut(4000);
    The problem is once the text has faded out it stays faded out. If I press the send button again no message appears, I assume this is because the <p> is still faded out. How can I reset the opacity of the <p> tag

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="js/jQuery1.4.3.js"></script>
      <script type="text/javascript">
        $(function(){
          $('#contactForm').submit(function(){
            var unameVal = $("#name").val();
            var emailVal = $("#email").val();
            var messageVal = $("#message").val();
            $.post("contact.php", { username: unameVal, email: emailVal, message: messageVal }, function(data){
              $("#status p").html(data);
              $("#status p").fadeOut(4000);
              if(data.indexOf('Thank you')==0) {document.forms[0].reset();}
            });
            return false;
          });
        });
      </script>
    	<title>Form Test</title>
    	<style type="text/css">
    	 *{
         margin:0;
         padding:0;
       }
       html, body{
         height:100%;
         font:100% "Helvetica Neue", Helvetica, Arial, sans-serif;
       }
       form{
         margin:30px;
         width:23em;
       }  
       #status p,
       h1{
         margin:30px;
         font-weight:bold;
       }    
       form fieldset{
         border:0;
       }    
       form label,
       form input,
       form select{
         float:left;
       }
       form label{
         width:100%;
       }
       form input,
       form textarea{
         background:#eee;
         width:100%;
         border-width:0;
         padding:.35em .2em;
         margin-bottom:8px;
         font-size:1em;
         border-top:1px solid #ddd;
         border-left:1px solid #ddd;
         border-right:1px solid #fff;
         border-bottom:1px solid #fff;
         font:1em "Helvetica Neue", Helvetica, Arial, sans-serif;;
       }
       form input:focus,
       form textarea:focus,
       form input:hover,
       form textarea:hover{
         background:#e1dfdf;
       }
       form #send{
         width:80px;
       }
    	</style>
    </head>
      
    <body>
      <form method="post" id="contactForm" action="">
        <fieldset>
          <label for="name">Name:</label>
          <input type="text" id="name" />
          <label for="email">Email:</label>
          <input type="text" id="email" />
          <label for="text">Message:</label>
          <textarea id="message" rows="10" col="30"></textarea>
          <p><input type="submit" value="SEND" id="send" /></p>
        </fieldset>
      </form>
      <div id="status">
        <p></p>
      </div>          
           
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try this

    Code JavaScript:
    $("#status p").show().fadeOut(4000);

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect, thanks

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem


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
  •