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.
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;
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()
{
}
That's all there is to it! Just adding a few div
s 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