Displaying jGrowl message at custom location

Displaying jGrowl message at a custom location:

If you are displaying jGrowl messages in your website, there are five default placement options available for you; 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>

However, jGrowl does not let you directly specify your own positioning of message in web page. 

Solution Approach: Add your own position in the jGrowl CSS file:

To do this, you will have to add one CSS position entry or override any of the default CSS definitions provided by jGrowl in 'jquery.jgrowl.css' file like shown below:

 div.jGrowl.YourDisplayArea {

position: absolute;

left: 3%;

top: 20%;

}

Similarly, you could also position with respect to 'right', 'bottom' attributes available in CSS.

And you can use the new position in your jGrowl messages which will bring up the message in the location as you desired.

$.jGrowl("sample JGrowl message displayed in 'YourDisplayArea '",

{

sticky: true,

position: 'YourDisplayArea'

});