Toastr notifications not showing on bottom right
I am trying to use Toastr notifications (https://github.com/CodeSeven/toastr). They work fine, but the problem is that they only appear at the top right. I can change anything about the position, but they will always show at the top right. I found a few people with the same problem, but the solutions did not work for me.
Can somebody please check my code, if there is any way of correcting this?
Answer
<html>
<head>
<title>Toastr</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Toastr bottom test</h1>
</div>
<script type="text/javascript">
$(function() {
function Toast(type, css, msg) {
this.type = type;
this.css = css;
this.msg = 'This is positioned in the ' + msg + '. You can also style the icon any way you like.';
}
var toasts = [
new Toast('error', 'toast-bottom-full-width', 'This is positioned in the bottom full width. You can also style the icon any way you like.'),
new Toast('info', 'toast-top-full-width', 'top full width'),
new Toast('warning', 'toast-top-left', 'This is positioned in the top left. You can also style the icon any way you like.'),
new Toast('success', 'toast-top-right', 'top right'),
new Toast('warning', 'toast-bottom-right', 'bottom right'),
new Toast('error', 'toast-bottom-left', 'bottom left')
];
toastr.options.positionClass = 'toast-top-full-width';
toastr.options.extendedTimeOut = 0; //1000;
toastr.options.timeOut = 1000;
toastr.options.fadeOut = 250;
toastr.options.fadeIn = 250;
var i = 0;
delayToasts();
function delayToasts() {
if (i === toasts.length) { return; }
var delay = i === 0 ? 0 : 2100;
window.setTimeout(function () { showToast(); }, delay);
// re-enable the button
if (i === toasts.length-1) {
window.setTimeout(function () {
$('#tryMe').prop('disabled', false);
i = 0;
}, delay + 1000);
}
}
function showToast() {
var t = toasts[i];
toastr.options.positionClass = t.css;
toastr[t.type](t.msg);
i++;
delayToasts();
}
})
</script>
</body>
</html>