HTML Config as option

[drveresh]

Hi,

Please add a new option "html=true" along with existing ones to render given notification text as HTML, mainly for bold, italic, and other basic and frequently used HTML tags.

Due to this limitation, current we cannot even do anything except passing plain text, and even want to embed a for spinner or loading icon and use it as a notification.

So, there are many use cases to render text as HTML, and I hope you consider this request.

Thanks.

[drveresh]

Though there are some alternatives, it would be nice to achieve this in just one line like:
$.notify("My bold <b>HTML</b> message", {html: true});

[fglueck]

$.notify.defaults({ className: "info", position:"right", style: 'metro', autoHideDelay: 5000});
$.notify({
  title: 'title', text:'<h2 class="red">text</h2>'
})

Works fine for me.

[drveresh]

Thanks, @fglueck, but for some reason, it didn't work for me. Can you please verify it here - https://jsfiddle.net/veeresh/3qywza57/16/ ?

[fglueck]

@drveresh there is no notify-metro loaded in your jsfiddle, so it can't run:

10:47:37.298 Beim Laden von "https://fiddle.jshell.net/veeresh/3qywza57/16/show/?editor_console=" wurde eine ungültige X-Frame-Options-Kopfzeile gefunden: "ALLOWALL" ist keine gültige Direktive.
show
10:47:37.389
TypeError: can't access property "addStyle", $.notify is undefined
notify-metro.js:1:1
10:47:37.398
uncaught exception: Missing style: metro notify.js:457:3

[drveresh]

$.notify.defaults({ className: "info", position:"right", style: 'metro', autoHideDelay: 5000});
$.notify({
  title: 'title', text:'<h2 class="red">text</h2>'
})

Works fine for me.

I tried this, but now everything is empty without text, and below is the HTML when called:

<div class="notifyjs-corner" style="right: 0px; top: 45%;"><div class="notifyjs-wrapper notifyjs-hidable">
	<div class="notifyjs-arrow"></div>
	<div class="notifyjs-container" style=""><div class="notifyjs-bootstrap-base notifyjs-bootstrap-info">
<span data-notify-text=""></span>
</div></div>
</div></div>

[drveresh]

@drveresh there is no notify-metro loaded in your jsfiddle, so it can't run:

10:47:37.298 Beim Laden von "https://fiddle.jshell.net/veeresh/3qywza57/16/show/?editor_console=" wurde eine ungültige X-Frame-Options-Kopfzeile gefunden: "ALLOWALL" ist keine gültige Direktive.
show
10:47:37.389
TypeError: can't access property "addStyle", $.notify is undefined
notify-metro.js:1:1
10:47:37.398
uncaught exception: Missing style: metro notify.js:457:3

It's there already, please double, both metro js and css are added. Here is the rebase version - https://jsfiddle.net/veeresh/3qywza57/

[drveresh]

Even "$.notify('<h2 class="red">text</h2>');" should be working with title or with 'html' option if provided.

[stosef]

Even "$.notify('<h2 class="red">text</h2>');" should be working with title or with 'html' option if provided.

With this code notify.js gets initialized with the default style, which is "bootstrap". The "bootstrap" style does not have the ability to render the content as HTML.

First you need to make sure that the "metro" style is loaded correctly (or any other style that supports HTML content). With the "metro" style loaded $.notify({ title: 'title', text:'<h2 class="red">text</h2>' }) will work.

[drveresh]

@stosef, @fglueck, the fiddle https://jsfiddle.net/veeresh/3qywza57/ now has required libs, but still not working. Can you please clone it and make it work?

Notification with Bold/Italic/Links as part of the messages are very basic use cases and it will be better if it can be enabled by default or with an extra 'html' flag.

[stosef]

There you go, with Metro style: https://jsfiddle.net/stosef/7ghdue5f/
If you want to use the regular Bootstrap style but with HTML instead of text: https://jsfiddle.net/stosef/bfmqyjak/

[drveresh]

Thanks for the fix. My recommendation is to make the HTML message part of the core API itself by default, else we have to get/set the bootstrap class every time on page load.

[rokobuljan]

I created a pull request - seems like an easy addon.

// Use like:
$.notify("Lorem<br><b>Ipsum</b>", {encode: false});