Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Close button for sticky toasts? #35

Closed
rderharo opened this Issue · 11 comments

3 participants

@rderharo

I've implemented toastr on a website but I'm finding that more than a few users are confused about how to close the toasts that do not disappear on their own.

I initialize them as such: {timeOut: 0, extendedTimeOut: 0} and while it works fine functionally, it doesn't convey to the user how to dismiss the toast.

So I was wondering if there could also be an option to show a small 'X' close button/text in the top right corner of the toast to help make it obvious that they have to click to close it?

@joeyramone76

I've implemented a solution that by setting options.closeButton=true the tooltip show a default close button. The implementation provide also to pass a jquery button to options.closeButton.
In a few day I try to pull the request

@rderharo

Oh, interesting. I'll keep an eye out for that, thanks!

@joeyramone76

@rderharo I've pulled a request for default close button; see the changes at #36
here the demo: http://joeyramone76.github.com/toastr/

@rderharo

Hey @joeyramone76. I just took a look and it looks good! I guess I just have some comments about it if you're interested...

  1. When the title text is too long, the button gets pushed down to the second line, putting it under the title text and in an odd place.

  2. Also, I noticed that you have the code that makes the toastr sticky if a button is showing. I think that shouldn't be the default behaviour since the intention of the button is to simply imply to the user what they need to do to dismiss a toast if it is already sticky since both non-sticky and sticky toasts can be dismissed with a click anyway.

  3. My original idea was to merely add an image or text ('x') instead of an actual button or link. Is the <a> element merely used to allow support for jQuery buttons? Or is even the default button behaving as a link?

@joeyramone76

Hey @rderharo great feedback!

I solved point 1 (now I always prepend the closeButton to $toastElement) and point 2 (now I don't set the toasrt sticky if close button is required).
For point 3 I not sure to understand your question: now I change the link with span and set title attribute (with jquery) to show the tip when mouseover but you can use only text I suppose.

I'm updated github repos and online demo. Try it and send your feedback

@johnpapa
Owner

I love the ideas, but I don't think we want to add this to the core of toastr. It is more of a customization, IMO, and we want to keep the core features very tight (the library has already doubled in LOC).

However, if there was a simple X button to close that was an option, likely written with CSS, I'd be very open to pulling that in if any of you wants to code that. I'll keep this open for now in case someone wants to give that a go. If not, I'll close it out if there is no interest in it.

@johnpapa johnpapa was assigned
@rderharo

To be honest, a simple CSS based X button was all I was suggesting anyway. If you can leave this open for a bit I can try to take a shot at it myself or if @joeyramone76 wants to modify his code that can work too because I think the only part of his code that becomes more customization based is the jQuery button feature, so if it's brought down to just the button option and a CSS based X button then it might work out.

@joeyramone76

@johnpapa @rderharo I try to code a simple CSS close button solution, in the next days.

@rderharo

Hi @joeyramone76 any luck on the CSS close button solution?

@joeyramone76

@rderharo sorry but I've been busy on a project, but as soon as possible I return to work on the CSS close button

@rderharo

@joeyramone76 Oh alright, no problem. Thanks for the reply.

This was referenced
@craigteegarden craigteegarden referenced this issue from a commit in craigteegarden/toastr
@craigteegarden craigteegarden add a simple css close button, closes #35 1343453
@craigteegarden craigteegarden referenced this issue from a commit in craigteegarden/toastr
@craigteegarden craigteegarden add a simple css close button, closes #35 2b41845
@johnpapa johnpapa closed this issue from a commit
@johnpapa johnpapa closes #35 closes $100
Added Close Button feature:

Optionally enable a close button

    toastr.options.closeButton = true;

Optionally override the close button's HTML.

    toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

You can also override the CSS/LESS for `#toast-container .toast-close-button`
fb34ff9
@johnpapa johnpapa closed this in fb34ff9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.