diff --git a/bootstrap-magic-button.css b/bootstrap-magic-button.css
deleted file mode 100644
index 5bf51b0..0000000
--- a/bootstrap-magic-button.css
+++ /dev/null
@@ -1,21 +0,0 @@
-button[class^=magicBtn] {
- display: none;
- position: fixed;
- border-style: none;
- background: none;
- background-repeat: no-repeat;
- width: 47px;
- height: 32px;
- opacity: 0.7;
-}
-
-button[class*="magicBtn-active"] {
- position: fixed;
- border-style: none;
- background: none;
- background-repeat: no-repeat;
- width: 47px;
- height: 32px;
- opacity: 1;
-}
-
diff --git a/bootstrap-magic-button.js b/bootstrap-magic-button.js
deleted file mode 100644
index a369b52..0000000
--- a/bootstrap-magic-button.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/* ============================================================
- * bootstrap-magic-button.js v1.0
- * https://github.com/sp4ke/bootstrap-magic-button
- * ============================================================
- * Copyright 2012 Chakib Benziane
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Modified work : bootstrap-button.js v2.0.2
- * Copyright 2012 Twitter, Inc.
- * ============================================================ */!
-function ($) {
-
- "use strict"
-
- /* BUTTON PUBLIC CLASS DEFINITION
- * ============================== */
-
- var MagicBtn = function (element, options) {
- this.$element = $(element)
-
- // The parent Div
- this.$parentDiv = $(element).closest('div')
- this.$parentHeight = this.$parentDiv.outerHeight()
- this.$parentWidth = this.$parentDiv.outerWidth()
- this.$parentPosition = this.$parentDiv.position();
- this.options = $.extend({}, $.fn.magicBtn.defaults, options)
-
- // Store number of buttons on parent div
- if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1)
- else this.$parentDiv.data().nbMagicBtns++;
-
- // Store the current button number
- this.$currentBtnNb = this.$parentDiv.data('nbMagicBtns')
-
- // store the currunt button size
- this.$height = this.$element.outerHeight() + this.options.betweenSpace / 2
- this.$width = this.$element.outerWidth()
-
- // current button image and toggle image if there is
- this.$imgUrl = 'url("' + this.$element.data('image') + '")'
- var toggleimg
- if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
- else this.$toggleImgUrl = this.$imgUrl
-
- this.$isToggled = false
-
- if (this.options.hover) this.addHover()
- }
-
- MagicBtn.prototype = {
-
- constructor: MagicBtn
-
- // state is the option recieved from jQuery plugin
- ,
- setState: function (state) {
- var d = 'disabled',
- $el = this.$element,
- data = $el.data(),
- val = $el.is('input') ? 'val' : 'html'
-
- state = state + 'Text'
- data.resetText || $el.data('resetText', $el[val]())
-
- $el[val](data[state] || this.options[state])
-
- // push to event loop to allow forms to submit
- setTimeout(function () {
- state == 'loadingText' ? $el.addClass(d).attr(d, d) : $el.removeClass(d).removeAttr(d)
- }, 0)
- }
-
- ,
- calculatePosition: function (direction) {
- var space = (this.$currentBtnNb === 1) ? 0 : this.options.betweenSpace
- var left = this.$parentPosition.left + this.$parentWidth
- switch (this.options.alignement) {
- case 'top':
- this.$top = (
- (this.$currentBtnNb * this.$height) - this.$height + this.$parentPosition.top + (space * (this.$currentBtnNb - 1)))
- break;
- case 'center':
-
- if (this.$currentBtnNb === 1) {
- this.$top = (
- (this.$parentHeight / 2) - (this.$height / 2) + this.$parentPosition.top)
- this.$parentDiv.data('top-space', (this.$parentHeight / 2 - (this.$height / 2)))
- this.$parentDiv.data('bottom-space', (this.$parentHeight / 2 - (this.$height / 2)))
- } else if (this.$currentBtnNb % 2 === 0) {
- this.$top = (
- this.$parentDiv.data('top-space') - this.$height + this.$parentPosition.top)
- this.$parentDiv.data('top-space', this.$parentDiv.data('top-space') - this.$height)
- } else {
- this.$top = (
- this.$parentHeight - this.$parentDiv.data('bottom-space') + this.$parentPosition.top)
-
- this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height)
- }
- break;
-
-
-
- }
-
- this.$left = this.$parentPosition.left + this.$parentWidth
- }
-
- ,
- show: function () {
- var $o = this.options
- this.$element.css({
- top: this.$top,
- left: this.$left,
- 'background-image': this.$imgUrl
- }).show()
- }
-
- ,
- hide: function () {
- this.$element.hide()
- }
-
- ,
- toggle: function () {
- var $el = this.$element
- if (!this.$isToggled) {
- $el.css('background-image', this.$toggleImgUrl)
- this.$isToggled = true
- $el.addClass('magicBtn-active')
- } else {
- $el.css('background-image', this.$imgUrl)
- this.$isToggled = false
- $el.removeClass('magicBtn-active')
- }
- }
-
- ,
- addHover: function () {
- var $el = this.$element
- var obj = this
- var config = {
- over: function () {
- if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
- },
- timeout: 1,
- out: function () {
- if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
- }
- }
- $el.hoverIntent(config)
-
- }
-
- }
-
-
- /* BUTTON PLUGIN DEFINITION
- * ======================== */
-
- $.fn.magicBtn = function (option) {
- return this.each(function () {
- var $this = $(this),
- data = $this.data('magicBtn'),
- options = typeof option == 'object' && option
- if (!data) $this.data('magicBtn', (data = new MagicBtn(this, options)))
- data.calculatePosition('right')
- if (option == 'toggle') data.toggle()
- if (option == 'show') data.show()
- if (option == 'hide') data.hide()
- else if (option) data.setState(option)
-
- })
- }
-
- $.fn.magicBtn.defaults = {
- loadingText: 'loading...',
- direction: 'right',
- betweenSpace: 2,
- alignement: 'center',
- hover: false
- }
-
- $.fn.magicBtn.Constructor = MagicBtn
-
-
- /* BUTTON DATA-API
- * =============== */
-
- $(function () {
- $('body').on('click.magicBtn.data-api', '[data-toggle^=magicBtn]', function (e) {
- var $btn = $(e.target)
- if (!$btn.hasClass('magicBtn')) $btn = $btn.closest('.magicBtn')
- $btn.magicBtn('toggle')
- })
- })
-
-}(window.jQuery);
\ No newline at end of file
diff --git a/css/bootstrap-magic-button.css b/css/bootstrap-magic-button.css
index 5bf51b0..84edbf3 100644
--- a/css/bootstrap-magic-button.css
+++ b/css/bootstrap-magic-button.css
@@ -1,6 +1,6 @@
button[class^=magicBtn] {
display: none;
- position: fixed;
+ position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
@@ -10,7 +10,7 @@ button[class^=magicBtn] {
}
button[class*="magicBtn-active"] {
- position: fixed;
+ position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
diff --git a/example/example.css b/example/example.css
new file mode 100644
index 0000000..a7abbcc
--- /dev/null
+++ b/example/example.css
@@ -0,0 +1,9 @@
+button[class^="magicBtn hero"] {
+ margin-top: 80px;
+}
+
+footer .footer {
+ style="margin-top: 45;
+ padding:35px 0 36px;
+ border-top: 1px solid #E5E5E5;
+}
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index 5f7d63c..491f108 100644
--- a/example/index.html
+++ b/example/index.html
@@ -10,6 +10,8 @@
+
+