Flip Box Style Profile Update in JQuery | Lessoncup Programming Blog

Friday, 8 November 2013

Flip Box Style Profile Update in JQuery

Have you seen in Google+ profile page, we can update some of the content in flipping box style mode, i have developed same concept using jQuery and CSS3. for more details about flip box animation just read my lesson  CSS Image Flip Animations




HTML

design a flip box in good structure and style the elements to better look. for more details about flip box animation just read my lesson  CSS Image Flip Animations
<div id="lessoncup">
<div class="image_front">
        
    <div class="hidden_objects">
    <table width="790" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="755" rowspan="2" align="left" valign="top">
    <div style="padding:10px; line-height:45px; font-family:Tahoma, Geneva, sans-serif; font-size:12px; float:left; margin-right:150px;">
    <strong>Name :</strong> Mohammad Khasim<br/>
    <strong>Email :</strong> pixelmax4u@gmail.com<br/>
    <strong>Website :</strong> www.lessoncup.com<br/>
    <strong>City :</strong> Hyderabad<br/>
    </div>
    
    <div style="padding:10px; line-height:45px; font-family:Tahoma, Geneva, sans-serif; font-size:12px;">
    <strong>Education :</strong> B.Com<br/>
    <strong>Cell :</strong> 00 00 00 00 <br/>
 <strong>Skills :</strong> PHP, Mysql, Ajax, jQuery, CSS3, Html5, Javascript<br/>
    </div>
    </td>
    <td width="35" height="26" align="right" valign="top">
 <img src="1383911359_new-24.png" width="20" height="20" border="0" class="edit"></td>
  </tr>
  <tr>
    <td height="95" align="left" valign="top">&nbsp;</td>
  </tr>
     </table>

    </div>
            
<div class="hidden_objects image_back">
        <table width="790" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="755" rowspan="2" align="left" valign="top">
    <div style="padding:10px; line-height:45px; font-family:Tahoma, Geneva, sans-serif; font-size:12px; float:left; margin-right:150px;">
 <strong>Name :</strong> <input name="" type="text" value="Mohammad Khasim"><br/>
<strong>Email :</strong> <input name="" type="text" value="pixelmax4u@gmail.com"><br/>
  <strong>Website :</strong><input name="" type="text" value="www.lessoncup.com"><br/>
    <strong>City :</strong> <input name="" type="text" value="Hyderabad"><br/>
    </div>
    
    <div style="padding:10px; line-height:45px; font-family:Tahoma, Geneva, sans-serif; font-size:12px;">
    <strong>Education :</strong> <input name="" type="text" value="B.Com"><br/>
    <strong>Cell :</strong>  <input name="" type="text" value="00 00 00 00"><br/>
    <strong>Skills :</strong><input name="" type="text" value="PHP, Mysql, Ajax, jQuery, CSS3, Html5, Javascript"><br/>
    </div>
    </td>
    <td width="35" height="26" align="right" valign="top">
    </td>
  </tr>
  <tr>
    <td height="95" colspan="2">
    <ul class="ul">
    <li class="save">Save</li>
    <li class="cancel">Cancel</li>
    </ul>
 </td>
    </tr>
     </table>
    </div>
          
  </div>
</div>
</div>

CSS

<style>

body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#fff;}

#lessoncup{ width:800px; height:auto; border:solid #CCC 0; padding:5px; margin:0 auto;}

h1{ width:350px; margin:0 auto; padding:10px;}

.image_front {
 width: 800px; height:200px;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: 0.5s;
 border:solid #CCC 5px;
  border-radius:5px;
  box-shadow:0 1px 1px #999;
}

.image_fronthover{
  -webkit-transform: rotateY(180deg);
  position:absolute;  
 }

.hidden_objects {
 position: absolute;
 padding:5px;
 backface-visibility:hidden;
 -webkit-backface-visibility: hidden;
}


.image_back {
  width: 790px; height:190px; padding:5px;
  -webkit-transform: rotateY(180deg);
  background-color:#F8F8F8;
}

.edit{ cursor:pointer;}

ul{ margin:0; padding:0; list-style:none;}

ul li{ padding:5px; float:left; margin:5px; color:#FFF;}
 
.save{ background-color:#66C; padding:10px; cursor:pointer;border-radius:5px;}

.cancel{background-color:#000; padding:10px; cursor:pointer; border-radius:5px;}

input{ padding:5px; border-radius:5px; border:0; color:#333}

</style>

JAVASCRIPT

write the click function to edit icon and apply the "image_fronthover" style using addClass() method to image_front class, this style flip the box to 180 deg, after flip the box we able to see the from of elements to update the profile along with save and cancle buttons

write the click function to save button and update the fields using ajax request ( read this lesson how to send the data using ajax  PHP Registration using jQuery & Ajax  this will guide you about ajax) and remove the class "image_fronthover" from image_front class, it will flip to the first position. and on cancel button just remove the class to flip the box to first position.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('.edit').click(function(){
  
  $('.image_front').addClass('image_fronthover');
  
  
 });
 
 $('.cancel').click(function(){
  
  $('.image_front').removeClass('image_fronthover');
  
 });
 
 $('.save').click(function(){
  
   
   $("#loader").show();
   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading updates</span>');
   
   $('.save').css({ "width": "40px", "cursor": "wait" });
   $('.save').text('Saving.');
   
   $.ajax({

    success:function(msg){
     
     $('.save').css({"width": "30px","cursor": "pointer" });
     $('.save').text('Save');
     $('.image_front').removeClass('image_fronthover');

    }
    
   });
  
  
  
 });
 
});
 
 
</script>

Live Demo   Download Script

5 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons