kamranahmedse / jquery-toast-plugin Goto Github PK

If, when creating the toast, hideAfter is set to false and a subsequent call to update specifies a non-false value for hideAfter, the toast will not automatically close after the specified amount.

For example:

var toast = $.toast({
            text: 'doing something',            
            position: 'top-center',
            allowToastClose: false,
            hideAfter: false
});

// do someothing that takes some time

toast.update({
           text: 'done',
           hideAfter: 2000
});

My use case is for saving data. I initially show a "Saving..." message when the save starts, and then I update the message "Save successful" when it completes. The original message should stay up until the latter changes it, however the latter should disappear after a bit.

Hello, many thanks for the nice plugin.

Do we need to add editor conf to specify some rules, eg. trim_trainling_whitespace = true

I would like to load the toast in an html element (div). Is that possible to do?

When on page is more than one toast , parameter 'afterHidden' wrong working. When closing any toast, function 'checkMessage' run with last param.id. Example
for (var ind=0;ind<cnt;ind++) {
var param = fldJson.params[ind] ;
jQuery.toast({
,heading:param.messageTitle
,text:param.messageText
,hideAfter: false
,afterHidden: function () {checkMessage(param.id);} //example: 1,2,3,4
});
}
//when close toast, it will run with same parameter:
checkMessage(1);
checkMessage(1);
checkMessage(1);
checkMessage(1);

Hi,
Is it possible to display the content of a string variable as text in the toast?

var string_variable = "this is my dynamic text";

$.toast({
text : " $('string_variable').val()"
}

greetings

While the other positioniong options retain their position relative to top/bottom and left/right sides the mid/center does not.

Hello,

can you please tag the newest version so the latest changes will be updated within my package.json?
The last update was for having the a11y attributes

Thank you! @kamranahmedse

When using the following code the close icon ends up off the page to the right.

$.toast({
            icon: 'success',
            heading: "Success",
            text: 'Your personal information was updated successfully!',
            position: 'bottom-right',
            hideAfter: 6000
        });

When I try to use the 1.3.2 release of the plugin with IE 8, I get a script error on line 47. The error reported by IE is "Expectred identifier, string or number":

Message: Expected identifier, string or number
Line: 47
Char: 17
Code: 0
URI: https://localdev.webserver.com/assets/js/jquery.toast.js

I suggest using word-break: break-all;or one of the overflow deals.

Is there a possible way to check if the new toast triggering already exists, if so then stop the new one.

Recently trying to use it with TypeScript and RequireJS+Shim ... however there's no Toast.s.ts defiend for it, and it depends on JQuery ... hence trying to get support for this, or I'll try to implement the missing pieces ...

Property 'toast' does not exist on type 'JQueryStatic'.

I have next code:

$.toast({
    text: "Don't forget to star the repository if you like it.", // Text that is to be shown in the toast
    heading: 'Note', // Optional heading to be shown on the toast
    icon: 'warning', // Type of toast icon
    showHideTransition: 'fade', // fade, slide or plain
    allowToastClose: true, // Boolean value true or false
    hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
    stack: 5, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
    position: 'bottom-left', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
    textAlign: 'left',  // Text alignment i.e. left, right or center
    loader: true,  // Whether to show loader or not. True by default
    loaderBg: '#9EC600',  // Background color of the toast loader
    beforeShow: function () {}, // will be triggered before the toast is shown
    afterShown: function () {}, // will be triggered after the toat has been shown
    beforeHide: function () {}, // will be triggered before the toast gets hidden
    afterHidden: function () {}  // will be triggered after the toast has been hidden
});

And i get next error with fancybox3. How fix this?

jquery.fancybox.js:4821 Uncaught TypeError: Cannot read property 'opts' of undefined
    at HTMLDocument.beforeShow.fb (jquery.fancybox.js:4821)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:4)
    at HTMLDivElement.<anonymous> (jquery.min.js:4)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.trigger (jquery.min.js:4)
    at Object.animate (jquery.toast.min.js:1)
    at Object.process (jquery.toast.min.js:1)

I think the installation instructions could be a bit more detailed or at least reference to external resources. For those of us starting out it isn't so clear how to set it up. I've been trying to install it for an hour now with no success. Perhaps a response to this post might suffice as well.

Thanks in advance.

I'm using the toast in a project together with bootstrap. sometimes the toast gets hidden behind form elements on the page. maybe a higher z-index would help?

(I fixed my issue by overwriting the z-index for .jq-toast-wrap )

The position attribute on the call makes it feel like it can be placed at different position. But when I make a call, it seems the first position wins and all future toast are put at the same place.

Is this intentional or a bug?

If intentional, it seems like it would be better served to have a $.toast.init({...}) function.

when i use jquery.toast with Fancybox 3 (https://github.com/fancyapps/fancybox)
is have error msg in console
"undefined is not an object (evaluating 'i.opts')"

debug link: https://codepen.io/bolechen/pen/YxgRvK

Need bower file

Can you please tag the newest version so the latest changes will be updated within my package.json?

Hi there, is it possible to bind a click event on the toast? Would be nice!

Thank you )

Please,

As I can change or translate title of alert?
When I showed a error message, the title is "Danger" but the language of app in portuguese.

I don't know as change it and not found in documentation and examples.
Anyone can help me?

Thanks!

I am using AngularJs and I want to use this toast. But it is working only for the first time, after that when I try to use it, it shows $.toast is not a function.
angular.js:13550 TypeError: $.toast is not a function at showmsg (proofingHome.js:9) at proofingHome.js:280 at angular.js:15961 at n.$eval (angular.js:17229) at n.$digest (angular.js:17045) at n.$apply (angular.js:17337) at l (angular.js:11572) at H (angular.js:11778) at XMLHttpRequest.u.onload (angular.js:11711)

Hi. How can I adjust text size?

Two features I think would make this plugin very useful.

When user places the mouse over the toast notification, the loader (green progressbar) pauses. This will give the user more time to read the messages.
Click anywhere on the body of the notification to close it, not just the X on the top right
thanks.

Remove the close if autoclose active

Hi, exist a way to change de width of a toast ?

If exist, how i can do it ?

Thank´s

Hello I'm a new coder i am using this plugin for form submission whenever the form is submitted the toast appears for a small amount of time and then the page reloads automatically after submit please help
following is my code:
$(document).ready(function(e) {

$("#form").submit(function (e) {

$.toast({
text: "User Registered",
heading: 'Admission Successful',
icon: 'success',
showHideTransition: 'fade',
allowToastClose: true,
hideAfter: false, 
stack: false, 
position: 'mid-center', 
});

});

});

thanks in advance

Hi. Nice job.
Please add this.animate() to update function (line 326) to allow "disappearing" after update.
Rg
Ja(cek)

  update: function(options) {
            this.prepareOptions(options, this.options);
            this.setup();
            this.bindToast();
            this.animate();   // --> requested change
        },

I'd like to add a feature that even if a time out to hide the toast has been set, a hover or touch event will keep it visible for the entire event duration and the countdown will only start after the event has ended. Is this project actively maintained or should I just fork and modify?

When toast is created without icon set to top-right position, it looks perfect but when an icon (success, warning or any other icon) is added some part of the rendered toast goes outside of the window. I have tested this on firefox and chrome.
To reproduce, on demo page: https://kamranahmed.info/toast
Try section 7 "Positioning the toast" with top-right position and it works fine, then try section "Customize Plugin" with position set to top-right given an icon, it looks like this.

Maybe the right thing to do would be setting "right" position to 75px instead of 40px in ".jq-toast-wrap.top-right" and change padding of ".jq-toast-single" to 30px right and left side each. Change would look like this

How to remove it ?

I believe there should be a few inbuilt widths:

• full
• small (default)
• half
• number (this would be a custom amount the user specifies in px) eg 100 or "100px"
• percentage (this would be a custom amount the user specifies in %) eg "100%"

An example:

$.toast({
    heading: 'Testing',
    text: `This is a width test half`,
    width: 'half'
})

$.toast({
    heading: 'Testing',
    text: `This is a width test full`,
    width: 'full'
})```

If I run the below script for more than 4 times, like 5 or 10:
$.toast({ text: 'Set the hideAfter property to false and the toast will become sticky.', hideAfter: false, stack: 4, })
The old one will be replaced by the new one, however, when I close all the 4 toasts, I didn't see the old toasts, should we set them as sticky until clicking the close button?
for example, the latest toast will not replace the previous one, just have a larger z-index, after closing the latest toast, we still can see the previous one.

Hi Kamran,
Thank you for your Plugin, it's very useful to display the Toaster after an AJAX Call to a Web Service.

I have to report to you a conflict with the New Bootstrap 4.2.1 (updated on 21 Dec 2018)

• You use the function toast() and Bootstrap uses the same name
  https://getbootstrap.com/docs/4.2/components/toasts/#methods

$('#element').toast('show');

• I would like to suggest a new release of Jquery Toast Plugin for having the 100% compatibility with Bootstrap 4, just like using $().toaster()
• I'm still using your Plugin in my Web app.
• But probably Bootstrap will release several new implements and features in the next months

Let me know if you need some help.
Thank you for the work, I appreciate it a lot!
Best
Wen-Long (Italy)
@thun88

Is there a option to pause the timer on mouseover the toast? And continue timer when mouseleave?

This is useful feature when you have some clickables options on toast and user needs to choose.

integrate with https://daneden.github.io/animate.css/ would be better 👍

thanks

afterHidden event seems to be raised regardless of whether the toaster was crossed out or not after the timeout. https://github.com/kamranahmedse/jquery-toast-plugin/blob/master/src/jquery.toast.js#L278-L297

$.toast({ text: '<span onclick($("#Clubmembers").tabulator("deselectRow", "1111"))>Smith, Madelyn'})

results in : <span onclick($("#clubmembers").tabulator("deselectrow",="" "1111"))="">Smith, Madelyn</span>

Hello.

I like that this plugin can set several toast positions. But when I set position : 'top-right', the newest toast is shown below the old one, and sometimes the newest toast will overflow the viewport.

I'd suggest prepend option. Currently this plugin always append to $('.jq-toast-wrap'), but if we have an option like prepend: true and have below code, the newest toast can always be shown at top-right in viewport.

if (_options.prepend) {
   _container.prepend( this._toastEl );
} else {
   _container.append( this._toastEl );
}

I'd like to have this feature in this plugin.
Thank you.

hi,
I am trying to implement this plugin in my reactjs project (in the handleSubmit method). However it throws this type error. could you pls tell me what i might be doing wrong ?

I am importing it as import $ from 'jquery'; Do i explicitly have to import jquery-toast-plugin ??