Growl works easy way but not hard way, blockUI

Question

when I use this it works perfectly,

$.growlUI('Growl Notification', 'Have a nice day!');

but when I replace it with this, (it doesn't work)

 $.blockUI({
     message: $('div.growlUI'),
     fadeIn: 700,
     fadeOut: 700,
     timeout: 2000,
     showOverlay: false,
     centerY: false,
     css: {
         width: '350px',
         top: '10px',
         left: '',
         right: '10px',
         border: 'none',
         padding: '5px',
         backgroundColor: '#000',
             '-webkit-border-radius': '10px',
             '-moz-border-radius': '10px',
         opacity: .6,
         color: '#fff'
     }
 });

reason I am trying hard way is because I want to change color of growl, can I add css to $.growlUI(' anyway ?

also if i can add fadeIn: 700, to uigrowl

http://www.malsup.com/jquery/block/#demos

Answer 1

The code you posted works fine, I'm pretty sure you just forgot to add the content of the $('div.growlUI') selector.

Here's a working example: http://jsfiddle.net/xcT4L/

I just added

<div class="growlUI" style="display: none">
    <p>Hello world!</p>
</div>

in the HTML page.

Answer 2

I know this an old question, but you can also simply override $.blockUI.defaults.growlCSS to supply your own styles.

If you want to $.blockUI properties like fadeIn, you can change the $.growlUI definition in jquery.blockUI.js to pass in an opts object, then you can set any properties you want there.

Here's a fiddle to demonstrate this: http://jsfiddle.net/hM3KX/2/