Activebar - A crossbrowser information bar
I have just finished my work on a small piece of javascript I am going to need for my new web presentation, which is currently under heavy construction.
So let's see what this little script can do. It is capable of dynamically creating and displaying a small bar on the top of your browser window to display some message to the user. You can customize it's appearance by modifying the included css. Its standard design was created to imitate the look and feel of the information bars, which could be found in modern browsers to show that a popup window has been blocked or that a special plugin is needed. Unfortunatly you can not trigger this functionallity in the browser directly. At least I don't know any way to do this. Because of this I rewrote the needed functionallity for this. I tried create a bar with a behaviour to be as close to the original as possible.
The bar is really simple to use. You just need to include the js file and the needed stylesheet. After the script has been loaded by the browser you can just create a new ActiveBar object and call the show() method on it. That's all. Everything else will be handled by the obect itself.
Let's take a look at a short example:
<link rel="stylesheet" type="text/css" href="activebar.css" />
<script language="javascript" src="activebar.js"></script>
<script language="javascript">
function init() {
var bar = new ActiveBar('<b>Hello World.</b>');
bar.show();
}
</script>
...
<body onload="init()">This is quite simple, huh?
I have tested the bar with firefox, opera and ie6. It works fine with any of these browsers. If someone could test this with safari on mac I would be glad to recieve a report if it is working correctly or not.
There are two simple example html files in the package. The first one will be displayed in every browser. The other one shows you how to create a bar which shows only in the internet explorer.
If you have any questions or problems with this javascript feel free to contact me at jakob@westhoffswelt.de.
Download
Trackbacks
Comments
-
nadermann on Sat, 28 Oct 2006 21:31:00 +0200
The bar works fine in Safari, nice work :-)
Link to comment -
on Sun, 29 Oct 2006 13:35:00 +0100
Doesn't work in KHTML. The bar appears, but it if you scroll down, it's messed up. Nice work anyway ;-)
Link to comment -
Jakob on Mon, 30 Oct 2006 20:19:00 +0100
I have just checked what's happening there. The problem seems to be, that the scroll event is not called correctly in khtml, when the scrollwheel on the mouse is used.
Link to comment
I will fix this as soon as I got some spare time to find the precise problem.
Thanks for your reply
Jakob. -
Jakob on Mon, 30 Oct 2006 20:21:00 +0100
Thanks for the information.
Link to comment
I will write an updated blog post as soon as I have fixed the bug with konqueror.
best regards,
Jakob.
Activebar - Just a small compatibility fix on Fri, 30 Jan 2009 02:38:23 +0100 in Westhoffswelt - Welcome to the real world
A small compatability fix for my cross browser information bar. Now this bar should work in any javascript aware browser.
Let IE6 die - Use Activebar2 to encourage your users on Fri, 20 Feb 2009 07:44:14 +0100 in Westhoffswelt - Welcome to the real world
After I read a Golem article about an initiative started by the Norwegian company finn.no to finally let the IE6 die. I decided to revive a project I wrote about two and a half years ago. I am talking about Activebar, a crossbrowser information bar, which mimics the look and feel of the natively used bars by all modern web browsers. It provides an easy and unobtrusive way to finally tell your users to exchange their old and rusty IE6 with something shiny and new. Activebar2 is a complete rewrite of my old project using all the glamor and glitter that is available with current javascript toolkits. Take a further look at this article if you are interested in having the IE6 finally taking its last breath.