Facebook Style Notification Popup using CSS and Jquery.
Wall Script
Wall Script
Thursday, September 11, 2014

Facebook Style Notification Popup using CSS and Jquery.

Are you looking for Facebook UI features, this post will explain you how to create a Facebook style notifications popup using Jquery, HTML and CSS, you will understand how CSS elements will helps to improve better web design. This is the most needed feature for social networking web projects to minimize and enrich the UX elements. Just few lines of code implement these concepts in your next project, take a quick look at this live demo.

Facebook Style Notification Popup using CSS and Jquery.


Download Script     Live Demo

HTML Code
Create an unordered HTML list for menu design.
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li id="notification_li">
<a href="#" id="notificationLink">Notifications</a>
// Notification Popup Code...
</li>
<li><a href="#">Link4</a></li>
</ul>

 Facebook Style Notification Popup using CSS and Jquery.

CSS Code
Add float:left for horizontal view.
#nav{list-style:none;margin: 0px;padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}

HTML Code
Notifications popup is divided into three parts are Notification Title, Notification Body and Notification Footer
<li id="notification_li">
<span id="notification_count">3</span>
<a href="#" id="notificationLink">Notifications</a>

<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications"></div>
<div id="notificationFooter"><a href="#">See All</a></div>
</div>

</li>

Facebook Style Notification Popup using CSS and Jquery.

CSS Code
Take a look at the following highlighted CSS properties.
#notification_li
{
position:relative
}
#notificationContainer 
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none; // Enable this after jquery implementation 
}
// Popup Arrow
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody
{
padding: 33px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}

Notification Count Bubble
Circle bubble for Notification count.
#notification_count
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}

Jquery
Contains javascipt code. $("#notificationLink").click(function(){}- notificationContainer is the ID name of the popup div. Using jquery fadeToggel() showing popup based on click actions.
<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});

//Document Click hiding the popup 
$(document).click(function()
{
$("#notificationContainer").hide();
});

//Popup on click
$("#notificationContainer").click(function()
{
return false;
});

});
</script>
web notification

79 comments:

  1. I love thia blog... :* . Thanks. Srinivas

    ReplyDelete
  2. Tricky Work.....Keep it up.....:-).

    ReplyDelete
  3. //Popup on click returns false, it make all links inside popup not clickable...

    ReplyDelete
  4. Very nice! Will you add a stroll bar to it???

    ReplyDelete
  5. nice work............

    ReplyDelete
  6. The article is very good. Thanks for share!

    ReplyDelete
  7. Thanks a lot.
    Do you have an example to call the page that returns the list of the notifications and that will update the notification count ?

    ReplyDelete
  8. Thank ago that now come to your blog, I really enjoyed their lessons and to learning a lot, thanks again from his bed in Brazil! =]

    ReplyDelete
  9. Thanks a lot man!! That's so useful for Web guys!

    ReplyDelete
  10. Thanks for this article. Thank you for sharing this style popup with us!

    ReplyDelete
  11. SIR I THINK FACEBOOK WILL HIRE YOU SOON, SIR BUT I AM NOT ABLE TO SEE THE NOTIFICATION

    ReplyDelete
  12. Very nice and informative article Srinivas. Its really useful.

    ReplyDelete
  13. amazing, very nice brother..

    ReplyDelete
  14. Very nice and great effort. thanks!

    ReplyDelete
  15. Sir, thats looks awee.....some, but can you design the same for twitter if you do that then i am very thankful of you

    ReplyDelete
  16. Please, my notification dont stop!
    I click in link, the notification open and closed/return!
    Please, you can help me?
    Thank very much!

    ReplyDelete
  17. Amazing Script it's very easy to implement but notification Body link not working. plz help me . advance thanks

    ReplyDelete
  18. working in my blog, good post. thank you :)

    ReplyDelete
  19. another awesome post by u sir..
    thanx 4 sharing this one...

    ReplyDelete
  20. its classic one. i will definitely try to change my notification style.

    ReplyDelete
  21. Hi,

    what if i already click the notifications and i refresh again the page it still pop out 3 notifications.
    for solving this problem i need to do checking whether the notification has been click with database right?

    ReplyDelete
  22. Hi,

    How can you modify jquery so you can have multiple notifications. By that when clicking on link1 it will popup a notification, if you then click on link2 it will close first notification and another one will be shown?

    Chherz

    ReplyDelete
  23. For those of you having trouble clicking links in the container change this:

    $("#notificationContainer").click(function()
    {
    return false;
    });

    To this:

    $("#notificationContainer").click(function()
    {
    e.stopPropagation();
    });

    ReplyDelete
  24. Johann Ackerman Thanks.. just fixed my problem. :)

    ReplyDelete
  25. Thank you so much!!

    ReplyDelete
  26. Thanks it is working good, but is there a way to make it responsive???

    ReplyDelete
  27. I dont find the jquery.min.1.9.js file. from where i can get it?

    ReplyDelete
  28. I can not find the jquery.min.1.9.js file. From where I can get it?

    ReplyDelete
  29. Hai Buddy!!

    Thanks for information :*

    ReplyDelete
  30. Johann Ackerman Thanks.. just fixed my problem

    ReplyDelete
  31. This comment has been removed by a blog administrator.

    ReplyDelete
  32. This comment has been removed by a blog administrator.

    ReplyDelete
  33. great turorial..and very helpfull for editing style notif pop up
    thanks alot bro

    ReplyDelete
  34. Download Jquery here http://demos.9lessons.info/notifications_css/js/jquery.min.js

    ReplyDelete
    Replies
    1. Hello,
      I try to add some links inside NotificationContent div but all of them are not clickable.
      How to resolve this?

      Delete
  35. Hi guys, I thought I would share the scroll I added to this
    I cant comment html so rename ziv to div!!!


    First Wrap the notification body in a new div with the class "parent"
    Directly below, add a div class scrollbar

    then add the class scrollable to the notification Body







    For the JS, under $("#notification_count").fadeOut("slow"); add scrollbar();

    Below the entire function, add the following js function

    function scrollbar(){
    var parH = $('.parent').outerHeight(true);
    var areaH = $('.scrollable').outerHeight(true);
    var scrH = parH / (areaH/parH);

    function dragging(){
    var scrPos = $('.scrollbar').position().top;
    $('.scrollable').css({top: -(scrPos*(areaH/parH)-1)});
    }



    $('.scrollbar').height(scrH);
    $('.scrollbar').draggable({
    axis: 'y',
    containment: 'parent',
    drag: function() {
    dragging()
    }

    });

    };//]]>


    add the following CSS and you are done

    .parent{
    position:relative;
    height:300px;
    width:300px;
    background:#eee;
    overflow:hidden;
    padding-right:10px;
    }
    .scrollable{
    position:absolute;
    top:0px;
    width:300px;
    }
    .scrollbar{
    cursor:n-resize;
    position:absolute;
    top:0px;
    right:0px;
    z-index:2;
    background:#444;
    width:10px;
    border-radius:0px;
    cursor: pointer;
    }

    ReplyDelete
  36. Can't wait till I add this to my project and see how beautiful it's going to be. Like always tnx big man Siri!!

    ReplyDelete
  37. i want dynamic count in notifiication ....
    if i view notification it should be blank still i get new notification

    ReplyDelete
  38. Johann Ackerman Thanks.. just fixed my problem

    ReplyDelete
  39. Why doesn't my notification body appear?

    ReplyDelete
  40. Hi Srinivas. Thank you very much for the demonstration. It is is a really nice piece of work that you have done. You seem to be thinking in the lines of Facebook!
    I tried it. The only thing that is not working is the click on the container, "See all". I tried the "e.stopPropagation();" (as shown in one of the responses) and it does not seem to work.
    Can you please tell me what can be done.
    Thank You

    Regards

    ReplyDelete
  41. woaah so cool, thanks for sharing guys

    ReplyDelete
  42. how to create notification table on post or like , comment, follow , adfriend

    ReplyDelete
  43. Thank you very mush for the post but how do i make it work for more than one notification item on the menu e.g say i want to have a menu like this:
    Link1 Link2 Notifications Notifications2 Notifications3
    i tried it but it only works for the first notification menu item.

    ReplyDelete
  44. Hello,
    I try to add some links inside NotificationContent div but all of them are not clickable.
    How to resolve this?

    ReplyDelete
  45. anchor tag not working here please tell me why

    ReplyDelete
  46. very useful to increase knowledge, thank you share it.

    ReplyDelete
  47. Thanks for the wonderful code!!!
    I just have one issue though. I cant check/uncheck checkbox or radio button because of this code:

    //Popup on click
    $("#notificationContainer").click(function () {
    return false;
    });

    Any Workaround?

    Thanks in advance!

    ReplyDelete
  48. thanks for this post , i need to get notification when i received data or insert data into database table and it should show the count of number of rows

    ReplyDelete
  49. You are really smart coder dear........

    ReplyDelete
  50. you can see here http://stackoverflow.com/questions/11380117/cant-click-div-with-links-behind-another-div-absolute-position-wont-work how to use links inside the div

    ReplyDelete
  51. checkout this question here to use links inside the div it worked for me http://stackoverflow.com/questions/11380117/cant-click-div-with-links-behind-another-div-absolute-position-wont-work. Btw thanks a lot for this post.

    ReplyDelete
  52. please i want to ask, if the count is been fetched from database and the notification shows that i have 2 updates, and i click the notification the 2 notication show disappear like your example said, if i refresh the page again it still shows same notication that disappeared, unlike the facebook ones i click it it delets, and if new notication shows up it desplays that current count.

    ReplyDelete
  53. great turorial..and very helpfull for editing style notif pop up
    thanks alot bro o

    ReplyDelete
  54. div id="notificationsBody" class="notifications"></div

    Hyper link is not working in this can you please help in this

    ReplyDelete

mailxengine Youtueb channel
Make in India
X