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

Submitted by: 
Language: 
Visitors have accessed this post 4139 times.

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

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.