Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

AmaranJS jQuery Notification Plugin

Nice, sleek and stylish notifications.

Demo & Documentation

You can check AmaranJS v.1.0.1, with this version amaranjs no longer requires jquery and most of the animations moved to css animations.

What is new and What is changed

  • Blur Theme ,Rounded Theme and Read More theme removed.
  • All javascript codes ported to coffee and css to sass.
  • Animate.css and options added for alternative css3 effects.

Some Features

Here is the some basic features of AmaranJS.But i recommend that review the examples and check demos.

  • Easy notification creation.
  • Unique notification animations.
  • Included stylish themes.
  • Easily adapt your own themes.
  • Callbacks

Installation

Go to dist directory and copy all the folders to a new destination, which will be your project home.

It’s not required, but i recommend placing CSS files in <head> and JavaScript files and initialization code in the footer of your site (before the closing </body> tag).

jQuery required for Amaran JS.If you already have jquery.js on your site, don’t include it a second time, or use jQuery.noConflict(); mode

<link rel="stylesheet" href="/css/amaran.min.css">

You can add jQuery via Google CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Place Amaran JS after jQuery

<script src="/js/jquery.amaran.js"></script>

So minimalistic setup look like this

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="/css/amaran.min.css">
</head>
<body>
    <p>My Content</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/js/jquery.amaran.js"></script>
</body>
</html>

Optional Steps

  • Awesome theme uses fontawesome if you want to use awesome theme you have to include fontawesome.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="/css/animate.min.css">

Usage

AmaranJS included 4 theme (for now).

Very basic usage ,not include any theme.

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

If you want to use included themes , you have to pass content object with desired fields.

Awesome theme usage.

$.amaran({
    content:{
        title:'My first funcy example!',
        message:'1.4 GB',
        info:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'awesome ok'
});
You can’t perform that action at this time.