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>