NOTIFICATIONS

Notification Types

Show Default Show Info Show Info Show Info Show Info

<!--
	data-position:
		top-right
		top-left
		top-center
		top-full-width
		bottom-right
		bottom-left
		bottom-center
		bottom-full-width

	data-notifyType:
		primary
		info
		error
		sucess
		warning

	data-message="your text here"
	data-progressBar="true"
	data-closeButton="true"
	data-newestOnTop="true"
	data-preventDuplicates="true"
	data-showDuration="300"
	data-hideDuration="1000"
	data-timeOut="5000"
	data-extendedTimeOut="1000"
	data-showEasing="swing"
	data-hideEasing="linear"
	data-showMethod="fadeIn"
	data-hideMethod="fadeOut"
-->


<!-- Default -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-position="top-right" data-notifyType="primary" data-message="Default Notification!">Show Default</a>

<!-- Info -->
<a href="#" class="btn btn-info toastr-notify" data-progressBar="true" data-position="top-right" data-notifyType="info" data-message="Info Notification!">Show Info</a>

<!-- Error -->
<a href="#" class="btn btn-danger toastr-notify" data-progressBar="true" data-position="top-right" data-notifyType="error" data-message="Error! Please try again!">Show Error</a>

<!-- Success -->
<a href="#" class="btn btn-success toastr-notify" data-progressBar="true" data-position="top-right" data-notifyType="success" data-message="Successfully Saved!">Show Success</a>

<!-- Warning -->
<a href="#" class="btn btn-warning toastr-notify" data-progressBar="true" data-position="top-right" data-notifyType="warning" data-message="Warning message!">Show Warning</a>



<!-- JAVASCRIPT USAGE (after scripts.js) -->
_toastr("I am a test message","top-right","error",false);

Use 'false' if you do not need a clickable notification.
Use link for clickable notification. Example: "http://www.stepofweb.com"

Notification Position

Top Right Top Left Bottom Right Bottom Left

Top Center Bottom Center Top Full Width Bottom Full Width

Note: Please, wait for the current notification to dissapear before clicking a new button!

<!--
	data-position:
		top-right
		top-left
		top-center
		top-full-width
		bottom-right
		bottom-left
		bottom-center
		bottom-full-width

	data-notifyType:
		primary
		info
		error
		sucess
		warning

	data-message="your text here"
	data-progressBar="true"
	data-closeButton="true"
	data-newestOnTop="true"
	data-preventDuplicates="true"
	data-showDuration="300"
	data-hideDuration="1000"
	data-timeOut="5000"
	data-extendedTimeOut="1000"
	data-showEasing="swing"
	data-hideEasing="linear"
	data-showMethod="fadeIn"
	data-hideMethod="fadeOut"
-->


<!-- Top Right -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="top-right" data-message="Top Right Notification">Top Right</a>

<!-- Top Left -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="top-left" data-message="Top Left Notification">Top Left</a>

<!-- Bottom Right -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="bottom-right" data-message="Bottom Right Notification">Bottom Right</a>

<!-- Bottom Left -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="bottom-left" data-message="Bottom Left Notification">Bottom Left</a>

<!-- Top Center -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="top-center" data-message="Top Center Notification">Top Center</a>

<!-- Bottom Center -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="bottom-center" data-message="Bottom Center Notification">Bottom Center</a>

<!-- Top Full Width -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="top-full-width" data-message="Top Full Width Notification">Top Full Width</a>

<!-- Bottom Full Width -->
<a href="#" class="btn btn-default toastr-notify" data-progressBar="true" data-timeOut="3000" data-notifyType="primary" data-position="bottom-full-width" data-message="Bottom Full Width Notification">Bottom Full Width</a>