jQuery Stylish Profile Box Display | Lessoncup Programming Blog

Saturday, 18 January 2014

jQuery Stylish Profile Box Display

Hi, today i am going to tell about how to keep and display a stylish profile box in your website using jquery recently i worked on small social network project and i implement this feature for user profile dashboard, it is very simple just we need aware of regular jquery methods and how to use them according to our requirements. let's see how to implemented this small Stylish Profile Box Display APP


HTML

in html just design the profile box as you wish to display and arrange the div elements in better way and take two buttons like More and Less for navigate the div elements from short info to long info, and display only those elements which you want to sow in short info and hide the other elements those you want to show in long info.. while clicking on More About Me button just display the hidden elements in your better animation way as you comfortable.
<div class="lessoncup">
<span class="close">Close</span>
<div id="profile">

<div style=" border-bottom:1px solid #1d1d1d;" id="bioinfo">

<div id="image"></div>

<h1>Mohammad Khasim</h1><br/>
<h2>Author of Lessoncup</h2>
<p id="short-intro" style="display: block; text-align: center;height: 18px; margin-bottom: 30px; margin-top: 20px;">Pretty friendly, super cute. I Love to share knoweldge.</p>
</div>
<p class="read-more" style="display: block; "><span>More About Me</span></p>

<p id="biginfo" style="font-size: 14px;line-height: 22px;">I'm the creative person of a wonderful Programming Blog. I like programming books, and sportscars. This is my Mohammad Khasim.</p>
<ul id="social-icons"> <li><a class="twitter" target="_blank" href="http://www.twitter.com/lessoncup" title="@lessoncup on Twitter">Twitter</a></li> <li><a class="facebook" target="_blank" href="http://www.facebook.com/lessoncup" title="Facebook Profile">Facebook</a></li> <li><a class="google-plus" target="_blank" href="https://plus.google.com/+Lessoncup/" title="Google+ Profile">Google+</a></li> <li><a class="linkedin" target="_blank" href="http://in.linkedin.com/in/lessoncup" title="Linkedin Profile">LinkedIn</a></li> </ul> </div> </div>

JAVASCRIPT

now write the click functions on read-more and close buttons as a selectors, and i used regular jquery methods like slideUP() animate()  delay() slideDown()  fadeIn()  fadeOut() to complete this beautyfull Stylish profile box
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('.read-more').click(function(){
  
  $(this).slideUp(300);
  
  $('#short-intro').slideUp(300);
  
  $('.lessoncup').animate({height: "250px",marginTop: "250px"}, 500, function(){
   
   $(this).delay(400).animate({height: "550px",marginTop: "80px"}, 500);
   
   $('#bioinfo').delay(250).animate({marginTop: "-30px"}, 500);
   
   $('.close').delay(50).fadeIn('slow');
   
   $('#image').delay(1000).fadeIn('slow');
   
   $('#social-icons').delay(1000).slideDown('slow').animate({top: "20px"}, 500);
   
   $('#biginfo').delay(1000).fadeIn(600);
   
  });
  
 });
 
 
 $('.close').click(function(){
  
  $(this).delay(100).fadeOut('slow');
  
  $('#social-icons').slideUp('slow').animate({top: "-97px"}, 500);
  
  $('#bioinfo').delay(250).animate({marginTop: "0"}, 500);
  
  $('#image').delay(100).fadeOut('slow');
  
  $('#biginfo').hide();
  
  $('.lessoncup').delay(500).animate({height: "250px",marginTop: "250px"}, 500).delay(300).animate({height: "320px",marginTop: "200px"}, 500,function(){
   
  $('.read-more').slideDown(300);
  
  $('#short-intro').slideDown(300);
   
   
  });
  
 });
 
 
});
</script>

Live Demo   Download Script

3 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