Amaran JS - Create stylish notifications

Amaran JS is a jQuery notification plugin to display website messages in animated and highly customizable flyout notification boxes. It sets with postions, effects, Themes.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: hakanersu.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="amaran/css/jquery.amaran.min.css">
<link rel="stylesheet" href="amaran/css/themes/all-themes.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="amaran/js/jquery.amaran.js"></script>

2. JAVASCRIPT

$(function(){
    $.amaran({'message':'My first example!'});
});

3. OPTIONS

Position

Default : position:'bottom right'

Usage : position:'< vertical position > < horizontal position >'

Example : 
position:'bottom right' 
position:'bottom left' 
position:'top left' 
position:'top right' 
Special for metro themeposition:'center center'

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    position:'top left'
});

In Effect

Default : inEffect:fadeIn

Options : 
inEffect:fadeIn
inEffect:slideLeft
inEffect:slideRight
inEffect:slideTop
inEffect:slideBottom

Notifications appear effect

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    inEffect:'slideRight'
});

Out Effect

Default : inEffect:fadeOut

Options : 
outEffect:fadeOut
outEffect:slideLeft
outEffect:slideRight
outEffect:slideTop
outEffect:slideBottom

Notifications appear effect

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    outEffect:'slideRight'
});

delay

Default : delay:3000

Default auto hide time is 3 seconds you can specify auto hide time with delay option.

delay : <milisecond>

Example

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    delay:10000
});

sticky

Default : sticky:false

Notifications remain on screen.

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    sticky:true
});

Close on Click

Default : closeOnClick:true

You can close notifications by clicking on them.

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    closeOnClick:false
});

Close Button

Default : closeButton:false

You can add close button to notifications.

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    closeButton:true
});

Clear All

Default : clearAll:false

Clear all notifications on screen before create new one.

$.amaran({
    content:{
        message:'Your Download is Ready!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok',
    clearAll:true
});