foobar v2.1

What is the foobar?

Foobar is a neat and simple notification bar that sits at the top (or the bottom) of the page to inform or announce specific information to site visitors. With over 40 options, the foobar can be customized to look and function however you want. The collapsible bar can be used in an unlimited number of scenarios, including:

• Displaying notifications
• Showing site announcements
• Product specials or offers
• Competitions, giveaways, etc.
• Anything you can think of, really :)

Major Features

• Show multiple messages containing any HTML
• Long messages scroll across into view
• Navigation between messages
• Position the bar at the top, bottom or inline
• Totally customizable appearance via options (or custom CSS)
• Define your bar dimensions and content widths
• Includes 4 button themes
• Load an RSS feed (uses the Google feed API support)
• Load a Twitter feed (uses the Google feed API support)
• Showcase your social profiles
• Show the bar immediately, after a certain time or only when the page is scrolled
• Cookie integration, so state is "remembered"
• Custom HTML areas

How to setup

Firstly, extract all the files and then upload to your server. Next, include the foobar javascript file together with jquery in your head tag. Also include a link to the foobar CSS stylesheet.

Foobar will work with any version of jQuery from 1.4.4 upwards, so if you already have a version included in your page do not include another just for the foobar.

<link type="text/css" href="css/jquery.foobar.2.1.css" rel="Stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.foobar.2.1.min.js"></script>

Now initialize the bar when the page has loaded, by placing some code in the head tag of your page. The simplest way to initialize the foobar can been seen in the following code:

<script type="text/javascript">
  $(function(){
    $foobar('Hello World!');
  });
</script>

Or override the default foobar options by using something like this code instead:

<script type="text/javascript">
  $(function(){
    $foobar({
      "position" : {
        "bar" : "inline"
      },
      "display" : {
        "type" : "delayed",
        "delay" : 2000
      },
      "messages": [ 
        "foobar! Notification bars, done right!", 
        "You can display multiple messages with <a href='#'>links!</a>"
      ],
      "social": {
        "profiles": [{
            "name": "facebook",
            "url": "#foobar-facebook",
            "image": "images/social/facebook.png"
          },{
            "name": "twitter",
            "url": "#foobar-twitter",
            "image": "images/social/twitter.png"
        }]
      }
    });
  });
</script>

Constructor Changes

If you have previously used foobar you may have noticed that the constructor call has changed in the above examples. The original $.foobar() or jQuery.foobar() constructor will still work as expected, we have just decided to implement new constructors for better compatibility.

You can now use any of the below to initialize the foobar or call any of the various methods:

• $.foobar
• jQuery.foobar
• $foobar
• foobar

Notes

In the above code examples the call to the foobar constructor always takes place after the page has been loaded. This is accomplished using the jQuery ready method. If the foobar constructor is called prior to the page being ready, nothing will appear at all.

The below shows just the ready method code, both the shortcut and full version:

Shortcut Method (used above)

<script type="text/javascript">
  $(function(){
    
  });
</script>

Full Method

<script type="text/javascript">
  $(document).ready(function(){
    
  });
</script>

Width Demos Customize the widths of the various foobar sections.

Position Demos Change the positioning of the foobar, its buttons and the social links.

Display Demos Change the way the foobar looks and behaves.

Button Display Demos Change the way the foobar button looks and behaves.

Theme Demos Customize the button themes.

Custom Styling Demo Customize the look and feel of your foobar.

Method Demos Call methods to perform certain functions such as opening or closing the foobar.

RTL Demo Change the foobar to handle RTL languages.

RSS / Tweets Demo Load an RSS feed or twitter stream into your foobar.