Friday, May 7, 2010

FaceBook Like profile edit with Jquery

5/07/2010

I have written this simple application for readers who want Facebook like profile edit option in their web pages. the script is very simple & easy to understand. it needs a basic knowledge of Jquery and PHP.
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.");
}
?>

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

2 comments :

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism