Hai frnds, today im creating facebook like profile edit with jquery without using any database. Here i used the simple .toggle() function means it toggle two functions when a button is clicked, but the .toggle() function is available upto jquery 1.8 version if any one working with jquery 1.9 or above version it does not work so please download the below 1.8 jquery version. All the versions are available in jquery official site. Simply go to http://jquery.com/download/ website scroll down the page to Past Releases of jquery, Download and Enjoy it.

Sample Screenshot 

facebook like profile edit
In this example i'am including the jquery 1.7 version so dnt worry about it. Just copy the example and paste it in your notepad then save it as .html file and Run it. In the below example i have created the textbox and loaded image dynamically using jquery so observe the example carefully.  


Right Click and save the above two images
 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$('#but').toggle(function(){ 
var val=$('h2').text();
$(this).css({background: 'url(close.gif) no-repeat'})
$('h2').empty();
$('h2').append('<input id="da" type="text" name="box" value="'+val+'"></input>');
},function(){
var value=$("#da" ).val();
 $(this).css({background: 'url(edit.gif) no-repeat'})
$('h2').html(value);
});
});
</script>
<style type="text/css">
<!--
a.edit  {
    float: right;
    background: url(edit.gif) no-repeat;
    padding:100px;
}
-->
</style>
</head>
<body>
<div align="center" style="padding-top:200px">
<div style="width:400px;border:#FF3366;border-radius:8px;
border-style:dotted;height:60px">
<h2>Click here to Edit</h2>
</div>
<div style="width:400px; padding:20px">
<a href="#" class="edit" id="but"></a>
</div>
</div>
</body>
</html>

3 comments:

  1. Education loans are for students after availing quality education. You can apply for the loan online and offline, processing online though is preferred.http://www.thesisexample.info/

    ReplyDelete
  2. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    thesis Writing Service

    ReplyDelete

 
Top