Magic buttons

Let your buttons fly

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

Setup

Include jQuery and jQueryui

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>

Include class="magicBtn" and data-image="path/to/image.png" to your buttons

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

Usedata-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