https://github.com/mfix22/floating_help_button
Floating button that expands into a perfect form area. Both the form and button are draggable!
https://github.com/mfix22/floating_help_button
Last synced: 10 months ago
JSON representation
Floating button that expands into a perfect form area. Both the form and button are draggable!
- Host: GitHub
- URL: https://github.com/mfix22/floating_help_button
- Owner: mfix22
- License: mit
- Created: 2015-06-29T02:21:45.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-04-04T00:59:59.000Z (over 8 years ago)
- Last Synced: 2025-01-11T11:48:08.269Z (12 months ago)
- Language: JavaScript
- Size: 405 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
The floating help button is a **draggable** button that is _beyond easy_ to add to your page and works perfectly as a floating action button for messaging, customer support, and more. Works great on your material design page. You can also turn of the drag ability.
## Getting Started
```bash
git clone https://github.com/mfix22/floating_help_button.git
```
Link the css and js files to your page
```html
...
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.js"><\/script>');
```
## Usage
Add a div with a `.help.inactive` class to your page. Add `id="help"` if you want your button to be draggable
```html
```
That is all you need! However there are a few things you can do to customize your floating help button
Within the `.help.inactive` div, add a `
` with text or an icon that will be displayed before the button is pressed.
Within the `.help.inactive` div, ad a `
` with the elements you want hidden until the button has been pressed
Basic form example:
```html
?
SEND
```
## Options
You can customize the position, colors, and more by passing the options as so:
```js
var options = {
draggable : false,
top: '50%',
left: '50%',
send: function(){
alert("Hello");
},
color: "blue",
background_color: "salmon"
};
set(options);
```
Make sure to place this script **after** your link to `help.js`.
### Option information
Name | Type | Default | Description
------------- | ----------- | ----------- | -----------
draggable | boolean | _true_ | Sets whether you want the button to be draggable or not
top | string | _90%_ | Sets position of button from top
left | string | _90%_ | Sets position of button from top
send | function | _null_ | This function is called by the button with id `#help-submit`
color | string | _#3B70BF_ | Used to color features of the help button
background_color| string | _white_ | Used as the background color of the help button
##Example
```html
SEND
...
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.js"><\/script>');
var options = {
draggable : false,
top: '50%',
left: '50%',
send: function(){
alert("Hello");
},
color: "blue",
background_color: "salmon"
};
set(options);
```
I created the form seen in the example `index.html` thanks to [Bootstrap](http://getbootstrap.com/) and [Ionicons](http://ionicons.com/) if you want to recreate this example!:
```html
```
## Coming Soon
- Bower install
- Live dragging (with move cursor)
- Ability to have multiple floating help buttons on a page (and no need for `id="help"`)
---
[MIT License](https://github.com/mfix22/floating_help_button/blob/master/LICENSE)