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.
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>
(h)
ReplyDeleteEducation 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/
ReplyDeleteI read this article. I think You put a lot of effort to create this article. I appreciate your work.
ReplyDeletethesis Writing Service
It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. gamo coyote libera vendita
ReplyDelete