Tell Method

You can get bossy with the “tell” method of the class by forcing the user to respond. Click on this to see.

// Here I'm creating an instance of the Message Class and storing it the msg variable.
var msg = new Message({
	icon: "cautionMedium.png",
	title: "Watch Out!",
	message: "You just might be a redneck!"
});
// Execute the command!
msg.tell();

Ask Method

You can also ask a question by using the ask method. (See how clever I am? I named the methods after the what they do!) You can also send a callback function to complete a transaction when the user chooses “Yes”. Wow! Think of the power! Get the class to perform a task by sending either a function in the form of a string, or an element that has an assigned click event. When the user clicks “Yes”, the class will fire the function or the click event (which ever you passed in the callback option).

Click on this to see.

new Message({
	icon: "mediumQuestion.png",
	title: "Question!",
	message: "If a woman is yelling at a man and he's not there to hear it, is he still wrong?",
	callback: "saySimple()"
}).ask();

Waiter, Comment and Tip Methods

There are all kinds of things that this bad-boy can do. Click on the following links to marvel at the possibilities!

You can create a waiter using the waiter method.
Click here to dismiss the waiter.

You can create a comment box pop up.

How the heck did I do that? Here’s the code:

document.id('commentLink').addEvent('click', function(e){
	// Just creating an object here so that you can see that it's possible to send one.
	// Imagine the power in that!
	var obj = new Element('div', {
		'id': 'dummy',
		'events': {
			'click': function(){
				sendComment();
				this.destroy();
			}
		}
	});
	new Message({
		icon: "speakMedium.png",
		iconPath: "/2010/images/",
		width: 300,
		fontSize: 14,
		passEvent: e,
		autoDismiss: false,
		title: 'Have a Comment?' ,
		message: '<textarea id="commentText" cols="3" rows="5" class="msgEditable"></textarea>',
		callback: obj
	}).say();
});
var sendComment = function(){
	new Message({
		icon: "okMedium.png",
		iconPath: "/2010/images/",
		title: "Received!",
		message: "We've received your comments, and we'll ...uhhh... get back to you."
	}).say();
}

You can even create a tool tip. Yeah… I know it’s a built-in plugin in Mootools, but I think that this does it better. (I could never get the Mootools tooltip plugin to work the way I wanted.) Besides, I already created this class, so extending it to do tips was simple. Click on these to see the tip method in action:

I’m a tip
…and I’m a tip
…and I’m a tip too!

With the tip method, the HTML is important because we use the rel property in the a tag to pass a title and a message. This way, you can set your tips right in the HTML.

<a href="javascript:" class="tips" rel="Tip!::This is tip #1">I'm a tip</a>
<a href="javascript:" class="tips" rel="Tip!::This is tip #2">...and I'm a tip</a>
<a href="javascript:" class="tips" rel="Tip!::This is tip #3">...and I'm a tip too!</a>

The Javascript:

$$('.tips').addEvent('click', function(e){
	new Message({
		iconPath: '/2010/images/',
		icon: 'mediumQuestion.png',
		passEvent: e,
		callingElement: this
	}).tip();
});

Notice how the tips disappear on mouse rollout. This is achieved by passing the element that called the tip method. Pass this element using the callingElement option in the class’ constructor just like I did above.

Positioning

Just when you thought you’ve seen it all, you get a blast of another cool feature: positioning! That’s right, if you like it on top, you can position the message to align to the top by passing the “top: true” option. If you want it aligned to the left, simply pass the “left: true” option, and voilà… instant positioning! Just the way you like it. See the following:

Do it on the left.

Details

Ok… so the Message class is the bomb! So, what are the details? Here they are:

Constructor:

Message({options});

Options:

callingElement: (element: default to null). You use this option when you need the message to auto hide on the mouse out event. Essential when using the tip method.

callback: (string or element). The function that you want to fire when the user confirms the message by pressing “Yes”. i.e.: “myFunction()”, or just send an element with a click event attached to it.

top: (boolean: defaults to false) Set the message to come out from the top edge of the window. Defaults to the bottom.

left: (boolean: defaults to false) Set the message to the left. Defaults to right.

centered: (boolean: defaults to false) Set the message to the center of the window.

offset: (integer: defaults to 30) Determines the padding to give from the edge of the browser window frame.

width: (mixed: defaults to ‘auto’) The CSS value of your message. Pass a number to change it.

iconPath: (string: defaults to ‘image/icons/’) The path of the icons that you’d like to use.

icon: (string: defaults to null) The file name of your icon image. Note: your icon is expected to be 40 x 40! Can be changed in the CSS.

title: (string: defaults to null) The title of your message.

message: (string: defaults to null) Your message.

delay: (integer: defaults to 0) Delays the display of your message. Integer is interpreted in milliseconds.

autoDismiss: (boolean: defaults to true) The message will dismiss on it’s own. Note: this is shut off automatically when user input is needed.

dismissOnEvent: (boolean: defaults to false) The message will dismiss on the mouseout event. Note: this is used automatically when an event is passed.

isUrgent: (boolean: defaults to false) Use the “urgent” transitioning to get the user’s attention. Note: this is automatically used on the ask and tell methods.

callback: (string: defaults to null) Send a function in the form of a string to be fired on confirmation of an ask method.

passEvent: (event: defaults to null) Passing an event will make the message appear at the your cursor location (offset by 5 px).

tipMode: (boolean: defaults to false) Tip mode is a short-cut that sets the autoDismiss and dismissOnEvent to true.

stack: (boolean: defaults to true) This will stack messages one over (or below) the other message rather than on top of one another (as in a z-index value). **Note that if you over use messages, the stacking goes a little wonky. This is a known issue, and I spent many hours trying to perfect this, but doing so would make this plugin a LOT bigger. Not sure I want to do that. Still experimenting.

fxTransition: (Fx.Transition: defaults to null) Set your own transition. The default transition will simply fade in. * fxDuration: (mixed: defaults to ‘normal’) Set the transition duration. Intergers are interpreted in milliseconds.

fxUrgentTransition: (Fx.Transition object: defaults to Fx.Transitions.Bounce.easeOut) Set your own urgent transition

fxOutTransition: (Fx.Transition object: defaults to null) Set the out transition. The default will simply fade out.

fxOutDuration: (mixed: defaults to ‘normal’) Set the transition duration. Intergers are interpreted in milliseconds.

Methods

Note:

* All options can be passed in the constructor! Some can also be passed in the method.

* When isUrgent is on, a “Yes”, “No” or “Ok” confirmation link is added to dismiss the message.

Say

Syntax:
myMessage. say(title, message, icon, isUrgent, callback);

Options:
- title (string: required) The title of your message.
- message (string: required) Your message.
- icon (string: optional) The image icon that you’d like to use in the message. Note: your icon is expected to be 40 x 40! Can be changed in the CSS.
- isUrgent (boolean: optional) Setting it to true will make the message use the Fx.Transition.Bounce.easeOut effect and in the centered position. This is to get the user’s attention.
- callback (string: optional) Sent a function witten in the form of a string to use as a way to fire another function upon a “Yes” click.

Ask

Syntax:
myMessage.ask(title, message, callback, icon, isUrgent);

Options: they are the same as the say method except that the callback is required (or rather expected) and isUrgent is true by default. “Yes” and “No” links will be added to dismiss the message. A click on the “Yes” link will fire the callback function.

Tell

Syntax:
myMessage.tell(title, message, icon, isUrgent);

Options: they are the same as the say method except that isUrgent is boolean and is true by default. An “OK” link will be added to dismiss the message.

Waiter

Syntax:
myMessage.waiter(title, message, icon, isCentered);

Options: They are the same as the say method except that isCentered is boolean and is true by default.

Tip

Syntax:
myMessage.Tip(title, message, icon);

Options: they are the same as the say method.

Events:

onComplete: Fires when the hide message transition is complete.

onShow: Fires when the message shows. Specifically, it will fire when the show transition is fully complete.

Icon Files

Do you want the original Photoshop file that I used to make the icons? Sure! No problemo!

Message Class Icons PSD
Message Class Icons PSD
customIconsLarge.psd
Version: 1
307.9 KiB
689 Downloads
Details...

Requirements and Other Notes

This class requires the Mootools Javascript Framework. I developed it on 1.2.4, and it was updated to be compatible with 1.4+, and it plays nice with JQuery. It’s dependent upon these plugins:

(I hope I didn’t forget any… and if I did, please message me at beaudoin.jason@gmail.com!).

I tested it on IE 7 +, Firefox, Safari and Google Chrome. I don’t support IE6 because nobody should be using that browser. (Friends don’t let friends use IE6. Remember that!) Also, I use CSS 3 in this example. If you’re viewing this in IE 8 or lower, you’re not going to see the CSS 3 support.

Speaking of CSS, you can find the one I used here. But, it’s also included in the package download file, also found at the bottom of this page in the footer.

Message Class Package
Message Class Package
MessageClass.zip
Version: 2.3
57.1 KiB
187 Downloads
Details...
0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

No related posts.

Did you enjoy this article? Share it! Tweet this! StumbleUpon Digg This! Bookmark on Delicious Share on Facebook

About the Author: Jason Beaudoin

I’m a web developer from Ottawa, Ontario, Canada. My specialty is in JavaScript frameworks, and my current favorite is Mootools. I work for the Canadian army as a web developer, and I have a few other projects on the side that keep me busy including this blog.

54 Comments + Add Comment

Leave a comment

Ads keep me running!