Question

84

Unable to use HTML content on bootstrap-notify plugin

rated 0 times [ 87] [ 3] / answers: 1 / hits: 6541 / 11 Years ago, tue, february 4, 2014, 12:00:00

I am trying to use bootstrap-notify plugin to display notifications. It can be found at Bootstap-Notify. However I am unable to use html option as per what is specified. If I turn HTML option on the notification comes without any message. I appreciate any help with this.Thanks

Here's the function that displays the message (at a specified time, it works fine, but just with text)

    function notifyMessage(position, messageIn, dd,mm,yyyy,hh,mn)

{

    //add the timestamp to the message

//        var message1 = '<html>Scheduled - '+dd+'/'+mm+'/'+yyyy+' '+hh+':'+mn+'<br>'+ message + '</html>';

    var message1 = '<html>Scheduled - '+ messageIn + '</html>';

    alert (message1.html());

    //hardcoded blackgloss type, this can be made a parameter if required

    var type = 'blackgloss';

    var now = new Date();  

    var millisTillTime = new Date(yyyy, mm-1, dd, hh, mn, 00, 0) - now; //ms till the specified time

    //set millisTillTime to 0 incase its value < 0 (to display expired undisplayed messages)

    if(millisTillTime < 0)

    {

        millisTillTime = 0;

    }

    setTimeout(function()

    {

            $('.' + position).notify({ message: { text: message1}, type: type, fadeOut: {enabled: false}}).show();

    }, millisTillTime);

}

Now, if I change the line message: { text: message1} to message: { html: true, text: message1}, the message goes blank.

My main page is here

<!-- Le styles -->

<link href=css/prettify.css rel=stylesheet>

<link href=../../css/bootstrap.min.css rel=stylesheet>

<link href=css/bootstrap-responsive.min.css rel=stylesheet>



<!-- Notify CSS -->

<link href=css/bootstrap-notify.css rel=stylesheet>



<!-- Custom Styles -->

<link href=css/styles/alert-bangtidy.css rel=stylesheet>

<link href=css/styles/alert-blackgloss.css rel=stylesheet>



</head>

<body>

<div class='notifications top-right'></div>

<div class='notifications bottom-right'></div>

<div class='notifications top-left'></div>

<div class='notifications bottom-left'></div>

<script src=../../javascripts/jquery-1.8.3.js></script>

<script src=js/prettify.js></script>

<script src=js/bootstrap-transition.js></script>

<script src=js/bootstrap-alert.js></script>

<script src=js/bootstrap-notify.js></script>

<? include 'notify.php';?>

</body>

The actual plugin can be found at Bootstap-Notify

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

answered 11 Years ago theo · Accepted Answer

Here it is working: http://jsfiddle.net/HSQE7/

I set the html property to message1

<div class=test></div>

function notifyMessage(position, messageIn, dd,mm,yyyy,hh,mn) {

  //add the timestamp to the message

  var message1 = '<strong style=color: blue>'

      + 'Scheduled - '

      + messageIn

      + '</strong>';

  //hardcoded blackgloss type, this can be made a parameter if required

  var type = 'blackgloss';

  var now = new Date();  

  var millisTillTime = new Date(yyyy, mm-1, dd, hh, mn, 00, 0) - now; //ms till the specified time

  //set millisTillTime to 0 incase its value < 0 (to display expired undisplayed messages)

  if(millisTillTime < 0) millisTillTime = 0;

  setTimeout(function(){

    $('.' + position).notify({ message: { html: message1}, type: type, fadeOut: {enabled: false}}).show();

  }, millisTillTime);

}



notifyMessage('test', 'hello', 3, 2, 2014, 11, 53);