Facebook Style Notification Popup using CSS and Jquery.
Wall Script
Follow Me:
12:14:00 PM

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>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


70 comments:

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

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

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

    ReplyDelete
  4. nice work............

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

    ReplyDelete
  6. 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
  7. 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
  8. Thanks a lot man!! That's so useful for Web guys!

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

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

    ReplyDelete
  11. You should see it in action on this website: http://www.newvibe.ca

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

    ReplyDelete
  13. Thank you bro for this code..

    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

Make in India