I created a simple plugin for jQuery that displays an information bar that looks similar to what most browsers are doing to show messages to a user today. I needed to create something that showed my custom messages when necessary. Total development time on top of jQuery was about 15 minutes. This is the best framework ever!

infoBar is easy to use. Here is what you do:

showInfoBar(‘This is a sample information bar!’);

Once the infoBar shows and the user clicks the close link on the right the hideInfoBar(); function is called. This is automatically wired up. All you have to do is display the bar and everything else just works.

infoBar also resizes when the user resizes the browser and always stays on the top of the browser when the user scrolls the page.

I really dislike doing CSS so its all customizable inside the script. You just need to include it and you’re all set. Feel free to modify my script. Hopefully the next version gets support for an icon on the left and I will fancy up the close link.

Confirmed to work in IE7, Chrome, and Safari.

Demo of infoBar

infoBar at the jQuery Plugin Repository (download available)

Enjoy!

Edit:

Blake Pell took infoBar.js and wrapped it to create an ASP.NET control that can be used on your site. Go check it out.

So here is a quick post on some jQuery basics. I’ve found this script library extremely useful lately. It’s saved me tons of time and I wished I had adopted it sooner. “Write less, do more” is for real. I’m a believer!

The first thing jQuery offers is the document ready function. This is great because your code will not execute until the DOM is truly ready. Here you can manipulate any elements or execute code. This is much more efficient than using the standard onload event.

$(document).ready(function() {
   // do stuff when DOM is ready
});

Now you need to interact with an element. This is quite easy. Let’s say we had a link we need to manipulate.

<a id="link">Click Me!</a>

Any time that you need to reference an element you simply use $(“#id”). So here are some quick things that we can do.

Change the onclick function:

$("#link").click(function(){
   alert("You clicked on the link!");
});

Append content to the link:

$("#link").append("New text inside the link");

Note: When you are checking for the existence or an element do NOT do the following:

if($("#link")) { //object exist };

This is wrong as each time you use the $(“#id”) convention you are asking for a jQuery object so you will get one even if the element is not there.

To correctly check for the existence of an element use the following code:

if ($("#link").length > 0 ) { //now we found it } 

You can see how easy it is to start manipulating things with this easy to use syntax. This is just the beginning . This is a very powerful framework that also has tons of third party plugins for many specific needs.

For more information on jQuery visit the following links. There is plenty of stuff on there to get anyone started.

jQuery Documentation

jQuery Plugin Repository

More to come when I have time!