Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="pesa"><p>PERSONAL INFORMATION</p>
- <ul>
- EMAIL:<li class="editable"><?php echo $email;?></li><input type="button" value="edit here">
- NAME:<li class="editable"><?php echo $name;?></li><input type="button" value="edit here">
- TELLPHONE:<li class="editable"><?php echo $tel;?></li>
- COUNTRY:<li class="editable"><?php echo $country;?></li>
- CITY:<li class="editable"><?php echo $city;?></li>
- </ul>
- </div>
- $(document).ready(function()
- {
- var oldText, newText;
- $(".editable").hover(
- function()
- {
- $(this).addClass("editHover");
- },
- function()
- {
- $(this).removeClass("editHover");
- }
- );
- $(".editable").bind("dblclick", replaceHTML);
- $(".btnSave").live("click",
- function()
- {
- newText = $(this).siblings("form")
- .children(".editBox")
- .val().replace(/"/g, """);
- $(this).parent()
- .html(newText)
- .removeClass("noPad")
- .bind("dblclick", replaceHTML);
- }
- );
- $(".btnDiscard").live("click",
- function()
- {
- $(this).parent()
- .html(oldText)
- .removeClass("noPad")
- .bind("dblclick", replaceHTML);
- }
- );
- function replaceHTML()
- {
- oldText = $(this).html()
- .replace(/"/g, """);
- $(this).addClass("noPad")
- .html("")
- .html("<form><input type="text" class="editBox" value="" + oldText + "" /> </form><a href="#" class="btnSave">Save changes</a> <a href="#" class="btnDiscard">Discard changes</a>")
- .unbind('dblclick', replaceHTML);
- }
- }
- );
- #pesa a{
- color: #000;
- }
- #pesa a:hover{
- color: #;
- }
- #pesa a:hover{
- text-decoration: none;
- }
- h1{
- font-size: 30px;
- padding: 0;
- margin: 0;
- }
- h2{
- font-size: 20px;
- }
- .editHover{
- background-color: #E8F3FF;
- }
- .editBox{
- width: 326px;
- min-height: 20px;
- padding: 10px 15px;
- background-color: #fff;
- border: 2px solid #E8F3FF;
- }
- #pesa ul{
- list-style: none;
- }
- #pesa li{
- width: 330px;
- min-height: 20px;
- padding: 10px 15px;
- margin: 5px;
- }
- li.noPad{
- padding: 0;
- width: 360px;
- }
- #pesa form{
- width: 100%;
- }
- .btnSave, .btnCancel{
- padding: 6px 30px 6px 75px;
- }
- .block{
- float: left;
- margin: 20px 0;
- }
- function replaceHTML()
- {
- $(this).removeClass('editHover');
- }
- <div id="pesa"><p>PERSONAL INFORMATION</p>
- <div class="ul">
- <div>
- EMAIL:<div class="li editable">test</div>
- <input type="button" value="edit here" class="jim"><br>
- </div>
- <div>
- NAME:<div class="li editable">name</div>
- <input type="button" value="edit here" class="jim">
- </div>
- <div>
- TELLPHONE:<div class="li editable">000000000</div>
- </div>
- <div>
- COUNTRY:<div class="li editable">Tazmania</div>
- </div>
- <div>
- CITY:<div class="li editable">Fouilly les oies</div>
- </div>
- </div>
- </div>
- $(document).ready(function(){
- $(".editable").hover(
- function()
- {
- if(!$(this).hasClass("noPad")){
- $(this).addClass("editHover");
- }
- },
- function()
- {
- $(this).removeClass("editHover");
- }
- );
- $(".editable").bind("dblclick", function(){
- replaceHTML(this);
- });
- $(".jim").bind("click", function(){
- replaceHTML($(this).siblings(".li"));
- });
- $(".btnSave").live("click",
- function(){
- $(this).parent()
- .html($(this).parent().find("form input").val())
- .removeClass("noPad");
- });
- $(".btnDiscard").live("click",
- function(){
- $(this).parent()
- .html( $(this).parent().find("form").data("oldText") )
- .removeClass("noPad");
- });
- function replaceHTML(element){
- if( $(element).hasClass("noPad") ){
- return
- }
- var value = $(element).html().replace(/"/g, """);
- $(element).addClass("noPad")
- .html("<form><input type="text" class="editBox" value="" + value + "" /> </form><a href="#" class="btnSave">Save changes</a> <a href="#" class="btnDiscard">Discard changes</a>");
- $(element).removeClass("editHover");
- $(element).find("form").data("oldText", value);
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement