Question

188

How to display a pop up notification to the user using jquery?

rated 0 times [ 192] [ 4] / answers: 1 / hits: 58533 / 13 Years ago, tue, june 28, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 13 Years ago halleyb · Accepted Answer

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