Skip to main content

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


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>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.