This post about how to implement Facebook-like users Suggestions. When you click delete(X) button "Do not show this suggestion" the content disappears slowly and to get the new suggestion content appears. I had developed this using jQuery, PHP just some lines of code.
Take a look at live demo below.
Download Script 
Live Demojavascript code:
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" >
$(function()
{
$(".delete").click(function(){
var element = $(this);
var I = element.attr("id");
$('li#list'+I).fadeOut('slow', function() {$(this).remove();});
});
</script>
</script>
<script type="text/javascript" >
$(function()
{
$(".delete").click(function(){
var element = $(this);
var I = element.attr("id");
$('li#list'+I).fadeOut('slow', function() {$(this).remove();});
return false;
});});
</script>
Design Introduction
Here <ul> with ID = "facebook". The elements height:60px and overflow:hidden;
PHP and HTML code:
Delete(X) button class="delete" and id=<?php echo $user_id; ?>
<ul id="facebook">
while($row=mysql_fetch_array($sql))
{
$user_id=$row['id'];
$user_name=$row['name'];
$user_image=$row['image'];
<img src="<?php echo $user_image; ?> " />
<span class="del"><a href="#" class="delete" id="<?php echo user_id; ?>">X</a></span>
<a href="" class="user-title"><?php echo $user_name;?> </a>
<span class="addas">Add as Friend</span>
</li>
<?php
$sql=mysql_query("some sql query.....");while($row=mysql_fetch_array($sql))
{
$user_id=$row['id'];
$user_name=$row['name'];
$user_image=$row['image'];
?>
<li id="list<?php echo $user_id; ?>"><img src="<?php echo $user_image; ?> " />
<span class="del"><a href="#" class="delete" id="<?php echo user_id; ?>">X</a></span>
<a href="" class="user-title"><?php echo $user_name;?> </a>
<span class="addas">Add as Friend</span>
</li>
<?php
}?>
</ul> CSS Code:
*{margin:0;padding:0;}
#facebook{
height:60px;
width:250px;
overflow:hidden;
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;
}
float:right; font-weight:bold; color:#666666
}
color:#000000;
}
background-color:#36538D;
padding-left:1px;
padding-right:1px;
color:#ffffff;
}
#facebook{
height:60px;
width:250px;
overflow:hidden;
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;
}
nice work!
enjoy :)
Thank you man,,, you are awsome
Little tip for all my sql pages :
$sql = "my query";
$query = mysql_query($sql);
$data = mysql_fetch_array($query);
I prefere use this syntax because you can try directly your $sql with echo for example ;) and you can add many functions to drop injection.
Regards
this code is nice, I was wondering if i click on that, will this works with any lightbox! i tried one this with one of lightbox is not working.
any idea that might work with any other lightbox!
AM
la verdad buenisimo
hey thank u very very much
great work!!
nice tutorial mr.srinivas...
How to remove post from DB? (MySQL)
I mean, if I makes the info in DIV from a database, is there a way to delete those records as well?
ANy tutorial for delete comment?
How to use this to delete post from database?
comment changer le nombre de visible area
sur cet exemple on en affiche un si on veut en afficher 3 par exemple comment procéder
$sql=mysql_query(... ?)what it
nice.
Any idea how to do the same with a datalist control (in C#) rather than with list? I used the following code but it does not hide the datalist item when I click on the X. (I removed the script tags in this sample).
Help is appreciated.
$(function()
{
$('.suggest').click(function(){
var element = $(this);
var I = element.attr("id");
$('#dlActions'+I).fadeOut('slow', function() {$(this).remove();});
return false;
});
});
Nice Post
very usefull.. thank
helpful...thanks
hi some one,, can you help me about this statement?
$sql=mysql_query("some sql query.....");
this is for friends table:
SELECT a.username, a.email
FROM users a, friends b
WHERE a.user_id = b.friend_two
AND b.friend_one = '1'
AND b.role = 'fri'
ORDER BY b.friend_id DESC
LIMIT 30 ;
how do I display the user as a suggestion to make friends?
Nice work Srinivas. I like all your posts. Those are just so simple.
keep tabbing tab key you will see a bug
Thank you working with me Wow
Qute informative and easy to understand and implement as well. Thank you.