msgBox 1.0 a Custom Javascript Messaging Framework

msgBox v1.0 JS

It's funny how I come about my projects. This one started after someone discovered the FireFox bug in my FormFieldinator framework. The error has to do with the a form field losing focus after you call an javascript alert or confirm window. I started to wonder if I could create a custom messaging system that would avoid this problem. And then at the same time, I had a client that wanted to show a window on their website asking their users to fill out a survey.

All of this led me to create a javascript messaging framework called msgBox. Now, it hasn't been fully tested and I'm sure some of you are going to point out improvements or <gasp> problems. But I think it's a good start. So without further adieu, let me introduce to you msgBox v1.0

Test 1 - msgBox.init

If you are looking at this blog entry, then you've already experienced the msgBox init on the page load. It's the annoying message that pops up everytime you load the page. You define this action like so:

msgBox.init({
message : "<p>I would like to introduce msgBox v1.0<\/p>",
});

msgBox.show

You can also call msgBox within your scripts like you would any other system message by passing the text as an object or a simple string.

Test 2 - msgBox.show()

The following two examples have the same result, but the first one shows how you can just supply a string to bring up the default message window.

msgBox.show('<p>You clicked me!</p>');

msgBox.show({
message:'<p>You clicked me!</p>'
});

Test 3 - msgBox.show()

You have two options for the animation types. Dissolve and slideDown. slideDown will show the background dissolve in and the have the message window slide in the from the top of the screen.

msgBox.show({
message:'<p>I\'m like the first two test, but different.>br /<I slide in style!</p>',
type:'error',
animationType:'slideDown',
duration:500
});

Test 4 - msgBox.show()

Another feature is that you can set the action and cancel button text and define what action to take once they are clicked. This example also uses a custom icon and message type.

msgBox.show({
title : 'Creative Juices Bo. Co.',
type : 'Message of the Day',
message : '<p>Would you like to visit the best place on the web?</p>',
icon : 'http://www.cjboco.com/includes/msgBox_v1/_etc/images/msgBox_icons/Crystal_Clear_app_clock.png',
backdropOpacity : 0.3,
duration : 0,
butOkMsg : 'Yes',
butOkAction : 'http://www.cjboco.com/',
butCancelMsg : 'No thanks'
});

Defined Settings

msgBox was designed to be versitile messaging system that can be used to replace simple alerts or complex confirmation messages. The core look and feel can easily be changed through the use of a stylesheet, but you also have the ability to pass various attributes to change how it functions. Below are a list of all user defined attributes that can be modified to your liking.

Standard Attributes

Icon Attributes

Button Attributes

So now what?

So now, I have the first version complete, I need to perform some more testing and make sure all the browsers like it. I eventually want to add some cookie setting abilities to the msgBox init function, so you can display it once per day, week, etc. In the mean time, go ahead and grab a copy of the source code below and start playing around with it. And as usual, if you see any problems let me know.

msgBox v1.0 JS