Position Demos

The foobar's position can be manipulated using the below options. These options allow you to position the bar fixed at the top or bottom of the page or at the top of the page but inline with the rest of the content. You can also change the side the open/close button and the social links are created on.


position.bar

How the bar is positioned within the page (inline | top | bottom).


This example will position the bar inline with the rest of the page content and set a message saying so. This allows the bar to be scrolled out of view.

$foobar({
  "position": {
    "bar": "inline"
  },
  "messages": ["This foobar is displayed 'inline'"]
});
inline

This example will position the bar bottom and set a message saying so. This will keep the bar always in view over other content.

$foobar({
  "position": {
    "bar": "bottom"
  },
  "messages": ["This foobar is displayed 'bottom'"]
});
bottom

This example will position the bar top and set a message saying so. This will keep the bar always in view over other content.

$foobar({
  "position": {
    "bar": "top"
  },
  "messages": ["This foobar is displayed 'top'"]
});
top

position.button

Position of the open / close button (left | right | hidden).


This example will make the button hidden. This means no button at all will be created, unless you create your own buttons the user will not be able to open / close the bar and it would stay in the state it was initialized in.

$foobar({
  "position": {
    "button": "hidden"
  },
  "messages": ["This foobar's button is 'hidden'"]
});
hidden

This example will position the button to the left of the bar.

$foobar({
  "position": {
    "button": "left"
  },
  "messages": ["This foobar's button is 'left'"]
});
left

This example will position the button to the right of the bar.

$foobar({
  "position": {
    "button": "right"
  },
  "messages": ["This foobar's button is 'right'"]
});
right

position.social

Position of the social button area (left | right | hidden).


This example will position the social button area to the left of the bar.

$foobar({
  "position": {
    "social": "left"
  },
  "messages": ["This foobar's social button area is 'left'"]
});
left

This example will position the social button area to the right of the bar.

$foobar({
  "position": {
    "social": "right"
  },
  "messages": ["This foobar's social button area is 'right'"]
});
right

This example will make the social button area hidden.

$foobar({
  "position": {
    "social": "hidden"
  },
  "messages": ["This foobar's social button area is 'hidden'"]
});
hidden