## Let your buttons fly

It's a plugin that make it possible for any button to float on it's parent div

## Setup

1. Include jQuery and jQueryui
2. Include stylesheet and js files

       <link href="css/bootstrap-magic-button.css" rel="stylesheet">
       <script src="jquery.hoverIntent.js"></script>
       <script src="bootstrap-magic-button.js"></script>

3. Include `class="magicBtn"` and `data-image="path/to/image.png"` to your buttons
4. Start using :

       $('.magicBtn').magicBtn('show');

It is preferable to add your own class to group of magic buttons, use that class to customize groups of magic buttons

    <button class="magicBtn myClass" ... />

    $('.myClass').magicBtn('show');

## Examples:

### Simple button

This is the most basic magic button, the default behavior is to stick on the right side of div which is containing magic buttons

## Code:

    <div class="well span3">
      <p>This is the most basic magic button, ...</p>

      <button class="magicBtn" data-image="img/msg.png"/>
    </div>

### Toggle effect

Add a toggle effect using the `data-toggle="magicBtn"`

    <button class="magicBtn" data-image="img/msg.png" data-toggle="magicBtn"/>

### Toggle image

Use`data-toggle-image` to customize toggle image

    <button class="magicBtn" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"/>

### Hover effect

You can enable a hover effect over your buttons

jquery.hoverIntent is used in replacement of jQuery builtin hover

    <button class="magicBtn hover" data-image="img/pin-off.png" data-toggle="magicBtn" data-toggle-image="img/pin-on.png"/>

    $('.hover').magicBtn({hover: true});
    $('.hover').magicBtn('show');

### How about bootstrap icons ?

Just put the icons inside the button

    <button class="magicBtn icon"><i class="icon-search"></i></button>
    <button class="magicBtn icon"><i class="icon-user"></i></button>

    $('.icon').magicBtn({hover: true, alignment: 'top'});
    $('.icon').magicBtn('show');

### Methods

#### $().magicBtn('show')

Shows the buttons found by selector

#### $().magicBtn('hide')

Hides the buttons found by selector

#### $().magicBtn('toggle')

Activates toggle state

You can enable auto toggling of a button by using `data-toggle` attribute

#### $().magicBtn('fadeIn')

Shows button with a fade in effect

#### $().magicBtn('fadeOut')

Hides button with a fade in effect

### Options

Name | type | default | description
--- | --- | --- | ---
alignment | string | center | start showing buttons from center, 1 in middle, even on ones top and odd ones on bottom
betweenSpace | integer | 2 | space between buttons
hover | boolean | false | Enables hover effect