Produce "toast" messages like StackOverflow

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.

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Method 5

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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

Method 3

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.

Method 4

Another very nice a JavaScript notification plugin is Pines Notify

It features also a notification history widget.

Method 5

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

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating