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>

Below is the full list of supported options available in the foobar showing the type and default value of each.

PLEASE NOTE foobar options have been completely changed from previous versions. If you previously used foobar prior to V2, please use our options converter to convert your options to be compatible with V2.

option description type default
height
bar The height of the bar in pixels Number 30
button The height of the button in pixels, when the bar is collapsed Number 30
width
left The width for the left section of the bar, this can either be the actual width (%, px, etc) or set to null or * (null and * will auto fill the remaining space equally dividing it with any other sections set to null or *). String "*"
center The width for the center section of the bar, this can either be the actual width (%, px, etc) or set to null or * (null and * will auto fill the remaining space equally dividing it with any other sections set to null or *). String "50%"
right The width for the right section of the bar, this can either be the actual width (%, px, etc) or set to null or * (null and * will auto fill the remaining space equally dividing it with any other sections set to null or *). String "*"
button The width for the button section of the bar, this must be an actual width (%, px, etc). String "80px"
position
bar How the bar is positioned within the page (inline | top | bottom) String "top"
button Position of the open / close button (left | right | hidden) String "right"
social Position of the social button area (left | right | hidden) String "left"
ignoreOffsetMargin If you have a plugin that hides the default WP admin bar or similar web parts and the foobar is not correctly positioning itself at the top or bottom of the page set this value to 'true' to force the foobar to render correctly. Boolean false
display
type The initial state of the foobar (expanded | collapsed | delayed | onscroll) String "expanded"
delay Used in conjunction with the 'delayed' and 'onscroll' display.type options to determine the amount of time to wait before showing the bar Number 0
speed The speed at which to scroll the bar into view Number 200
backgroundColor The CSS background color of the bar String "#6c9e00"
border The CSS border styling for the bar String "solid 3px #FFF"
button
type The type of action the close button performs (toggle | close). If set to 'close' the bar will be collapsed and then destroyed when the user clicks the button String "toggle"
spacer Whether or not to create another block the same size as the button on the opposite side of the bar to the button to ensure the messages remain centered Boolean true
backgroundColor The CSS background color of the open button, if set to null this will inherit the background color of the bar String null
border The CSS border styling for the open button, if set to null this will inherit border of the bar String null
theme
bar The theme used for the arrow buttons that are shown in the bar. (triangle-arrow | long-arrow | small-white-arrow | x-close or use your own custom theme) String "triangle-arrow"
navigation The theme used for the navigation arrow buttons. (triangle-arrow | long-arrow | small-white-arrow | x-close or use your own custom theme), if set to null this will inherit the bar theme String null
easing The type of easing used when expanding the bar or displaying the open button (swing | linear). You can extend the default options by using libraries such as jQuery Easing v1.3 which add additional effects. Also please check out the jQuery docs on the .animate() method for more info on easing. String "swing"
shadow Show or hide the foobar shadows Boolean true
adjustPageHeight Whether or not the page height is adjusted to accommodate for the foobar so page content is not hidden when scrolled Boolean true
rtl Whether or not to configure the bar for RTL languages. If true messages are scrolled from left to right and the social text is displayed to the right of the icons and right aligned Boolean false
cookie
enabled When set to true the state of the bar is stored in a client-side cookie (open or closed) Boolean false
name The name of the cookie. This is used to set the cookie and retrieve the cookie on the clients machine String "foobar-state"
duration The number of days to store the cookie on the clients machine Number 1
version If the user cookie version is not the same as the one provided the plugin will ignore any set cookie and force a reshow of the bar. It then creates a new cookie with the new version so it will be ignored just once. Number 1
messages[] The array of messages to display in the bar. If only 1 message it will be displayed permanently otherwise the message.delay value is used to cycle through the array Array []
message
delay The delay between switching of messages (if more than 1 message is supplied) Number 4000
fadeDelay The time it takes to transition to the next message (if more than 1 message is supplied) Number 300
random Whether or not to randomly select messages to be displayed Boolean false
navigation Whether or not to display the navigation arrows (previous and next) when there are 2 or more messages Boolean false
cssClass The CSS class to apply to the messages. If this option is set the message.font options are ignored. String null
scroll
enabled Sets whether or not to allow extra length messages to be scrolled into view Boolean true
speed The pixels per second to scroll extra length messages into view (if the message does not fit by default) Number 50
delay The delay between initially displaying a long message and the beginning of scrolling it Number 2000
font
family The font family used for the messages String "Verdana"
size The font size used for the messages String "10pt"
color The font color used for the messages String "White"
decoration The text decoration used for the messages String null
shadow The shadow for the messages String null
weight The font weight for the messages String null
aFont
family The font family of any links in the messages String "Verdana"
size The font size of any links in the messages String "10pt"
color The font color of any links in the messages String "LightYellow"
decoration The text decoration of any links in the messages String "underline"
shadow The shadow for any links in the messages String null
weight The font weight for any links in the messages String null
hover
family The font family of any links in the messages when hovered String null
size The font size of any links in the messages when hovered String null
color The font color of any links in the messages when hovered String null
decoration The text decoration of any links in the messages when hovered String null
shadow The shadow for any links in the messages when hovered String null
weight The font weight for any links in the messages when hovered String null
leftHtml Custom html to append to the left side of the bar String null
rightHtml Custom html to append to the right side of the bar String null
social
text The text displayed in the social area String "Follow us:"
cssClass The CSS class to apply to the social links. If this option is set the social.font options are ignored. String null
font
family The font family of the text in the social area String "Verdana"
size The font size of the text in the social area String "10pt"
color The font color of the text in the social area String "White"
decoration The text decoration of the text in the social area String null
shadow The text shadow of the text in the social area String null
weight The font weight of the text in the social area String null
profiles[] The array of social profiles to display in the bar. Array []
name The name of the social network String
url The URL to your profile on the social network String
image The image to display in the bar String
target The target for rss links (_blank | _self | _parent | _top | 'frameName') String
rss
enabled If messages can be populated using an RSS feed Boolean false
url The URL to the RSS feed String null
maxResults The maximum number of RSS feed results to display as messages Number 5
linkText The text displayed in the link to the article String "Read More"
linkTarget The target for rss links (_blank | _self | _parent | _top | 'frameName') String "_blank"
twitter
enabled If messages can be populated using a Twitter feed Boolean false
user The Twitter user to pull tweets from String null
maxTweets The max number of tweets to pull Number 5

There are a few custom events built into foobar to help you extend it even further. To view the events firing in the below console window in real-time, expand and collapse the foobar on this page.

name description
expanding Ocurrs just before the foobar is expanded.
collapsing Ocurrs just before the foobar is collapsed.
setExpanded Ocurrs when the foobar is first initialized if the option 'display.type' is set to 'expanded'
setCollapsed Ocurrs when the foobar is first initialized if the option 'display.type' is set to 'collapsed'
preRender Ocurrs just before the foobar is rendered and added to the DOM.
postRender Ocurrs just after the foobar is rendered and added to the DOM.

You can now call methods to tell foobar to perform certain actions after the initial creation of the bar. These can be used to create your own open or close buttons as an example.

These methods are called by simply passing the method name to the foobar constructor from within your own javascript.

Check out the demos to see how to use the methods.

name description example
open Opens the foobar, if it is already open nothing happens $foobar('open')
close Closes the foobar, if it is already closed nothing happens $foobar('close')
toggle Toggles the foobar between open and closed $foobar('toggle')
prev Displays the previous message, if there is only one message nothing happens $foobar('prev')
next Displays the next message, if there is only one message nothing happens $foobar('next')
start Starts the message loop, if it is already running or there is only one message nothing happens $foobar('start')
stop Stops the message loop, if it is already stopped or there is only one message nothing happens $foobar('stop')
destroy Removes the foobar from the page completely. Once this has been executed you will have to create a new foobar by calling the constructor and supplying it options $foobar('destroy')
option Gets or sets any option. If no value is specified, will act as a getter. $foobar('option', 'optionName', value)
  Set multiple options at once by providing an options object. $foobar('option', options)

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.