Changing positionclass for toastr Notification
I am trying to change positionclass for my toast on div click.
positionclass:is not changed to Bottom.? what am i missing here?
and how to use
toastr.optionsOverride = 'positionclass:toast-bottom-full-width';
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<head>
<title></title>
<script type ="text/javascript" src ="@Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
<script type ="text/javascript" src ="@Url.Content("~/Scripts/toastr.js")"></script>
<link rel="stylesheet" type="text/css" href="~/content/toastr.css" />
</head>
<script type="text/javascript">
$(document).ready(function () {
// show when page load
toastr.info('Page Loaded!');
$('#linkButton').click(function () {
toastr.optionsOverride = 'positionclass:toast-bottom-full-width';
// show when the button is clicked
toastr.success('Click Button', 'ButtonClick', 'positionclass:toast-bottom-full-width');
});
});
</script>
<body>
<div id ="linkButton" > click here</div>
</body>
update 1
after debugging i have noticed that below getOptions method from toastr.js is overriding 'positionclass:toast-bottom-full-width' to 'toast-top-right'
function getOptions() {
return $.extend({}, defaults, toastr.options);
}
update 2 Line 140 in toastr.js is not successfully extending m optionsOverride in to options.??
if (typeof (map.optionsOverride) !== 'undefined') {
options = $.extend(options, map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass;
}
update 3 Postion issue has been fixed but I have to mention position class 3 times as below. I am sure there is a less noisy way to achieve this.
$('#linkButton').click(function () {
toastr.optionsOverride = 'positionclass = "toast-bottom-full-width"';
toastr.options.positionClass = 'toast-bottom-full-width';
//show when the button is clicked
toastr.success('Click Button', 'ButtonClick', 'positionclass = "toast-bottom-full-width"');
});
Answer
You can just set it like this, as shown in the toastr demo: http://codeseven.github.io/toastr/ or this demo: http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB
toastr.options = {
"debug": false,
"positionClass": "toast-bottom-full-width",
"onclick": null,
"fadeIn": 300,
"fadeOut": 1000,
"timeOut": 5000,
"extendedTimeOut": 1000
}