Internet Explorer Style Information Bar in JavaScript

• Download source - 6 KB

Introduction

Internet Explorer has an interesting, although sometimes considered maligned, notification method for unsafe code execution, downloads etc. To its credit, it is an easy and somewhat unobtrusive way to alert users to a change in the Web site or in their account. This script attempts to simulate this behavior using JavaScript and the DOM so that this effect can be achieved in other browsers as well.

Using the Code

The code is extremely simple. Just add the following to the head of your HTML page:

<script type="text/javascript" src="infoBar.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var bar = new infoBar({text: 'This is a test'});
    bar.show(50);
};

new infoBar will create a new infoBar object. You can pass a number of parameters at creation time, but the only required option is text, which is the text that will appear in your alert box.

Options

You can pass a number of options in the constructor in the following manner:

new infoBar({option: value, option2: value2})

The following options are currently supported:

• text: The text to display. Can contain HTML, but adding complicated styles may screw up the info bar, so discretion is advised. Required.
• backColor: The color of the background. Any hex or named HTML/CSS color value.
• fontColor: The color of the font. Any hex or named HTML/CSS color value.
• icon: The icon to use. The default icon is 'information'. The file contains three icons for you to use: information.png, exclamation.png, and help.png. You can provide your own icons. Simply name them whatever.png and reference them by their filename without the extension.

// you should have a PNG file named myspecialicon.png
new infoBar({icon: 'myspecialicon'}) 

Methods

• show(milliseconds): Shows the infoBar object. If milliseconds is provided, then the bar will 'fade in' according to the milliseconds value. 100 is a good transition.
• setText(text): Sets the text of the infobar.
• setIcon(icon): Sets the icon.
• setFontColor(color): Sets the font color.
• setBackColor(color): Sets the back color.
• hide(): Hides the infobar. Can be shown again with the show method.
• destroy(): Removes the infoBar from the screen. The object itself is not destroyed, but the div is removed from the DOM.

Technique

The technique is relatively simple. The DOM (Document Object Model) and JavaScript provide an easy way to add/remove/modify content on an existing page.

We begin by creating a div for our infoBar. This will contain our text and our icons.

var infoBarDiv = document.createElement('div');

Next, we must begin adding properties to our newly created div. We set things like our background color, our padding, font color, opacity, font size, etc. This is accomplished by:

infoBarDiv.somepropertyname = somevalue;
//for example: set the font size to 8pt:  infoBarDiv.style.fontSize = '8pt';

Next, we create images in the same way we created our div:

var icon = document.createElement('img');
var close  = document.createElement('img'); 

We must also set the properties for these images, such as the image source and their positions. For the Close image, we also add an onclick event to hide the infoBar when the Close button is clicked.

close.onclick = function()
{
    infoBarDiv.style.display = 'none';
};

We also need a div to contain our text. We use the same method as the one described above for the infoDiv.

Now that all the objects are created, we must actually add them to the document. We first add the images to the infoBar div. Then, we add the infoBar div to our document body.

infoBarDiv.appendChild(close);
infoBarDiv.appendChild(icon);
infoBarDiv.appendChild(text);
document.body.insertBefore(infoBarDiv, document.body.firstChild); 

I could use document.body.appendChild(infoBarDiv) to add the bar to the document as well. However, I wanted the bar to be the first element within the document tree, so I made sure to add it before any child elements in the body.

To add all of our methods to our object, we use the prototype object. We could just add these in our constructor, but our constructor is full enough as it is, and we really should keep it as clean as possible.

infoBar.prototype.somemethodname = function()
{
    //do stuff
}

That's all there is to it! Just adding a few divs and images and taking advantage of the DOM gives us incredible flexibility over how information is presented to the user.

Points of Interest

Internet Explorer 6 does not properly support the fixed CSS property for position. It will default to position static when used. This is unacceptable. Not only will the infoBar not scroll with the user, but it will appear within the page's margins/paddings, which creates ugly whitespaces unless a user has her/his page configured to 0px margins and padding.

To get around this issue, we check to see if we are running Internet Explorer 6:

var ie6 = (document.all && window.external && (
   typeof document.documentElement.style.maxHeight == 'undefined')) ? true : false;    

If the ie6 variable is true, then we will need to set our position to absolute and set the window.onscroll event to adjust the left and top positions of our infoBar with the scrolling of the page. Also, just in case we think we are in Internet Explorer 6 and aren't, some optional scroll properties are provided as well.

window.onscroll = function()
{
  infoBarDiv.style.top = parseInt(window.pageYOffset || 
        (document.documentElement.scrollTop || 0)) + 'px';
  infoBarDiv.style.left = parseInt(window.pageXOffset || 
        (document.documentElement.scrollLeft || 0)) + 'px';
}

Thankfully, this bug is fixed in Internet Explorer 7, so we can use the fixed value properly.

The icons used for this project can be found here.

History

• Tuesday, June 10, 2008 -- Minor bug fixes and article cleanup
• Monday, June 09, 2008 -- Article submitted