diff --git a/README.md b/README.md index 2b579fd..091a5ef 100644 --- a/README.md +++ b/README.md @@ -49,8 +49,9 @@ brings this feature to older iOS versions, Android devices and for Windows Store force: null, // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner hideOnInstall: true, // Hide the banner after "VIEW" is clicked. layer: false, // Display as overlay layer or slide down the page - iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too. + iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too. appendToSelector: 'body', //Append the banner to a specific selector + pushSelector: 'html' // What element(s) are going to push the site content down; this is where the banner append animation will start. onInstall: function() { // alert('Click install'); }, diff --git a/jquery.smartbanner.js b/jquery.smartbanner.js index e9bd32b..2c847c9 100644 --- a/jquery.smartbanner.js +++ b/jquery.smartbanner.js @@ -147,17 +147,18 @@ if (this.options.layer) { banner.animate({top: 0, display: 'block'}, this.options.speedIn).addClass('shown').show(); - $(this.pushSelector).animate({paddingTop: this.origHtmlMargin + (this.bannerHeight * this.scale)}, this.options.speedIn, 'swing', callback); + $(this.options.pushSelector).animate({paddingTop: this.origHtmlMargin + (this.bannerHeight * this.scale)}, this.options.speedIn, 'swing', callback); } else { if ($.support.transition) { banner.animate({top:0},this.options.speedIn).addClass('shown'); + var pushSelector = this.options.pushSelector; var transitionCallback = function() { - $('html').removeClass('sb-animation'); + $(pushSelector).removeClass('sb-animation'); if (callback) { callback(); } }; - $(this.pushSelector).addClass('sb-animation').one($.support.transition.end, transitionCallback).emulateTransitionEnd(this.options.speedIn).css('margin-top', this.origHtmlMargin+(this.bannerHeight*this.scale)); + $(this.options.pushSelector).addClass('sb-animation').one($.support.transition.end, transitionCallback).emulateTransitionEnd(this.options.speedIn).css('margin-top', this.origHtmlMargin+(this.bannerHeight*this.scale)); } else { banner.slideDown(this.options.speedIn).addClass('shown'); } @@ -170,20 +171,22 @@ if (this.options.layer) { banner.animate({top: -1 * this.bannerHeight * this.scale, display: 'block'}, this.options.speedIn).removeClass('shown'); - $(this.pushSelector).animate({paddingTop: this.origHtmlMargin}, this.options.speedIn, 'swing', callback); + $(this.options.pushSelector).animate({paddingTop: this.origHtmlMargin}, this.options.speedIn, 'swing', callback); } else { if ($.support.transition) { if ( this.type !== 'android' ) banner.css('top', -1*this.bannerHeight*this.scale).removeClass('shown'); else banner.css({display:'none'}).removeClass('shown'); + + var pushSelector = this.options.pushSelector; var transitionCallback = function() { - $('html').removeClass('sb-animation'); + $(pushSelector).removeClass('sb-animation'); if (callback) { callback(); } }; - $(this.pushSelector).addClass('sb-animation').one($.support.transition.end, transitionCallback).emulateTransitionEnd(this.options.speedOut).css('margin-top', this.origHtmlMargin); + $(this.options.pushSelector).addClass('sb-animation').one($.support.transition.end, transitionCallback).emulateTransitionEnd(this.options.speedOut).css('margin-top', this.origHtmlMargin); } else { banner.slideUp(this.options.speedOut).removeClass('shown'); } @@ -274,7 +277,7 @@ layer: false, // Display as overlay layer or slide down the page iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too. appendToSelector: 'body', //Append the banner to a specific selector - pushSelector: 'html' // What element is going to push the site content down; this is where the banner append animation will start. + pushSelector: 'html' // What element(s) are going to push the site content down; this is where the banner append animation will start. } $.smartbanner.Constructor = SmartBanner;