toastr
Simple javascript toast notifications <a href="http://johnpapa.net">http://johnpapa.net</a>
Toastr by CodeSeven
I have been trying to find a pure notification JavaScript library. All the ones I have found are using jQuery (toastr, notifer, notify for example). Unfortunately, I can't use jQuery in my code.
Does any of you know of any notification library in JavaScript that does not rely on jQuery? It does not have to do anything complicated: title, text, fade-in, fade-out, and to be able to "move" with a page scroll.
Source: (StackOverflow)
I've been playing with toastr and have successfully set the timeout to 0 so the toast remains sticky, however the toast disappears when I mouse out of the toast. I'd like to override this so the toast only goes away if the user clicks it - ideal for toasts with lots of text. How can this be done?
Source: (StackOverflow)
I am looking at pines notify(http://pines.sourceforge.net/pnotify/) and it looks good but it seems to have little actual documentation so I am wondering is there anything more established and worked on out there?
Like I don't want to spend time trying to figure out how to use pines and then find out it is missing some feature that I needed a few months later that I needed to change to a different plugin.
This happened to me with tablesorter 2.0 I was using it then I needed the filtering but theirs kinda sucked so I found datatables what had such a bigger api and developed more.
So I am wondering if there is something like datatables(in terms of development and features) just for notifications instead.
Edit
So I am looking at jgrowl and kinda confused with how to use the theme roller with it.
So I took once of the example files and stripped it down with everything I thought was junk.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>jGrowl meet Twitter</title>
<link rel="stylesheet" rel='nofollow' href="../jquery.jgrowl.css" type="text/css"/>
<link type="text/css" rel='nofollow' href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript">
$(function(){
$('.ui-state-default').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
)
.mousedown(function(){$(this).addClass('ui-state-active');})
.mouseup(function(){$(this).removeClass('ui-state-active');})
.mouseout(function(){$(this).removeClass('ui-state-active');});
});
</script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// This value can be true, false or a function to be used as a callback when the closer is clciked
$.jGrowl.defaults.closer = function() {
console.log("Closing everything!", this);
};
$.jGrowl("Sticky notification with a header",
{
header: 'A Header',
sticky: true,
});
});
</script>
</head>
<body>
<div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-widget-header ui-corner-top">
<h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
</div>
</div>
</body>
</html>
I don't understand what this is for
<script type="text/javascript">
$(function(){
$('.ui-state-default').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
)
.mousedown(function(){$(this).addClass('ui-state-active');})
.mouseup(function(){$(this).removeClass('ui-state-active');})
.mouseout(function(){$(this).removeClass('ui-state-active');});
});
</script>
It seems to have nothing to do with applying the themes. I took it away and the theme was still applied. Also if you look at my jgrow
$.jGrowl("Sticky notification with a header",
{
header: 'A Header',
sticky: true,
});
I make no mention of theme yet it still some how used the theme. Why is it taking the theme?
Source: (StackOverflow)
Is there any way to change it? I tried defining the toastClass as a class with opacity set to 1, but saw no changes:
.toast-style{
opacity: 1;
}
toastr.options.toastClass = 'toast-style';
Source: (StackOverflow)
I am trying to display a toastr message (info,error etc) after submitting a form using a button and update a gridview control (which is in a update panel" in asp.net webform. Thanks
Source: (StackOverflow)
Is the popup library toastr not going to work with Ember because of direct dom manipulation that ember doesn't like?
Are there any other libraries like this one that work nicely with ember?
Edit
Even through the working example posted below I could not get this to work locally. I finally used Pine Notify which worked straight away.
Source: (StackOverflow)
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" rel='nofollow' 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"');
});
Source: (StackOverflow)
I am trying to use toastr js in SharePoint 2013 to show notifications. Everything looks great until I add closebutton:true in toastr option. Close button appears though the alignment gets distorted for the title, message and the close button. Any idea what is going wrong with the implementation?
With closed button
without closed button
Source: (StackOverflow)
Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(@opacity) {
@opacityPercent: 100; // instead of @opacity * 100;
opacity: 1; // instead of @opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
filter: ~"alpha(opacity=@{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Source: (StackOverflow)
I'm trying to find a way to use Toastr to display errors to users as Exceptions or Errors occur within my application. The problems I'm running into seem to suggest that it would not be possible to have an exception that occurs in the Controller, or Data Access layer displayed in the current view using Toastr.
I'm wondering if any of you have run into this scenario and what your solution to it was?
What I'm trying to accomplish is that any time there is an unhandled exception, or someone handles an exception manually that we have the ability to display the error to the user without disrupting workflow. Toastr was suggested to me, but being completely javascript I'm not sure the best way to implement it within my MVC4 application.
One option I'm exploring is setting up my default index controller to handle an incoming error string so that I can redirect to it from the Application_Error method in the Global.asax.cs in order to give a friendly redirect, and then if that incoming string is not null then I can use toastr on the Index view. However this is not ideal because it requires a redirect, and disrupts workflow. Also it will not allow for me to display an error without having to thrown an exception or do all my error handling within the javascript.
Other important information is that we are using Telerik Kendo UI, and Razor Syntax if that would help me in any way.
Source: (StackOverflow)
I was just using toastrjs for a few notifications, and I ran into this little problem. Ideally, when you import a library in nodejs, you have to make an import statement, like so:
import http = require("http");
However, when I tried this with toastr, I get an error, even after including the reference path. So, something like this:
///<reference path='toastr.d.ts' />
import toastr = require("./toastr");
I get this error:
error TS2071: Unable to resolve external module '"./toastr.js"'.
error TS2072: Module cannot be aliased to a non-module type.
How is toastr different from a regular node module like http?
Update 1
I tried to do the same thing with jQuery but I have the same problems, does this mean that this does not work with frameworks that are designed to be client-side?
Source: (StackOverflow)
I received this message on how to react when a toast is clicked, so I decide to post it here for everyone/
When the user clicks on a 'toast' i don't always want the message to disappear, but depending on the kind of message i want to:
disappear
redirect the user to a different page (x es /meetings/210)
show a jquery dialog (x es showing the sms received)
Using the basic click event i'm unable to detect the toast i've clicked.
The only workaround i found was to add a link in the toast and do a redirect when the user click on it.
So what i'm asking is a way to get the current toast the user clicks, by using the basic click event (but this may require some more work hiding data in the toast to recover it when clicked to understand what to do), or by adding to the function that creates a toast an optional callback to a function when clicked, something like this:
toastr.error(
'body text',
'header text',
click: function() {
console.log('you clicked on the error toaster')
}
);
Thank you for a very nice library.
Source: (StackOverflow)
I am wanting to swap from Bootstrap alerts to Toastr alerts. My current working set up is:
@if (Session::has('flash_notification.message'))
<div class="alert alert-{{ Session::get('flash_notification.level') }}">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">×</button>
{{ Session::get('flash_notification.message') }}
</div>
@endif
But I'm now struggling on accessing Laravel's session variables within JS.
The actual JS working example is:
$(document).ready(function() {
toastr.info('Page Loaded!');
});
});
But, I want to use Laravel's session variables to include different messages and warning boxes:
@if (Session::has('flash_notification.message'))
<script>
$(document).ready(function() {
toastr.options.timeOut = 4000;
toastr.{{ Session::get('flash_notification.level') }}('{{ Session::get('flash_notification.message) }}');
});
</script>
@endif
I'm getting various errors such as unexpected ;. Any help would be hugely appreciated. Many thanks.
Source: (StackOverflow)
I have this sample html file. Here I am using angular-toast notification. Issue I am facing here is toast messages always appear on the top-right position.
script.js file contains
angular.module('main', ['ngAnimate', 'toaster']).controller('myController', function($scope,toaster, $window) {
$scope.pop = function(){
toaster.pop('success', "title", 'message');
};
$scope.clear = function(){
toaster.clear();
};
});
Please find the plunker link http://plnkr.co/edit/pzuW5OVkoxLF7zl0mGaC?p=preview
Thanks in advance
Source: (StackOverflow)
I want to display notifications whenever a user click on the "Add to Cart" button using the Toastr plugin. Basically, when a user click on the button, it executes the action "AddToCart" then redirects to the index page. When the page shows up, it checks the TempData value, then shows the notification.
This is the controller:
public ActionResult AddToCart(int id)
{
TempData["message"] = "Added";
return RedirectToAction("Index");
}
and the view:
@if (TempData["message"] != null)
{
<script type="text/javascript">
$(document).ready(function () {
toastr.success('Added')
})
</script>
}
Update
it worked according to @Exception's answer. However, if I use ajax such as:
@Ajax.ActionLink("Add to cart", "AddToCart", "Home", new { id = item.ProductId }, new AjaxOptions { UpdateTargetId="abc"})
it doesnt work. That may be because of the line:
$(document).ready(function ()
as the page is not reloaded.
How can I fix it?
But this doesnt work.
Please help. Thanks in advance!
Source: (StackOverflow)