There will be many tutorials on facebook style scripts over internet but I always try to create some perfect and original looking tutorials that a user want. You can find many useful tutorials at 99points.info which rocks you always. Here is a facebook style profile edit script with demo that is created using jquery and ajax. Hope you will like it.
Database Structure
|
1 2 3 4 5 6 |
CREATE TABLE IF NOT EXISTS `facebook_edit_info` ( `id` int(11) NOT NULL, `user_text` text NOT NULL ) INSERT INTO `facebook_edit_info` (`id`, `user_text`) VALUES (1, 'http://www.99Points.info PHP, jQuery, Ajax and Codeigniter Tutorials '); |
jQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
$(document).ready(function(){ // height of textarea should be equal to text height $("#profile_text_area").css('height', parseInt($(".main_box").height() + 60)); // grow text area when typing $('textarea').elastic(); // on clicking edit link hide main box $('.edit_link').livequery("click", function(e){ $.post("edit_data.php", { }, function(response){ $(".main_box").hide(); $(".edit_box").show(); // show text area box $("#profile_text_area").val(response); $("#profile_text_area").focus(); $(".blurb_inner").css('border', 'none'); // hide out side border }); }); $('#profile_text_area').livequery("blur", function(e){ var text = $("#profile_text_area").val(); $.post("textarea.php?text="+text, { }, function(response){ //$('#profile_text_area').val(response); $(".edit_box").hide(); $(".main_box").fadeIn('slow'); $('.main_box').html(response); }); $(".blurb_inner").css('border', 'solid #6699CC 1px'); }); }); |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.blurb_inner { font-family:Arial, Helvetica, sans-serif; border:solid #6699CC 1px; width:205px; font-size:12px; color:#000000; } .main_box{ width:165px; float:left; padding:5px;} .main_box a{ color:#000000; text-decoration:none;} .main_box a:hover{ text-decoration:underline;} a.edit_link{background:url(pen.png) center center no-repeat; cursor:pointer; margin-left:5px; margin-top:3px; display:block; height:18px; width:18px; float:left;} a.edit_link:hover{ background:url(penhover.png) center center no-repeat; cursor:pointer;display:block; height:18px; width:18px; float:left; } .edit_box{width:165px; float:left;padding:0px;} #profile_text_area{ padding:0px;border:solid #6699CC 1px; margin:0px;} |
textarea.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!--?php include('dbcon.php'); function clickable_link($text = '') { $text = preg_replace('#(script|about|applet|activex|chrome):#is', "\\1:", $text); $ret = ' ' . $text; $ret = preg_replace("#(^|[\n ])([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href=\"\\2\" target=\"_blank\"-- rel="noopener noreferrer">\\2", $ret); $ret = preg_replace("#(^|[\n ])((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href="//\\2\"" target="\"_blank\"" rel="noopener noreferrer">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<a href="\"mailto:\\2@\\3\"">\\2@\\3</a>", $ret); $ret = substr($ret, 1); return $ret; } function checkValues($value = '') { $value = trim($value); if (get_magic_quotes_gpc()) { $value = stripslashes($value); } $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); $value = strip_tags($value); $value = mysql_real_escape_string($value); $value = htmlspecialchars($value); return $value; } $updated_text = ''; $updated_text = checkValues(@$_REQUEST['text']); if($updated_text) //if text has been updated then insert new text { mysql_query("update facebook_edit_info set user_text = '".$updated_text."' where id = 1"); } $result = mysql_query("SELECT * FROM facebook_edit_info"); $num_rows = mysql_num_rows($result); $text = ''; if($num_rows > 0) { while ($row = mysql_fetch_array($result)) { $text = $row['user_text']; } echo clickable_link($text); } else { echo 'Write something about yourself.'; } ?> |
edit_data.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!--?php include('dbcon.php'); $result = mysql_query("SELECT * FROM facebook_edit_info where id = 1"); $num_rows = mysql_num_rows($result); $text = ''; if($num_rows --> 0) { while ($row = mysql_fetch_array($result)) { $text = $row['user_text']; } echo $text; } ?> |
helo
try