Infobar v1.1.1
A jQuery plugin made by jerone.
Intro
InfoBar is an IE-like bar at the top of the website. It is the same bar you get when a pop-up is blocked, special content is needed or if you want to download a file.
This script mimics the InfoBar with the same colors, an X to close it and even a context menu is available.
The whole script is written as a jQuery plugin and has support for other useful
plugins.
Some of the features are:
- Shows always at top and on top of the window.
- HTML in the custom message is allowed.
- Hover support for IE6. A new class ("
.hover") is added when hovered. - By supporting the jQuery Cookie plugin, closing an InfoBar is remembered.
- It's possible to add a context menu for more options. Only text is allowed, but it's possible to add a small icon. Clicking the item executes a custom function or opens a defined website.
- No style is added in the script itself, so all is fully changable with CSS.
- Cross browser. Tested working in all major browsers: Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4. It should work with newer browsers and may work with older browsers, no promise until tested.
Options
Usage
Place the following code in the head of your page.
<!-- InfoBar StyleSheet -->
<link type="text/css" rel="stylesheet" href="jquery-infobar.css" media="screen" />
<!-- Mandatory JavaScript files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-infobar.js"></script>
<!-- Optional plugins -->
<script type="text/javascript" src="jquery-cookie.js"></script>
<!-- InfoBar definition -->
<script type="text/javascript">
(function($) {
$(function() {
$.infoBar("test 1");
$.infoBar("test 2", { ID: "test", menu: [
{ txt: "Download Firefox", icon: "firefox.png", fn: "http://getfirefox.com" },
{ txt: "Download Opera", icon: "opera.png", fn: "http://opera.com" },
{ txt: "Download Chrome", icon: "chrome.png", fn: function() { window.open("http://google.com/chrome"); } }
]});
});
})(jQuery);
</script>
The InfoBar plugin must be called after the document is loaded.
Do you want to have the InfoBar fixed to the top of the page in IE6? Add the following code to your site.
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
.infobar {
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
Or you can use another jQuery plugin I made: jQuery fixFixed.
Add the following code after the InfoBar:
.fixFixed(["top", "left", "right"]);
Download
A zip archive for this plugin is available here: jquery-infobar-1.1.1.zip (size: 41kb).
The zip archive contains the following files:
- jquery-infobar.js - actual plugin (size: 4kb).
- jquery-infobar-min.js - minified plugin version (size: 2kb).
jquery-infobar-vsdoc.js - VSDoc documentation file (size: 0kb).- jquery-infobar.css - stylesheet containing all CSS (size: 3kb).
- jquery-infobar.html - clean example page (size: 3kb).
- menu-bg-hover-left.jpg - context menu item hover image (size: 11kb).
- menu-bg-hover-mid.jpg - context menu item hover image (size: 10kb).
- menu-bg-hover-right.jpg - context menu item hover image (size: 18kb).
- shield-error.png - red error image (size: 3kb).
- shield-exclamation.png - orange exclamation image (size: 3kb).
- shield-help.png - blue help image (size: 3kb).
- shield-ok.png - green ok image (size: 3kb).
- shield-warning.png - yellow warning image (size: 3kb).
Changelog
-
version 1.1.1 (20-7-2009):
- Added minified script version;
-
version 1.1 (19-7-2009):
- Fixed memory leaks;
- Fixed misuse of
jQuery.each();
-
version 1.0 (1-7-2009):
- Initial release;
FAQ
Which versions of jQuery is this plugin compatible with?
This plugin is compatible with jQuery 1.3 and higher.
Which browsers is this plugin compatible with?
Tested working in Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4.
It should work with newer browsers and can work with older browsers, no promise until tested.
Does the plugin work with any other plugins?
Infobar has integrated support for jQuery Cookie plugin.
Is there a VSDoc file available for this plugin?
Yes, there's a VSDoc file available on the download page.
What is VSDoc?
VSDoc is documentation format for Visual Studio.
By using this file information is added to JavaScript Intellisense. This is only available in VS2008.
Todo
- ...
Site Search