Facebook like suggestions with jQuery content appears and disappears.
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;
}

26 comments:

  1. 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

    ReplyDelete
  2. 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

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. hey thank u very very much

    ReplyDelete
  5. nice tutorial mr.srinivas...

    ReplyDelete
  6. How to remove post from DB? (MySQL)

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

    ReplyDelete
  8. ANy tutorial for delete comment?

    ReplyDelete
  9. How to use this to delete post from database?

    ReplyDelete
  10. 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

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

    ReplyDelete
  12. 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;
    });
    });

    ReplyDelete
  13. 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?

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

    ReplyDelete
  15. keep tabbing tab key you will see a bug

    ReplyDelete
  16. Thank you working with me Wow

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

    ReplyDelete