Displaying different jGrowl messages at different positions within the same page
In normal scenario, if you want to display only one jGrowl message in any
part of the web site, you will just do it so by creating the messaging and
specifying the position accordingly as given in this example (i.e. with any of values for positions --> top-left, top-right, bottom-left, bottom-right, center)
eg:
$.jGrowl('This is sticky message which appears on bottom right corner of your website page',
{
sticky: true,
header: 'Simple jGrowl message',
position: 'bottom-right'
});
This displays the simple sticky jGrowl message as expected in 'bottom-right' of page.
However, think about if you want to have one more message displayed; say, in 'top-left' corner; For this, you may try to accomplish this by adding one more similar jGrowl message with position as 'top-left' like one below:
$.jGrowl('This sticky message should appear on top left',
{
sticky: true,
header: 'Simple jGrowl message',
position: 'top-left'
});
But it doesn't work; instead the jGrowl will display this message just below to the first one (kind of attached to it); This is because by default jGrowl displays all of the messages using default container i.e. default <div> section it uses and hence it will group all of your messages together (if you have multiple); with 'close-all' button to close all of these jGrowl messages at a time.
Solution (Custom containers):
To display jGrowl messages at different locations, you would need to create your own custom containers; This is as simple as creating your own HTML '<div>' section any where in your web page with an 'id' value. You can have the '<div> elements any where in <body> section of HTML or webpage code.
Lets create two DIV's for our examples:
<div id="jgrowlMsg1" class="bottom-right"></div>
<div id="jgrowlMsg2" class="top-left"></div>
And now we just say,
$('jgrowlMsg1').jGrowl('This is sticky message which appears on bottom right corner of your website page',
{
sticky: true,
header: 'Simple jGrowl message',
position: 'bottom-right'
});
$('jgrowlMsg2').jGrowl('This sticky message should appear on top left',
{
sticky: true,
header: 'Simple jGrowl message',
position: 'top-left'
});
This will bring up messages in different locations as desired in 'bottom-right' and 'top-left' of the webpage respectively.
No comments:
Post a Comment