Display Demos

There are various ways to change how the foobar is displayed. You can customize the color, size, fonts and many other aspects of the bar.


display.type & display.delay

The initial state of the foobar (expanded | collapsed | delayed | onscroll).


This example will display a collapsed foobar, it will initially not be visible to site visitors.

$foobar({
  "display": {
    "type": "collapsed"
  }
});
collapsed

This example will display an expanded foobar, it will be visible to visitors immediately.

$foobar({
  "display": {
    "type": "expanded"
  }
});
expanded

This example will display a delayed foobar after the time specified by the value of display.delay has expired.

$foobar({
  "display": {
    "type": "delayed",
    "delay": 2000
  }
});
delayed

This example will display an onscroll foobar, which will only be displayed once the user has scrolled the page and after the time specified by the value of display.delay has expired.

$foobar({
  "display": {
    "type": "onscroll",
    "delay": 2000
  }
});
onscroll

display.backgroundColor

The CSS background color of the bar.


You can set this value to be any valid HTML color, in the below example the background color is switched to red.

$foobar({
  "display": {
    "backgroundColor": "#F00"
  }
});
backgroundColor reset

display.border

The CSS border styling for the bar.


You can set this value to be any valid CSS border value, however due to the way the shadow is created with images for IE backwards compatibility it is recommended to not create a border with a width larger than 6px as you will lose the shadow.

$foobar({
  "display": {
    "border": "solid 3px #000"
  }
});
border reset

display.shadow

Show or hide the foobar shadows.


$foobar({
  "display": {
    "shadow": false
  }
});
no shadow reset