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!
ReplyDeleteenjoy :)
Thank you man,,, you are awsome
ReplyDeleteLittle tip for all my sql pages :
ReplyDelete$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.
ReplyDeleteany idea that might work with any other lightbox!
AM
la verdad buenisimo
ReplyDeleteThis comment has been removed by the author.
ReplyDeletehey thank u very very much
ReplyDeletegreat work!!
ReplyDeletenice tutorial mr.srinivas...
ReplyDeleteHow to remove post from DB? (MySQL)
ReplyDeleteI mean, if I makes the info in DIV from a database, is there a way to delete those records as well?
ReplyDeleteANy tutorial for delete comment?
ReplyDeleteHow to use this to delete post from database?
ReplyDeletecomment changer le nombre de visible area
ReplyDeletesur cet exemple on en affiche un si on veut en afficher 3 par exemple comment procéder
$sql=mysql_query(... ?)what it
ReplyDeleteAny 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).
ReplyDeleteHelp 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
ReplyDeletevery usefull.. thank
ReplyDeletehelpful...thanks
ReplyDeletehi some one,, can you help me about this statement?
ReplyDelete$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.
ReplyDeletekeep tabbing tab key you will see a bug
ReplyDeleteThank you working with me Wow
ReplyDeleteQute informative and easy to understand and implement as well. Thank you.
ReplyDeleteGood :)
ReplyDelete