410-696-4690
Series: Bringing the Familiar Online - User Alerts
A big issue with Application Design is how to alert the user when an error has occurred. Formerly the most common method was returning an error from the server after posting back information, and refreshing the entire page. Sometimes you could use the standard JavaScript message box, but the limitations could stop you in your tracks. In this post I am going to go over a method that creates a familiar interface for the user - a dialog box with a simple alert sound.
In this project we are going to create a pop-up dialog window with an interface (which you can modify however you please) and play an alert sound when it is opened (view working sample). Alert sounds have never been popular online for a few reasons, but with the technology that is available on 98% of computers today, I think it is about time we start using what is available while the other 2% catch up.
To start the project off you will want to setup a new site (eventually we will be working with ASP.net but for now you can host this locally as it will be HTML/CSS and JavaScript). I have created a directory for myself called error_messages but you can call it whatever you want. Next, download the scriptaculous library from the scriptaculous site. We will be using this for effects and usability features such as drag/drop later on. I usually just extract what I need from their releases, primarily the “lib” folder and the “src” folder.
Now create a new .html page and create the following code to link the libraries:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Alerting the User: Playing Error Sounds Using JavaScript</title>
<script language=”javascript” type=”text/javascript” src=”lib/prototype.js”></script>
<script language=”javascript” type=”text/javascript” src=”src/scriptaculous.js”></script>
<body>
</body>
</html>
Now we are going to want to create a “window” (just an HTML div) that appears when a button is clicked. You’ll want to have a background image for the window and the button a user is able to push. I have taken the style from an older Mac OS9 installation for fun, and you can download these images here and here. Put them in an “img” directory in the root of your project. So next lets add this code in the body tag:
Those pesky error sounds on your computer are for a reason. Maybe we should use them in Web development too as the transition from “Web page” to “Web application” progresses.
<input onclick=”throwError();” type=”button” value=”Throw An Error Message” />
</div>
<div id=”window” style=”display:none;”>
<p>If you hava JavaScript and Flash support in your current browser, you should see this message and have heard an error sound (yes it was a monkey sound from Mac OS 9). Click the “OK” button to close this dialog.</p>
<img onclick=”closeDialog();” src=”img/ok.gif” alt=”Okay” />
</div>
<script type=”text/javascript”>soundManagerInit();</script>
If you look at the page now it will look horrible and you will receive a couple of JavaScript errors. Lets add some CSS style and a few javascript functions to get rid of the errors. First, create a style tag in the head of the document (you could also link to a css document) and add these styles:
* {margin:0; padding:0;}
body {background-color:#63639C;}
#title {
background-color:#fff;
border-bottom:1px solid #999999;
padding:20px;
margin-bottom:30px;
}
#window {
background:url(img/dialog.gif) top left no-repeat;
color:#000;
margin:0 auto;
height:192px;
width:329px;
}
#window p {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:left;
margin:30px 15px 0 65px;
}
#window img {
float:right;
margin:30px 20px 0 0;
}
</style>
Next, create a new script block in the head of the document, and add this javascript:
Effect.Appear(’window’);
soundManager.play(’error’);
return false;
}
function closeDialog() {
Effect.BlindUp(’window’);
}
The “Effect.Appear(’window’);” and “Effect.BlindUp(’window’);” functions utilize the scriptaculous library in order to create some fancy effects. You may wonder what the soundManager.play(’error’) function is. Well, playing sound via JavaScript has never been reliable due to browser support. Nowadays everyone is using different browsers, but most of them have Flash installed so it is a consistency regardless of the operating system. Here we are going to use a library called SoundManager in order to play sounds using JavaScript via Flash. Download the library and save these files to the root of your directory: soundcontroller.swf and sound-config.xml. We will be modifying the sound-config.xml document to select a sound to play. But first, you will need a sound to play. I have used the sound from the same Mac OS9 operating system: Monkey.mp3. Save this to a folder titled “audio” in the root directory of your project. Next, open up the sound-config.xml file, and delete all the sample junk that is in there now. Make your file look like this:
<items baseHref=”audio/” defaultVol=”100″>
<sound id=”error” href=”Monkey.mp3″ />
</items>
This tells the soundManager module that when you call the “error” sound, play the Monkey.mp3 sound located in the audio folder of your site. And that’s it! Now when someone clicks the “Throw An Error Message” button, the dialog will fade in and sound the alert. Clicking on the “Ok” button will get rid of the error message and go back to normal.
Be aware this is a primitive way of creating an error message. We will eventually add upon this code so that it blacks out and disables the rest of the screen so that user interaction is disabled until dismissing the error window. But that will be for another time.
About the Author
Josh has been developing applications and Web sites for the past 10 years. He has received college-credit courses at Villa Julie College in Computer Information Systems, Howard Community College in Business Entrepreneurship, and has completed the A+ Certification program at UMBC. His background in development includes content management systems, real estate listing updates, data embedding, merchant services integration, e-commerce and desktop application development. Josh has had the privilege of working with local, national and international companies including the Wall Street Institute, Care Improvement Plus, Signs By Tomorrow, Pazo Restaurant, St. John Properties and Bin604 among others. His free time is spent playing video games, writing music and raising his dog, Butters.
