Comments on: BounceBox Notification Plugin With jQuery & CSS3

By: Martin Angelov

Martin Angelov — Wed, 07 Jul 2010 13:17:34 +0000

Yes, you can remove the bounce effect. Change line 29 of bouncebox-plugin/jquery.bouncebox.1.0.js from:

this.stop().animate({top:0},{easing:'easeOutBounce'});

to:

this.stop().animate({top:0});

By: Dhruv Kumar

Dhruv Kumar — Sun, 04 Jul 2010 11:43:47 +0000

Great tutorial, is there any way to remove the bounce effect? i love it more without the bounce effect.

By: Raubie

Raubie — Tue, 29 Jun 2010 02:37:17 +0000

Oops. My apologies, you’ve already answered my second question by providing an autohide version. Thank you!

By: Raubie

Raubie — Tue, 29 Jun 2010 02:34:08 +0000

Martin, thank you. I really appreciate your reply. It tests out great with a link activation.

I have another two more questions. 1) How would you go about adding an extra bounce (or two)? 2) How do you add say a five-second time-out that closes the box (in addition to closing it with a click)?

Again, thanks. ~ Raubie

By: Martin Angelov

Martin Angelov — Sat, 26 Jun 2010 16:25:08 +0000

The button is basically a regular link with a bit of styling applied. To open it from a specific link just change the selector on line 7 of script.js. Currently:

 $('a.button').click(function(e){

Should be:

 $('#yourLinkId').click(function(e){

By: Raubie

Raubie — Fri, 25 Jun 2010 20:53:36 +0000

Beautiful! And useful.

How (and what) would I change to have this activated from a text link instead of “the big button.”

Apologies if the answer is ‘roll the eyes’ simple.

By: Abdul Rehman

Abdul Rehman — Sun, 06 Jun 2010 23:17:43 +0000

Hi, I have ported the plugin to the Ext Core library: http://www.artalat.com/2010/06/ext-ux-alertbox/

By: iRolf

iRolf — Sun, 06 Jun 2010 15:10:11 +0000

wounderful tut – great script!

unfortunately I’ve to consider IE6 so I added some lines in the beginning of the css-part of your script to fix a IE6 bug:

var pos = ‘fixed’;
if (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
pos = ‘absolute’;
}
this.css({
top : -this.outerHeight(),
marginLeft : -this.outerWidth()/2,
position : pos,
left : ’50%’
});

thank you,
rolf

By: Nikolius

Nikolius — Thu, 03 Jun 2010 15:35:59 +0000

I wonder, is it possible to combine this with jquery validation plugin?

By: edson

edson — Wed, 02 Jun 2010 14:32:02 +0000

Thank you very much…!!!!!!