Menu
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"'); }); 
609
toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It allows you to create simple toasts with HTML5 and JavaScript like this: Simply include the files in your HTML page and write a simple line of code like this: toastr.
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 } it's a easy simple steps to change the position......see in below..
first declare the position class before showing the message.
EX: toastr.options.positionClass = 'toast-bottom-right';
Then show your message as below:
Command:toastr"success"
Hope it with work well....Thanks
I just used it in my Laravel project.... I will put my code here if you understand it....
<script src="{{ asset('js/toastr.min.js') }}" type="text/javascript"></script> <script type="text/javascript"> @if (Session::has('success')) toastr.options.positionClass = 'toast-bottom-right'; toastr.success("{{ Session::get('success') }}"); @endif </script> toastr notifications
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
