divalert() for Javascript

A replacement for Javascript's alert()

Note: divalert() still works great, but it is getting a bit old. I rarely work in Javascript without using one of the many excellent libraries such as jQuery to deal with browser incompatibilities and such. Having said that, if you're looking for a small, lightweight utility, by all means, give divalert a try!
-Dave (Jan 1, 2011)

A Quick Example

It often occurs in creating Javascript programs that you have a need to display something on the screen. The simplest way to accomplish this is through the alert() function like so (click on the statement to try it!):

  alert('Hello World!');

But alert boxes have all sorts of problems. They're "modal", so you can't do anything else on the page until you get rid them. They are also pretty poor for displaying large amounts of text. They can also pause JavaScript execution and page loading.

My divalert() function works just like alert, but displays its contents in the web page in a <div> tag (click on the statement to try it!):

  divalert('Hello World!');

What makes this better? Well, for one thing, you don't have to click "OK" anywhere to keep using the page (on the rare occasions where you do need that behavior, by all means use alert()). Another big improvement is that any new alerts are also displayed in a running log.

For a much better idea of divalert()'s capabilities, take a look at this simple example. By all means, take a look at divalert's source.


Installing and using divalert is very simple. First, Grab divalert.js here.

Then, include it in your page like so:

<script type="text/javascript" src="divalert.js"></script>


Now that you've installed divalert, simply call it as you would with alert():

<script type="text/javascript">
  var goodStuff = "ice cream";
  divalert("Good stuff: "+goodStuff);

If you've been a Javascript developer for a while, you're probably wondering what happens when you call divalert() before the page body is loaded. Excellent question. When this occurs, divalert() does not attempt to append itself to the document body. Instead, it waits invisibly in memory and attaches an event handler to window.onload. Check out the example to see it in action. Notice that when it is called before the body loads, divalert() automatically prints a message, *Page Loaded* when the body has loaded. This in and of itself can be quite helpful for debugging.

One final thing you can do when calling divalert() is to call for a bold alert. Simply call divalert with "true" as your second parameter (click on the statement to try it!):

  divalert('Bold Text', true);


Besides just being kinda old, there are some minor known problems with divalert():