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 @@ + +