Facebook Like Friend Suggestions effect using jquery

By: Unknown on 07:27

Share it Please

Tweet

"People You May Know" of facebook

One of the Most popular Social networking feature "People you may know" on sidebar.Today ,we will se the tutorial on how to develop such effects using the Jquery,Html and css .You can develop such for your site with the database containing the profile image and just rotating the people.So you can have this featureon your site as well

The output will be

DEMO HERE

Designing The Page
index.html

<div style=" margin-top:40px; margin-left:30px" align="center">
<div id="left"style="padding-bottom:25px; font-size:15px ;float:left;">Click Delete Button "<b> X </b>"</div>
<span style=" padding-left:20px; font-weight:bold;">Suggestions</span>
<ul id="facebook">
<li id="list1">
<img src="img1.jpg" /> <span class="del"><a href="#" class="delete" title="Delete this user " id="1">X</a></span>
<a href="" class="user-title">Mark Zuckerberg</a>
<span class="addas">Add as Friend</span>
</li>
</ul><br/><br/><br/>
<h3 >
only Subscribers to get source through email</h3>
<div id="footer">
LetscreateLab production by venkatesh pillai
<a align="right" href="http://letscreatelab.blogspot.in" >Back to site</a>
</div>

Adding The effects to The Page

$(function()
{
$(".delete").click(function(){
var element = $(this);
var I = element.attr("id");
$('li#list'+I).fadeOut('slow', function() {$(this).remove();});      
return false;
});
});

Applying The stylesheet

*{margin:0;padding:0;}
#facebook{
height:60px;
width:250px;
overflow:hidden;
background:#F4F8FF;

padding:6px 10px 14px 10px;;
}
#facebook li{
border:0; margin:0; padding:0; list-style:none;
}

#facebook li{
height:60px;
padding:5px;
list-style:none;

}
#facebook a{
color:#000000;
text-decoration:none;

}
#facebook .user-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
color:#36538D;
}
#facebook .addas{
display:block;
font-size:11px;
color:#666666;
}
#facebook img{
float:left;
margin-right:14px;
padding:4px;

}
#facebook .del
{
float:right; font-weight:bold; color:#666666
}
#facebook .del a
{
color:#000000;
}
#facebook .del a:hover
{
background-color:#36538D;
padding-left:1px;
padding-right:1px;
color:#ffffff;
}

Please subscribe to our newsletter to Get the source code.only subscribed user to get the source code

Comment below what you think of this if you have any suggstion  you are welcomed Keep commenting!