Skip to main content

Toastr - Example (Simple javascript toast notifications)

By

Toastr example 

Toastr is a simple javascript toast notifications. This library requires jQuery enable. Even you can be customized and extended.

Toastr example 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Codesponsors.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
</head>
<body>
<h1>Toaster example - (https://www.codesponsors.com/)
</h1>
<h4>Click on buttons</h4>
<button id="success">Success</button>
<button id="info">Info</button>
<button id="warning">Warning</button>
<button id="error">Error</button>
<br/><br/>
<p><b> Override global options </b></p>
<button id="override">override</button><br/>
<p><b> Immediately remove current toasts without using animation </b></p>
<button id="remove">remove</button><br/>
<p><b> Remove current toasts using animation </b></p>
<button id="clear">clear</button><br/>
<p>You can customize more options. follow this link <a href="https://codeseven.github.io/toastr/demo.html">Toaster</a></p>
<script>
$(document).ready(function() {
$("#success").click(function(){
toastr_call("success","Active","Successfully activated");
});
$("#info").click(function(){
toastr_call("info","Activated","For your Information");
});
$("#warning").click(function(){
toastr_call("warning","Not Activated","Wrong Information");
});
$("#override").click(function(){
override = {"positionClass": "toast-top-left"};
toastr_call("error","Failed","Page not found",override);
});
$("#error").click(function(){
toastr_call("error","Failed","Page not found");
});
$("#remove").click(function(){
toastr.remove();
});
$("#clear").click(function(){
toastr.clear();
});
});
function toastr_call(type,title,msg,override)
{
toastr[type](msg, title,override);
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
}
</script>
</body>
</html>
view raw Toastr-Example.html hosted with ❤ by GitHub
You can customize more options. follow this link Toaster

Labels

Labels:

Comments

Post a Comment

Thank you :)

Popular posts from this blog

Laravel form validations

By
 Laravel Validations: List of types "first_name" => 'required|alpha:ascii|min:3|max:100',// alpha:ascii (only accepts a-z) "middle_name" => 'string', "last_name" => 'required|string', "email" => 'required|email|unique:users,email', "password" => 'required|string|confirmed', "sex" => 'required|string', "phone_no" => 'required|string', "account_type" => 'required|string', "dob" => 'required|date_format:d-m-Y', // date with format "nationality" => 'required|string', "company" => 'required|string', "company_sector" => 'required|string', "company_address" => 'required|string' "bank_account_no" => 'required|min_digits:3|max_digits:5', "role" => 'required|in:admin,editor,viewer', ...
Post a Comment
Read more

Laravel Commands

By
Laravale commands #Check route list php artisan route:list #Check upload files links php artisan storage:link #Check database connected or not php artisan db #Make Request file php artisan make:request YourNameRequest #Make Controller #(In this statement you used -r -> resources and -m -> model. It will create CustomersController and Customers Model files) php artisan make:controller CustomersController -r -m Customers #Make Resource file php artisan make:resource CustomersResource #To check migration files status that those files are running or not with below commands php artisan migrate:status #To check if there is any pending migrate files to run #(also this command shows us the mysql query before running migration file) php artisan migrate --pretend #To make a database table (in this example Products name as taken) php artisan make:migration create_products_table #To create a Request file php artisan make:request StoreProductRequest php artisan make:request Up...
Post a Comment
Read more

React Components

By
React applications are made of   components. What’s a component? A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML and re-render it when some data changes. Take a look at the code below. This code will create and render a new React component: import React from 'react'; import ReactDOM from 'react-dom/client'; function MyComponent() { return <h1>Hello world</h1>; } ReactDOM.createRoot( document.getElementById('app') ).render(<MyComponent />); Import React This creates an object named React, which contains methods necessary to use the React library. React is imported from the 'react' package, which should be installed in your project as a dependency. With the object, we can start utilizing features of the react library! By importing the library, we can use important features such as Hooks, which we’ll explore in detail later. import React from 'react'; ...
Post a Comment
Read more