How to configure the progressiBar property in the plugin toastr?

Asked

Viewed 35 times

2

I’m wearing this plugin to show messages , but I’m not able to do it.

 <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <title>toastr examples</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
            </script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js"></script>
        </head>

        <body class="container">
            <h1>yes</h1>
            <script>

                toastr.info('Are you the 6 fingered man?', "Hey", { timeOut: 4000, progressBar: true });
                console.log(toastr);
            </script>
        </body>

        </html>

I tried it like this, but it didn’t work:

 toastr.info('Are you the 6 fingered man?', "Hey", { timeOut: 4000, progressBar: true });

But so just for the timeout works perfectly.

 toastr.info('Are you the 6 fingered man?', "Hey", { timeOut: 4000 });

Where can I find a tutorial on this? Where I got in the code above?

javascript plugin

1 answer

1


I don’t know exactly why, but I believe that the CDN reference is outdated, I am also using version 3.x and not 2.x of jQuery and it worked...

inserir a descrição da imagem aqui

Test the code below to see working

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

</head>
<body>

	<p>YES</p>
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

	<script>
	toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {
          "timeOut": 4000, 
          "progressBar": true
        })
	</script>

</body>
</html>

  • 1

    I copied and pasted your code and used version 1 and 2 of jquery and it also worked.

  • 1

    @Penapintada then is problem with the same CDN, the link I found was straight from their example, and not what was in the rss documentation. It has the indexing order tbm... I put the . js at the end of the document, I don’t know if it has to do with this case

Browser other questions tagged javascript plugin

You are not signed in. Login or sign up in order to post.