Display Button Demos

The display.button object exposes 4 options to customize the look and function of the 'close' button.


display.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.


This option was added to allow the bar to act as a one time notification bar, to achieve this effect set this option to 'close' and then enable the 'cookie' option. To display another message you would then have to change the cookie version so the bar is forced to be shown again to the visitor. The themes 'x-close' and 'x-white' were specifically added to support this kind of one time functionality.

The below example simply displays the 'close' functionality ('toggle' is the default). The theme has also been changed to 'x-white'. Once you close the below bar you will need to reset it.

$foobar({
  "display": {
    "button": {
      "type": "close"
    },
    "theme": {
      "bar": "x-white"
    }
  }
});
button.type reset

display.button.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.


This option was added due to the new width options, to be able to center the messages correctly while still providing the ability to do fluid layouts a spacer element was required. To see examples of how it is used please check the width demos.


display.button.backgroundColor

The CSS background color of the open button, if set to null this will inherit the 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": {
    "button": {
      "backgroundColor": "#F00"
    }
  }
});
button.backgroundColor reset

display.button.border

The CSS border styling for the open button, if set to null this will inherit border of 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.

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