• Choose a category
• All
• Classic-Fiction

chapter_07/19_growl_style_notifications/script.js (excerpt)

function addNotice(notice) {

$('

.append('

.append('close')

.append($('

.hide()

.appendTo('#growl')

.fadeIn(1000);

}

The structure we’ve added consists of a containing element with an extra div available for styling (we’re using it to lay the visible message over a semi-opaque background), a close button, and a container for the message contents.

One other point to note about this function is that any HTML we pass to it is wrapped in the jQuery dollar selector. This means we can pass in either plain text, HTML, or jQuery objects, and they’ll be displayed in the box. Again, you can style it all however suits your site—though you’ll need to give the bubble container position: relative:

chapter_07/19_growl_style_notifications/style.css (excerpt)

.notice {

position: relative;

}

.skin {

position: absolute;

background-color: #000000;

bottom: 0;

left: 0;

opacity: 0.6;

right: 0;

top: 0;

z-index: -1;

-moz-border-radius: 5px; -webkit-border-radius: 5px;

}

.close {

background: transparent url('button-close.png') 0 0 no-repeat;

}

This will position our bubbles correctly and give them some basic styles. Inside the document-ready function, just call the addNotice function with a message, and it will fade in at the bottom of the screen:

chapter_07/19_growl_style_notifications/script.js (excerpt)

addNotice("

Welcome to StarTrackr!

addNotice("

Stay awhile!

Stay FOREVER!

You can also pass in images, or indeed any HTML you like. Of course, most of the time you’ll want to display the result of a user interaction, or an Ajax call—you just need to call addNotice whenever you want to display a message to the user. The only problem is … once the bubbles are there, they’re unable to be removed—they just keep stacking up! Let’s fix this:

chapter_07/19_growl_style_notifications/script.js (excerpt)

$('#growl')

.find('.close')

.live('click', function() {

// Remove the bubble

});

Instead of adding the click handler directly to the close button, we’re using the live function to keep an eye on any new .close elements that are added. This helps us separate out the closing code and keep everything nice and readable. All that’s left to do now is handle the actual removing:

chapter_07/19_growl_style_notifications/script.js (excerpt)

// Remove the bubble

$(this)

.closest('.notice')

.animate({

border: 'none',

height: 0,

marginBottom: 0,

marginTop: '-6px',

opacity: 0,

paddingBottom: 0,

paddingTop: 0,

queue: false

}, 1000, function() {

$(this).remove();

});

The removal code goes looking for the nearest parent container via the closest action, and animates it to invisibility in an appealing way. Once it’s invisible, the container is no longer needed, so we remove it from the DOM. The closest method is another one of jQuery’s DOM traversing actions, and has the cool ability to locate the closest parent element that matches the selector you give it—including itself.

1-up Notification

It’s Friday afternoon again, and the boss is out of the office. There’s nothing left to do in this week’s blitz, and there’s still an hour left until office drinks. This seems like the perfect time to sneak a cool little feature onto the site. Throughout the book we’ve concentrated on enlivening tried-and-true controls and recreating desktop effects, but jQuery’s best asset is that it lets you try out new effects extremely quickly. We’ll embrace the creative spirit and make a notification mechanism that comes straight out of 8-bit video gaming history: the 1-up notification.

The brainchild of web developer Jeremy Keith, 1-up notifications provide a non-modal feedback mechanism to show your user that an action happened. A small message (generally a single word) will appear at the point the action has taken place, then fade upwards and quickly away—exactly like