9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, June 1, 2009

Facebook like suggestions with jQuery content appears and disappears.

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.

Facebook like suggestions with jQuery content appears and disappears.


Take a look at live demo below.

Download Script     Live Demo

javascript 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();});
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">
<?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;
}
#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;
}
Comments
{ 26 comments }
•▬●๋•bíńdáکک●๋•▬• •▬●๋•dểlhíítể●๋•▬• said...

nice work!

enjoy :)

Mohammed Zagzoog said...

Thank you man,,, you are awsome

ChoiZ said...

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

AModjtabai said...

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

Generaccion said...

la verdad buenisimo

Aliyu said...
This comment has been removed by the author.
Anonymous said...

hey thank u very very much

Ricardo said...

great work!!

scalix said...

nice tutorial mr.srinivas...

Martin said...

How to remove post from DB? (MySQL)

Martin said...

I mean, if I makes the info in DIV from a database, is there a way to delete those records as well?

Anonymous said...

ANy tutorial for delete comment?

Anonymous said...

How to use this to delete post from database?

Anonymous said...

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

Anonymous said...

$sql=mysql_query(... ?)what it

Anonymous said...

nice.

Anonymous said...

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;
});
});

Anonymous said...

Nice Post

adnan zulkarnain said...

very usefull.. thank

jesmin said...

helpful...thanks

Chumhienk said...

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?

Anonymous said...

Nice work Srinivas. I like all your posts. Those are just so simple.

Anonymous said...

keep tabbing tab key you will see a bug

Maria said...

Thank you working with me Wow

bizpromo said...

Qute informative and easy to understand and implement as well. Thank you.

Anonymous said...

Good :)

Post a Comment