After the scripts have been included you can use the Activebar inside every
javascript call. In most of the cases you will want to show the Activebar
directly after some of your pages have been loaded. This can easily be done
using jquerys "document ready" shortcut:
This simple code snipped will show a default Activebar containing the text
"Hello World". Lets take a look what happens here in detail.
First of all a new \ element is created using an appropriate jquery call.
After that jquerys method chaining feature is used to set the inner html
content of this div to "Hello World". In the last step the activebar
function is called on the created div, which turns the given jquery object
into an Activebar and automatically displays it.
The activebar function can be called on every jquery object. This includes
objects created from any element inside your page. Take a look at the
jquery selector documentation to get a better understanding of how this
feature can be used.
Available options
The activebar method can be invoked providing a set of options to customize
all different aspects of the Activebar.
Options are simply provided as POJO (Plain old java(script) object)
directly to the activebar method call. This look something like this:
$('.someClass').activebar({
'option1': 'value1',
'option2': 'value2',
'option3': 'value3',
...
});
Look and feel
The Activebar is designed to mimic the look and feel of the information bar
used by the Internet Explorer 6. But you may want, for example, to change
its background color, the default font used for the text rendering or the
image files used for the icon and the close button. All this and much more,
is easily achievable using the appropriate options.
background: The background color used by the bar. You can use any valid css
background definition for this property.
highlight: The background color used while the mouse is over the bar. This
option supports any valid css background value as well.
border: Color of the 1px border on the bottom of the bar. Only valid css
color values are supported by this option.
font: Font family used by default for any given content.
fontColor: Default font color used for the provided content.
fontSize: Default font size used for the displayed content node.
icon: Path and name to the icon image displayed left of the provided
content. This icon needs be 16x16 pixels in size.
button: Path and name to the image used as a close button representation.
The image needs to be 16x16 pixels in size.
Behavior
The Activebar allows to link to a certain website whenever it is clicked.
The target of this linking operation can easily provided using the url
option.
url: Target url to jump to if the bar is clicked.
More complex example
After the options have been explained it is time to provide a more complete
example of how to use these kind of features:
$('').html('This page may not be displayed correctly in this browser. You are strongly encouraged to update to a current release of Firefox')
.activebar({
'font': 'serif',
'icon': 'images/information.png',
'url': 'http://mozilla.org/firefox'
});
This example will show an Activebar containing the provided text and link,
using a serif type font, showing a custom message icon and linking to the
firefox website if it is clicked.
Restricting to a special browser type
As I explained above the main intention behind all this was to encourage
Internet Explorer users to switch or update their browser. Therefore the
message should only be displayed if such a browser is used. This can easily
be achieved using jquerys browser detection functionality:
if ( $.browser.msie ) {
// Put your Activebar calling code in here
}
Using this technique it is moreover easily possible to restrict the message
even further by checking for browser versions for example. Take a look at
the corresponding documentation to see how this can be done.
Using together with other js libraries
Maybe you are already using other javascript libraries on your website like
scriptaaculouus or mooffx. In this case you do not want jQuery to conflict
with the behaviour of the \$ function already defined by this toolkits.
Therefore jquery can be told to create no conflict after it is loaded. This
is done by calling the function noConflict und using the jQuery for all
calls to jQuery after that. Using a function closure you may even define
the \$ shortcut for a limited area of your website. Take a look at the
example below:
Download
There are different possibilities to obtain the Activebar. The easiest way
is to download the package below which consists of current release as well
as a bundled jquery javascript file and this documentation. Furthermore a
simple usage example html file is included in the archive.
- Activebar 2.0.1
If you are interested in the bleeding edge version of this widget you might
check out a copy of its SVN repository, which is publicly available at:
$ svn co svn://pureenergy.cc/activebar2
" />