Please write to me if you have some suggestions or problems.....
Live Demo Download Script
Table Structure
CREATE TABLE `fbusers` ( `uid` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `profile` TEXT NOT NULL )
Index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>WebSpeaks.in</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .body { width:230px; margin:50px; } .full_wrapper { border:1px solid #D8DFEA; padding:5px; width:230px; } .text_wrapper { padding:3px; width:187px; } .prof_text { } .edit_img{ height:20px; width:20px; margin:2px; } .edit_link { float:right } .editbox { overflow: hidden; height: 61px; border:0px solid #D8DFEA; width:190px; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding:5px } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Change style on edit link action $('.edit_link').click(function() { $('.text_wrapper').hide(); var data=$('.prof_text').html(); $('.edit').show(); $('.editbox').html(data); $('.editbox').focus(); $('.full_wrapper').css('border','0px'); $('.editbox').css('border','1px solid #D8DFEA'); }); //Mouseup textarea false $(".editbox").mouseup(function() { return false }); $(".editbox").blur(function() { $('.full_wrapper').css('border','1px solid #D8DFEA'); $('.editbox').css('border','0px'); }); //Textarea content editing $(".editbox").change(function() { $('.edit').hide(); var boxval = $(".editbox").val(); var dataString = 'prof='+ boxval; $.ajax({ type: "POST", url: "updProf.php", data: dataString, cache: false, success: function(html) { $('.text_wrapper').html(boxval); $('.text_wrapper').show(); } }); }); //Textarea without editing. $(document).mouseup(function() { $('.edit').hide(); $('.text_wrapper').show(); }); }); </script> </head> <body> <div class="body"> <div class="full_wrapper"> <a href="#" class="edit_link" title="Edit"><img src="edit.PNG" border="0" class="edit_img"></a> <?php include("../connect.php"); $uid=1; /*Use session id or user id for real life application*/ $query = mysql_query("select `profile` from `fbusers` where `uid`='$uid'") or die("There is a problem connecting to database!"); $row=mysql_fetch_array($query) or die("There is a problem connecting to database!"); $profile=$row['profile']; ?> <div class="text_wrapper"> <div class="prof_text"> <?php echo $profile; ?> </div> </div> <div class="edit" style="display:none"> <textarea class="editbox" cols="23" rows="3" ></textarea> </div> </div> </div> </body> </html>
updProf.php
<?php include("../connect.php"); if($_POST['prof']) { $prof=mysql_escape_string($_POST['prof']); $uid=1; mysql_query("update `fbusers` set `profile`='$prof' where `uid`='$uid'") or die("There is some problem."); } ?>
2 comments
nice and usefull. Thanks for sharing
Thnks Mitendra!
We would love to hear from you...