jQuery plugin: Message

This plugin allows you to easily display feedback messages as an unobstrusive overlay. The message fades away automatically after some time, avoiding the need to click an “ok” button or something similar. The user can speed up hiding of the message by moving the mouse or clicking anywhere.

The interaction is based on Aza Raskin’s Humanized Message.

Kudos to the Humazined Messages plugin – this plugins adapts some of the CSS styles. Otherwise they are quite different: The API of this plugin adheres more to jQuery standards; there is no needlessly distracting message log; the display duration is carefully tuned to make it much easier to grasp the message content.

To use the plugin, select an element whose text to display, or pass the text as the argumnt:

$(function() {
  $().message("Hello world!");
  // or
  $(".feedback").message();
});

The result would look like this:


Enter any text into the input and press enter or click the button to see it as a message. Notice the difference between doing nothing when the message is displayed, and moving the mouse around.

There are a few default options available, though there shouldn’t be a need to modify those. If you are interested, take a look at the source.

Current version: 1.0.0
License: MIT/GPL

Files:

Download
Demo

Dependencies

Required

Support

  • Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “message”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.

No more comments.
  1. 19. June 2009 |14:12

    “there is no needlessly distracting message log”

    I think that is one of the things that makes the Humanized Messages useful, the ability to go back and review the messages that were presented. Otherwise, you’re just flashing things at the user that they may or may not comprehend. What happens when the message goes away and they didn’t read it?

  2. 19. June 2009 |14:16

    Thats an acceptable trade-off. The original proposal didn’t have the message log, and classic alert-messages have no way default to show them again either.

    I’m using the plugin to show a “you missed some fields” message on submit (combined with the validation plugin). You can simply press submit again to see the message.

    For messages displayed on page load, reload the page.

  3. Adrian
    21. June 2009 |17:32

    Hi,

    I use it in a development version and everything is fine so far.

    I came across your site quite a few times the last days.

    Thanks for your great work!

  4. Adrian
    12. July 2009 |16:45

    Hi,

    is there a way to make sure that the message is in the visible part of the page?

  5. James
    27. August 2009 |14:04

    In Safari, if I click “Show Message” with a blank textbox, it shows the jquery code. Testpage: this one.

    Otherwise, all of your stuff is amazing.

    James

  6. 29. August 2009 |13:34

    @James: Thats sort-of intended behaviour. When the message plugin doesn’t get a text-argument, it display the text-content of the selected element, in this case, the document.

  7. iPeter
    16. September 2009 |15:08

    Hi, this plugin is great.
    Is there a way to make the message go away after clicking it?

    I need the message stays for a considerable time unless the user wants it, like they may press OK with traditional Alerts.

    Regards

  8. 23. October 2009 |02:38

    The user can speed up hiding of the message by moving the mouse or clicking anywhere.

    Is there some config to make it work like this?

  9. Felix
    20. December 2009 |06:39

    Hello,

    was using something similar. Found and tested this concept it’s I really like it.

    Thank you!

  10. Tommaso
    13. April 2010 |15:12

    is there a way to force the fade out ?

  11. Tommaso
    13. April 2010 |15:21

    ok… found it out myself ^^

    $(“div.jquery-message”).fadeOut(‘slow’);

  12. Peter
    20. April 2010 |11:28

    Is there a way to add new line inside of message?

  13. 8. December 2011 |08:58

    jquery.message.js

    IE bug:
    $(window).bind(“mousemove click keypress”, fadeOutHelper);

    should:
    $(document).bind(“mousemove click keypress”, fadeOutHelper);