Alex MacCaw

Ruby/JavaScript developer & entrepreneur. O'Reilly writer and open source developer. Working for Stripe.


I'm @maccman on Twitter.

I'm maccman on Github.

I'm oldmanorhouse on Skype.

I'm here on Linked in.

I'm here on Delicious.


Current OS projects:
Books/Sites/App's
I've created/written:
Email me

I am now blogging at blog.alexmaccaw.com

jQuery Growl with CSS3

October 27, 2010

In my constant quest to reinvent the wheel, I've written a jQuery Growl library. These things are so simple to do with jQuery, that's it's almost faster to implement yourself than using an existing lib. You can also cut down considerably on unnecessary features that way.

Growl

Live demo

jQuery

The jQuery below is pretty bog standard, just appending elements to a div then removing them after a timeout. jQuery UI gives you some effects, like 'drop'. We're returning the 'msg' jQuery element, so you can easily add click handlers etc.

//= require <jquery.ui>

jQuery(function($){

  var container = $("<div />");
  container.attr({id: "growl"});
  $("body").append(container);

  $.growl = function(body){
    var msg = $("<div />").addClass("msg");
    msg.html(body);

    container.append(msg);

    msg.show("drop", { 
      direction: "down", 
      distance: 50 
    }, 300).
      delay(2000).
      fadeOut(300, function(){
        $(this).remove();
      });

    return msg;
  };
});

CSS3

There's some interesting CSS though:

Background gradient

This is quite a good example of how to use advanced background gradients with WebKit.

We first specify a default background without a gradient - this is for browsers that aren't WebKit, who won't understand what we are going to do next.

We're specifying the background colors using rgba, which means we can add some alpha transparency, rather than 'opacity', which would alter the transparency of the inner contents and text.

CSS3 also supports multiple backgrounds. Consider using them if you're also specifing a gradient with transparency, or one that won't run the full length of the element, like in this example.

Shadow

We've got an inset box-shadow which is only recently supported by Firefox and WebKit. We're just adding a 1px highlight to the top of the Growl box, to indicate the light source and make it feel more realistic.

Source

#growl {
  position: absolute;
  bottom: 10px;
  right: 20px;
  overflow: hidden;
}

#growl .msg {
  border: 1px solid #171717;
  color: #E4E4E4;
  text-shadow: 0 -1px 1px #0A131A;

  font-weight: bold;
  width: 200px;
  min-height: 30px;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 10px;

  background: #141517;
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(rgba(255, 255, 255, 0.3)), 
    color-stop(0.8, rgba(255, 255, 255, 0))), 
    rgba(0, 0, 0, 0.8);

  box-shadow: inset 0 1px 1px #8E8E8E;
  -webkit-box-shadow: inset 0 1px 1px #8E8E8E;
  -moz-box-shadow: inset 0 1px 1px #8E8E8E;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
}