Facebook like What's In Your Mind Textbox Using PHP and Jquery

Submitted by argie on Wednesday, February 6, 2013 - 19:50.
Hi everyone this tutorial will teach you on how to create a facebook like post status textbox. This tutorial will teach thus beginner programmer who are planning to build an social networking site. This tutorial is made using php and jquery. To start this, let’s follow the steps below.

Step 1: Creating Our Form

To create our form open your php editor and paste the code below and save it as “index.php”
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Update Box Demo</title>
  6. </head>
  7.  
  8. <body>
  9. <div style="margin:50px; padding:10px; background-color:#f2f2f2; width:460px">
  10. <b>Focus on this text box</b><br />
  11. <textarea style="" id="content" placeholder="What's on your mind?"></textarea>
  12. <div id="button_block">
  13. <input type="submit" id="button" value=" Share "/><input type="submit" id='cancel' value=" cancel"  />
  14. </div>
  15. </div>
  16. </body>
  17. </html>

Step 2: Writing Our Javascript

The primary function of this code is it Animate our form. Copy the code bellow and paste between the head tag of the index.php.
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4.  
  5. $(function()
  6. {
  7. $("#content").focus(function()
  8. {
  9. $(this).animate({"height": "85px",}, "fast" );
  10. $("#button_block").slideDown("fast");
  11. return false;
  12. });
  13. $("#cancel").click(function()
  14. {
  15. $("#content").animate({"height": "30px",}, "fast" );
  16. $("#button_block").slideUp("fast");
  17. return false;
  18. });
  19.  
  20.        
  21.  
  22. });
  23. </script>

Step 3: Creating Our CSS

The primary function of this code is it beautify our form. Copy the code bellow and paste between the head tag of the index.php.
  1. <style>
  2. body
  3. {
  4. font-family:Arial, Helvetica, sans-serif;
  5. }
  6. #content
  7. {
  8. width:450px; height:30px;
  9. border:solid 2px #006699;
  10. font-family:Arial, Helvetica, sans-serif;
  11. font-size:14px;
  12.  
  13. }
  14. #button
  15. {
  16. background-color:#006699;
  17. color:#ffffff;
  18. font-size:13px;
  19. font-weight:bold;
  20. padding:4px;
  21. }
  22. #cancel
  23. {
  24. background-color:#dedede;
  25. color:#000;
  26. font-size:13px;
  27.  
  28. padding:4px;
  29. margin-left:10px;
  30. }
  31. #content
  32. {
  33. font-size:14px;
  34. max-width:450px;
  35. }
  36. #button_block
  37. {
  38. display:none;
  39. }
  40. </style>
Rhe Finish code is look like the code bellow
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Update Box Demo</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9.  
  10. $(function()
  11. {
  12. $("#content").focus(function()
  13. {
  14. $(this).animate({"height": "85px",}, "fast" );
  15. $("#button_block").slideDown("fast");
  16. return false;
  17. });
  18. $("#cancel").click(function()
  19. {
  20. $("#content").animate({"height": "30px",}, "fast" );
  21. $("#button_block").slideUp("fast");
  22. return false;
  23. });
  24.  
  25.        
  26.  
  27. });
  28. </script>
  29. <style>
  30. body
  31. {
  32. font-family:Arial, Helvetica, sans-serif;
  33. }
  34. #content
  35. {
  36. width:450px; height:30px;
  37. border:solid 2px #006699;
  38. font-family:Arial, Helvetica, sans-serif;
  39. font-size:14px;
  40.  
  41. }
  42. #button
  43. {
  44. background-color:#006699;
  45. color:#ffffff;
  46. font-size:13px;
  47. font-weight:bold;
  48. padding:4px;
  49. }
  50. #cancel
  51. {
  52. background-color:#dedede;
  53. color:#000;
  54. font-size:13px;
  55.  
  56. padding:4px;
  57. margin-left:10px;
  58. }
  59. #content
  60. {
  61. font-size:14px;
  62. max-width:450px;
  63. }
  64. #button_block
  65. {
  66. display:none;
  67. }
  68. </style>
  69. </head>
  70.  
  71. <body>
  72.  
  73.  
  74. <div style="margin:50px; padding:10px; background-color:#f2f2f2; width:460px; !important">
  75. <b>Focus on this text box</b><br />
  76. <textarea style="" id="content" placeholder="What's on your mind?"></textarea>
  77. <div id="button_block">
  78. <input type="submit" id="button" value=" Share "/><input type="submit" id='cancel' value=" cancel"  />
  79. </div>
  80.  
  81. </div>
  82.  
  83. </body>
  84. </html>
Tags
Facebook like What's In Your Mind Textbox

Add new comment

About text formats
  • 96 views