18

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.

3
  • 3
    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
    – ChrisF
    Nov 21, 2010 at 11:45
  • feel free to edit my question,, iam not that good in English, i just try to give my question idea..thanks Nov 21, 2010 at 11:52
  • 1
    As far as the jQuery warning, see here: stackoverflow.com/questions/2323366/jquery-1-4-2-vsdoc it's just related to intellisense in the IDE
    – curtisk
    Dec 15, 2010 at 13:51

5 Answers 5

17
+25

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>
3
  • thanks alot, but how to use them in .cs file or .aspx , can u give me simple example. Dec 12, 2010 at 8: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. Dec 13, 2010 at 2:04
  • 1
    +1 Good call on jGrowl, it works nicely, added my own answer with .NET/.cs example
    – curtisk
    Dec 13, 2010 at 19:08
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

3
  • 3
    The typical SO answer: Use Jquery! Dec 13, 2010 at 19:05
  • 2
    What other answer do you expect someone to provide? Feel free to provide a better alternative. Until then... jQuery rocks! Dec 14, 2010 at 6: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, 2012 at 18:24
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.

6
  • 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 Dec 14, 2010 at 7:54
  • 1
    msdn.microsoft.com/en-us/library/bb310408.aspx for more info on RegisterStartupScript, and msdn.microsoft.com/en-us/library/… for ScriptManager itself, the explain the idea behind how and why they work.
    – curtisk
    Dec 14, 2010 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, 2010 at 13:39
  • @user418343> whats your firefox version? Dec 15, 2010 at 14:53
  • do you have any funny plug-ins/ add-ins active in Firefox?
    – curtisk
    Dec 15, 2010 at 16:06
2

Another very nice a JavaScript notification plugin is Pines Notify

It features also a notification history widget.

2
  • 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.. Dec 16, 2010 at 8: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 .. Dec 16, 2010 at 8:51
1

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

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

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.