diff --git a/example/css/bootstrap-magic-button.css b/example/css/bootstrap-magic-button.css
index c47a12e..b14d577 100644
--- a/example/css/bootstrap-magic-button.css
+++ b/example/css/bootstrap-magic-button.css
@@ -1,11 +1,12 @@
button[class^=magicBtn] {
+ font-weight: bold;
display: none;
position: absolute;
border-style: none;
background: none;
background-repeat: no-repeat;
width: 47px;
- height: 32px;
+ height: 38px;
opacity: 0.7;
}
@@ -16,7 +17,7 @@ button[class*="magicBtn-active"] {
background: none;
background-repeat: no-repeat;
width: 47px;
- height: 32px;
+ height: 38px;
opacity: 1;
}
diff --git a/example/index.html b/example/index.html
index 231e8cc..1f3e7a3 100644
--- a/example/index.html
+++ b/example/index.html
@@ -179,8 +179,8 @@
Just put the icons inside the button
-
-
+
+
diff --git a/example/js/bootstrap-magic-button.js b/example/js/bootstrap-magic-button.js
index 558ffe8..00d6cc2 100644
--- a/example/js/bootstrap-magic-button.js
+++ b/example/js/bootstrap-magic-button.js
@@ -50,7 +50,11 @@ function ($) {
this.$width = this.$element.outerWidth()
// current button image and toggle image if there is
- this.$imgUrl = 'url("' + this.$element.data('image') + '")'
+ var imgUrl = this.$element.data('image')
+ if (typeof(imgUrl) !== 'undefined')
+ this.$imgUrl = 'url("' + this.$element.data('image') + '")'
+ else
+ this.$imgUrl = false
var toggleimg
if (toggleimg = this.$element.data('toggle-image'))
this.$toggleImgUrl = 'url("' + toggleimg + '")'
@@ -159,13 +163,21 @@ function ($) {
toggle: function () {
var $el = this.$element
if (!this.$isToggled) {
- $el.css('background-image', this.$toggleImgUrl)
+ if (this.$imgUrl)
+ $el.css('background-image', this.$toggleImgUrl)
this.$isToggled = true
$el.addClass('magicBtn-active')
+ $el.css('padding-left', function(index,value){
+ return (parseInt(value) + 4) + 'px';
+ });
} else {
- $el.css('background-image', this.$imgUrl)
+ if (this.$imgUrl)
+ $el.css('background-image', this.$imgUrl)
this.$isToggled = false
$el.removeClass('magicBtn-active')
+ $el.css('padding-left', function(index,value){
+ return (parseInt(value) - 4) + 'px';
+ });
}
}
@@ -174,14 +186,18 @@ function ($) {
_hoverInCallback: function () {
var obj = $(this).data('magicBtn')
var o = obj.options
+ var hoverText = $(this).attr('value')
+ var tmpHoverText;
+ if (obj.$isToggled){
+ tmpHoverText = $(this).data('toggle-text')
+ if (typeof(tmpHoverText) !== 'undefined')
+ hoverText = tmpHoverText
+ }
if (!obj.$isToggled) {
- if (o.hoverText){
- //$(this).find('i').hide()
- $('' + $(this).attr('value') + '').
- hide().appendTo($(this)).fadeIn()
- }
$(this).toggleClass('magicBtn-active')
}
+ $('' + hoverText + '').
+ hide().appendTo($(this)).fadeIn()
}
,
@@ -190,12 +206,9 @@ function ($) {
var o = obj.options
var $el = $(this)
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){
- if (o.hoverText){
- $(this).find('.value').fadeOut('slow').remove()
- $(this).find('i').show(100)
- }
$(this).toggleClass('magicBtn-active', 100)
}
+ $(this).find('.value').fadeOut('slow').remove()
}
,
@@ -229,7 +242,7 @@ function ($) {
if (option == 'fadeIn') data.fadeIn()
if (option == 'fadeOut') data.fadeOut()
if (option == 'hide') data.hide()
- else if (option) data.setState(option)
+ //else if (option) data.setState(option)
})
}
diff --git a/js/bootstrap-magic-button.js b/js/bootstrap-magic-button.js
index 558ffe8..00d6cc2 100644
--- a/js/bootstrap-magic-button.js
+++ b/js/bootstrap-magic-button.js
@@ -50,7 +50,11 @@ function ($) {
this.$width = this.$element.outerWidth()
// current button image and toggle image if there is
- this.$imgUrl = 'url("' + this.$element.data('image') + '")'
+ var imgUrl = this.$element.data('image')
+ if (typeof(imgUrl) !== 'undefined')
+ this.$imgUrl = 'url("' + this.$element.data('image') + '")'
+ else
+ this.$imgUrl = false
var toggleimg
if (toggleimg = this.$element.data('toggle-image'))
this.$toggleImgUrl = 'url("' + toggleimg + '")'
@@ -159,13 +163,21 @@ function ($) {
toggle: function () {
var $el = this.$element
if (!this.$isToggled) {
- $el.css('background-image', this.$toggleImgUrl)
+ if (this.$imgUrl)
+ $el.css('background-image', this.$toggleImgUrl)
this.$isToggled = true
$el.addClass('magicBtn-active')
+ $el.css('padding-left', function(index,value){
+ return (parseInt(value) + 4) + 'px';
+ });
} else {
- $el.css('background-image', this.$imgUrl)
+ if (this.$imgUrl)
+ $el.css('background-image', this.$imgUrl)
this.$isToggled = false
$el.removeClass('magicBtn-active')
+ $el.css('padding-left', function(index,value){
+ return (parseInt(value) - 4) + 'px';
+ });
}
}
@@ -174,14 +186,18 @@ function ($) {
_hoverInCallback: function () {
var obj = $(this).data('magicBtn')
var o = obj.options
+ var hoverText = $(this).attr('value')
+ var tmpHoverText;
+ if (obj.$isToggled){
+ tmpHoverText = $(this).data('toggle-text')
+ if (typeof(tmpHoverText) !== 'undefined')
+ hoverText = tmpHoverText
+ }
if (!obj.$isToggled) {
- if (o.hoverText){
- //$(this).find('i').hide()
- $('' + $(this).attr('value') + '').
- hide().appendTo($(this)).fadeIn()
- }
$(this).toggleClass('magicBtn-active')
}
+ $('' + hoverText + '').
+ hide().appendTo($(this)).fadeIn()
}
,
@@ -190,12 +206,9 @@ function ($) {
var o = obj.options
var $el = $(this)
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){
- if (o.hoverText){
- $(this).find('.value').fadeOut('slow').remove()
- $(this).find('i').show(100)
- }
$(this).toggleClass('magicBtn-active', 100)
}
+ $(this).find('.value').fadeOut('slow').remove()
}
,
@@ -229,7 +242,7 @@ function ($) {
if (option == 'fadeIn') data.fadeIn()
if (option == 'fadeOut') data.fadeOut()
if (option == 'hide') data.hide()
- else if (option) data.setState(option)
+ //else if (option) data.setState(option)
})
}