21

I am developing an application which requires that user must be notified about some background events i.e. invitation from other user, reminder time out etc.

Whenever the event occurs the controller will be notified, and a small window should be displayed to the user.

How should I proceed to achieve this. Which technology / tool will help me. I am using jQuery, JSF 2.0 and Spring 3.0.

4 Answers 4

29

this will give a notification similar to the stackoverflow

jQuery

$("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
       $("#notification").fadeOut("slow");
});

HTML

<div id="notification" style="display: none;">
  <span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>

CSS

#notification {
    position:fixed;
    top:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:14px;
    font-weight:bold;
    color:white;
    background-color:#FF7800;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

Also take a look at mplungjan's answer on how to listen to server updates and message load

4
  • @ mplungjan thats great, but now i notice, the OP has asked for server-side help also
    – Anupam
    Jun 28, 2011 at 11:09
  • so the script needs to poll the server. No biggie. setInterval and $.get()
    – mplungjan
    Jun 28, 2011 at 11:37
  • yes i'll update my answer. By the way i was wondering is there any way we can implement this without using setInterval(), i mean event triggerd by some other logic?
    – Anupam
    Jun 28, 2011 at 11:42
  • Long poll or Comet
    – mplungjan
    Jun 28, 2011 at 12:40
2

HTML:

<input type="button" id="pop" value="Submit"/>
<div id="popup">
  <div id="topbar"> TITLE..</div>
  <div id="content">Here is you content...</div>
  <input type="button" id="ok" value="OK"/>
</div>

CSS:

#popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none }
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px }
#content { padding:5px; -moz-border-radius: 10px; text-align:center }
#ok { position: absolute; left: 140px; top: 180px }

JQUERY:

$(function(){
    $('#pop').click(function(){
        $('#popup').fadeIn().css('top',$(document).height()/2);
    });
    $('#ok').click(function(){
        $('#popup').fadeOut();
    });
});
1
  • 1
    Fixed the css ID popup - added a fiddle subtracting the popup height is probably also a good idea
    – mplungjan
    Jun 28, 2011 at 11:00
2

Using code from @Anu's suggestion - my fiddle, you can simply add a poll

$(document).ready(function() {
  $(".dismiss").click(function(){$("#notification").fadeOut("slow");});

  setInterval(function() {
    $.get("ping.jsp?userid=<%= userID %>",function(message) {
      if (message) $("#notification").fadeIn("slow").html(message);
    });
   ,10000);
})

the message could include a timestamp to see if you had notified earlier instead of sending an empty message if no notificati9on is needed

Alternatives: Long poll or Comet

1

Jquery ui dialog is what you are looking for. It will come in handy for you. Although there are lots of other plugin available. This is the simplest..

1
  • Actually looking at the other examples, the jQuery UI is not needed here at all.
    – mplungjan
    Jun 28, 2011 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.