jquery jgrowl position

Question

If in jgrowl.css the position is changed to 'center', how do I override this to default i.e, 'top-right'

$.jGrowl(data, { 
     header: 'data',
     animateOpen: { height: 'show'}, 
     life: 10000,
     position:'top-right'
});

Currently, Position doesn't work right now in the above

Thanks..

Answer 1

According to the jGrowl Options documentation for the position option

Designates a class which is applied to the jGrowl container and controls it's position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called.

To do this, you'll have something like

    <script type="text/javascript">
           $.jGrowl.defaults.position = 'top-right';
    </script>

Then you can make your call as above and omit the position setting. Judging from the jGrowl docs, you HAVE to set the position by default and my quick tests confirmed that setting the position in your $.jGrowl(...) call, has no effect.

Hope that helps

Answer 2

If you want different notifications located in different positions you will need to create separate notification containers.

Furthermore, if you have separate containers you will also need to use the selector form of calling jGrowl, rather then the short-hand wrapper.

ie. $('#my-container').jGrowl('my notification...');