Produce "toast" messages like StackOverflow

Question

One of the issues I think about every time I build my web application is how messages should appear to the end-users

I tried message boxes like those in windows applications, but they look so bad and make problems when published on the server. I've tried an update panel containing a cool label at the top of bottom of my page..but still i feel it's not good enough at all. Sometimes I have problems in specific cases when using AJAX, and it still doesn't look good for the users...

I want to ask about the StackOverFlow messages that appear for a while and then disappear, for example the message that appears in orange when voting a message up or down.

I want to build messages like these or reuse a DLL that can provide these. Is this feasible?

note::: the messages appeared for the user based on specific condition on the server side..

Thanks in advance.

You might want to reword your title at the very least. Currently it's ambiguous and might lead to the question being migrated (incorrectly) to [Meta](http://meta.stackoverflow.com) — ChrisF, Nov 21 '10 at 11:45
feel free to edit my question,, iam not that good in English, i just try to give my question idea..thanks — Anyname Donotcare, Nov 21 '10 at 11:52
As far as the jQuery warning, see here: http://stackoverflow.com/questions/2323366/jquery-1-4-2-vsdoc it's just related to intellisense in the IDE — curtisk, Dec 15 '10 at 13:51

score 17 · Answer 1 · edited Dec 17 '12 at 07:57

17

Specifically, the jGrowl jQuery plugin does what you're asking.

Just include the jQuery and jGrowl scripts in your html, and start generating messages with the $.jGrowl() function.

Example code:

<html>
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jgrowl.js"></script>
<script>
$(function() {
  $.jGrowl("My sticky message, loaded after the rest of the page", {sticky: true});
  $("#mybutton").live("click", function(_) {
    $.jGrowl("you clicked the button!");});
});
</script>
</head>
<body>
<button id="mybutton">click me</button>
</body>
</html>

edited Dec 17 '12 at 07:57

Yannick Blondeau

9,465
8
52
74

answered Dec 12 '10 at 07:00

Shane Daniel

959
1
7
14

thanks alot, but how to use them in .cs file or .aspx , can u give me simple example. – Anyname Donotcare Dec 12 '10 at 08:56
example provided. I haven't worked with .NET, but from what I read online it's fairly straightforward to include something like the above in your .aspx template. – Shane Daniel Dec 13 '10 at 02:04
1

+1 Good call on jGrowl, it works nicely, added my own answer with .NET/.cs example – curtisk Dec 13 '10 at 19:08

score 12 · Answer 2 · answered Nov 21 '10 at 11:46

12

To create effects you can use these tools

Jquery

jQuery user interface library. It provides interactions, widgets, effects, and theming for creating Rich Internet Applications

you can view some Jquery effects here

MooTools

A web applications user interface library built on the Mootools JavaScript framework

answered Nov 21 '10 at 11:46

Sudantha

15,684
43
105
161

3

The typical SO answer: Use Jquery! – Billy ONeal Dec 13 '10 at 19:05
2

What other answer do you expect someone to provide? Feel free to provide a better alternative. Until then... jQuery rocks! – Maxim Gershkovich Dec 14 '10 at 06:11
1

@MaximGershkovich I would (if I was the person asking) how to use JQuery to achieve this, i.e. is there a plugin or example of this in action. Just stating you can use JQuery is a bit like saying you can get a bus to X but not saying which one or where to get it from. Regards – Jon Oct 30 '12 at 18:24

score 9 · Accepted Answer · edited Nov 05 '14 at 13:07

9

Well, one method to use jGrowl (to expand on Shane's Answer) via .cs is shown below.

This example in webform ASP.NET

Create a simple aspx page with 1 button and make sure you include the necessary jquery/jgrowl script and css references in the page head, I also have a ScriptManager and update panel on the page as well.

In the code behind for the page:

protected void Button1_Click(object sender, EventArgs e)
{
    this.ShowStatus("This is your message!<br />Some HTML formatting works!<br />");
}

protected void ShowStatus(string message)
{
    ScriptManager sm = ScriptManager.GetCurrent(Page);

    if (sm.IsInAsyncPostBack)
    {
        string script = @"
            $(document).ready(function() {
            $.jGrowl.defaults.theme = 'iphone';
            $.jGrowl('" + message + "', {theme: 'iphone',header: 'Notification',life: 8000});});";

        ScriptManager.RegisterStartupScript(Page,this.GetType(), "notification", script,true);                        
    }
}

Naturally use whatever theme suits your app, good luck! Additionally, this approach only loads the notification script as needed (in this case after you click the button) but you could tie the "ShowStatus" function to other events/tests within the code behind.

edited Nov 05 '14 at 13:07

DatRid

1,169
2
21
46

answered Dec 13 '10 at 19:03

curtisk

19,950
4
55
71

please can u explain the method u write::especially the parts u use script manger in i want to know how it works please..thank u so much – Anyname Donotcare Dec 14 '10 at 07:54
1

http://msdn.microsoft.com/en-us/library/bb310408.aspx for more info on RegisterStartupScript, and http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx for ScriptManager itself, the explain the idea behind how and why they work. – curtisk Dec 14 '10 at 13:29
1

what does/or doesn't? The app I pulled this from runs just fine in IE/FF/Chrome....what is giving you an issue? – curtisk Dec 15 '10 at 13:39
@user418343> whats your firefox version? – naveen Dec 15 '10 at 14:53
do you have any funny plug-ins/ add-ins active in Firefox? – curtisk Dec 15 '10 at 16:06
sorry it works ,, i open a new project and begin from scratch,,i donot know what is the problem in the previous one but it works thank u so much.. – Anyname Donotcare Dec 16 '10 at 08:43

score 2 · Answer 4 · answered Dec 16 '10 at 02:29

2

Another very nice a JavaScript notification plugin is Pines Notify

It features also a notification history widget.

answered Dec 16 '10 at 02:29

Lorenzo

29,081
49
125
222

this is great one ,, but how to use with .cs file i wanna to show this message when the user click on server button in asp.net..thanks alot..i hope it works with IE and firefox.. – Anyname Donotcare Dec 16 '10 at 08:10
this looks so nice ,,, then how to use it in .cs file ... i search on this site , and cannot find how to use them .. – Anyname Donotcare Dec 16 '10 at 08:51

score 1 · Answer 5 · answered Dec 16 '10 at 09:35

1

Notimoo plugin using mootools.
Used just yesterday, and liked the configuration options.

http://code.google.com/p/notimoo/

answered Dec 16 '10 at 09:35

Vishwanath

6,284
4
38
57

Produce "toast" messages like StackOverflow

5 Answers5

Linked