Apprise

The attractive alert alternative for jQuery

Apprise is

Sexy. An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Demo

  • apprise('Hello');
  • apprise('Hello?', {'confirm':true});
  • apprise('Hello now?', {'verify':true});
  • apprise('Hello', {'animate':true});
  • apprise('What's your name?', {'input':true});
  • apprise('Lorem ipsum...');
  • Returned:

    Download

    Apprise is tiny. Like, really tiny. 8kb in total for the full and 4kb for the minified version.

    Download full Download minified

    Implementing

    To function properly, Apprise requires the javascript framework jQuery. One of the easiest ways to add jQuery is to include the hosted version by adding the following line to your head section.

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    Don't forget to add the Apprise source files to the head section as well.

    <script type="text/javascript" src="js/apprise.js"></script>
    <link rel="stylesheet" href="css/apprise.css" type="text/css" />

    Now that everything is in it's place, you can call the apprise() function anywhere you would have typically called the alert() function.

    <a href="http://google.com" onclick="apprise('You are now leaving our site');">Leave the site</a>

    Callbacks work similarly to the standard confirm function, returning true if "Ok" or "Yes" is clicked and false if "Cancel" or "No" is clicked. If the input is used, only the user inputted text or false will be returned.

    <script>
    $(document).ready(function()
      {
      apprise('Ready to begin?', {'verify':true}, function(r)
        {
        if(r)
            {
            // user clicked 'Yes'
            ...
            }
        else
            {
            // user clicked 'No'
            ...
            }
        });
      });
    </script>

    Make sure you pass in altered variables to get the effect you desire. By default, the apprise box will show only an "Ok" button along with your message. The confirm option adds the "Cancel" button, whereas the verify option uses "Yes" and "No" buttons instead. Input is just that, an input box. Animate is a simple slide down effect, and can be set to true or the desired speed, with the default being 400.

    {
    'confirm' : false, // Ok and Cancel buttons
    'verify' : false, // Yes and No buttons
    'input' : false, // Returns with user inputed text
    'animate' : false // Groovy animation (can be true or number, default is 400)
    }

    Customization

    The stylesheet (apprise.css) is the key everything; simply edit the styles declared within to adjust the look and feel. Because this is actually injecting elements into the DOM, you want to make sure you close all tags as these can cause apprise to fail and give you an unnecessary headache.

    The interface is supposed to resemble that of an OS but appear web-ish. I do plan on releasing some more themes, but that will depend on whether or not anyone actually downloads and uses Apprise. I tried to keep everything as simple as possible, with only 5 (at most) elements being injected. The downside of that is the style is limited to those few elements.

    Discussion

    blog comments powered by Disqus

    About

    Apprise was created by me (Daniel Raftery), a web developer, located in Portland, Maine. Apprise was a simple project that I felt compelled enough to develop to the point of distribution. Feel free to manipulate, improve upon, and use however you'd like.

    I'm on twitter under the handle @ThrivingKings if you have any questions or comments.

    This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.

    Browser compatibility

    My testing resulted the following. If you find different, please let me know and I will adjust.

    Chrome 8.0+
    Firefox 3.0+
    Safari 4.0+
    Internet Explorer 9.0
    Internet Explorer 7 & 8 work with minor styling mishaps

    Change log

    4/15/11 : Initial release, v1.0
    4/14/11 : After whining like a 5 year old, realized it was a typo that was causing callbacks to fail.
    4/13/11 : Built, tested, thought I was done. I was wrong.
    4/12/11 : Conjured up the idea while eating a sandwich.