scripts ⁄ javascript
Build a Custom Message System
November 1,2008 — Joshua Pomazal —1,533 Views
Overview (All JavaScript System)
The default messages in JavaScript are a bit limiting and well, annoying. I will so you a simple way to generate messages using one JavaScript file that can be referenced by any page in your site. It can also be used to return a custom value or even require user input. This version is entirely written in JavaScript with no HTML editing.
Generating HTML Elements
The first step for the messaging system is to generate all of the necessary HTML elements for the messaging system. The following code is a createMessageEle() function that creates each element that adds them to the HTML document.
function createMessageEle()
{
document.body.style.width = "100%";
document.body.style.height = "100%";
...
var mesBack = document.createElement("div");//create background overlay to focus message
mesBack.style.width = "100%";
mesBack.style.height = "100%";
mesBack.style.position = "absolute";
...
mesBack.style.filter = "alpha(opacity=90)";
mesBack.setAttribute("ID","mes_Back");//set ID so it can easily be referenced
document.body.appendChild(mesBack);
var mesContain = document.createElement("div");//create a new div to contain message elements
mesContain.style.width = "310px";
mesContain.style.height = "150px";
...
mesContain.setAttribute("ID","mes_Container");//set ID so it can easily be referenced
document.body.appendChild(mesContain);//append div to body
...
}
In order to have the messages display on a web page, we have to add elements to the page. The createMessageEle() function will create all the necessary elements by using createElement() and then attaching them to the document using appendChild(). Also, we assigned each element an ID by using setAttribute("ID",name) in order to make it easier to reference the elements later. Because we made this version of the system file independent, all the styling is done via JavaScript.
Along with the actual message box, we added a background element that will cover the rest of the page. We set the opacity (cross-browser) of the background to allow the user to still see the rest of the page, but drive focus to the message box.
...
mesBack.style.opacity = .9;
mesBack.style.mozOpacity = .9;
mesBack.style.filter = "alpha(opacity=90)";
...
Writing the Message
After we have created the elements for the message box, we need to create a function that will write our wanted message into the box then display the box on the screen. Below is a sample of the code for the writeMessage() function. It requires 5 arguments so that it display the correct message. The butFunction argument is the name of the function that you want to be called when the "Continue" button is pressed.
function writeMessage(messageType,titleText,messageText,buttonText,butFunction)
{
document.getElementById("mes_Title").innerHTML = (titleText!='')? titleText:"This page has generated a message";
document.getElementById("mes_Body").innerHTML = (messageText!='')? messageText:"This page has generated a message";
if(messageType>1)
{
var conButton = document.createElement("input");
conButton.type = "button";
conButton.value = (buttonText!=null)? buttonText : "Continue";
document.getElementById("mes_Buttons").appendChild(conButton);
conButton.onclick = function(){continueMes();eval(butFunction);return true;};
}
else if(messageType==0)
{
...
}
Hiding the Message
Since we don't want the message box to stay on the screen forever, we need to have a function that hides it and removes any elements that were created inside the buttons div. For this we create a continueMes() function to do the cleanup. It hides the container element and then removes all the children of the "mes_Buttons" element.
function continueMes()
{
document.getElementById("mes_Container").style.display = "none";//hide message box
document.getElementById("mes_Back").style.display = "none";
var element = document.getElementById("mes_Buttons");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
}
Override the Alert Function
This is optional depending on what you plan on using this system for, but if you want to override the built-in alert() function then add the following code. Otherwise you can also create a custAlert() function so that you still have access to the built-in alert() funciton.
window.alert = function(mes) {
writeMessage(0,'Alert',mes);
}
Initiate the Message System
In order to start the system, we are going to use a onload event to initiate the createMessageEle() and generate the necessary elements. We created the init() because you may want to call other functions when the document loads.
function init()
{
createMessageEle();
}
if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded", init, false);//FireFox
}
else
{
window.onload = init;//IE
}
Compatibility
Tested and working in: IE8 beta 2, IE7,Firefox 3
Conclusion
While there are a lot of things that can be added to make this system more efficient, but it is pretty general so it can be customized to fit someone's individual needs. Click here to see a demo of the system.
Resources
DemoComplete JavaScript File
Add Comment: