https://github.com/hakanersu/AmaranJS

Nice, sleek and stylish notifications.
https://github.com/hakanersu/AmaranJS

css javascript jquery jquery-plugin

Last synced: about 2 months ago
JSON representation

Nice, sleek and stylish notifications.

• Host: GitHub
• URL: https://github.com/hakanersu/AmaranJS
• Owner: hakanersu
• License: mit
• Created: 2014-02-13T16:48:56.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-07-06T11:00:40.000Z (about 5 years ago)
• Last Synced: 2024-07-26T02:26:09.645Z (about 2 months ago)
• Topics: css, javascript, jquery, jquery-plugin
• Language: CoffeeScript
• Homepage: http://amaranjs.com/
• Size: 3.08 MB
• Stars: 213
• Watchers: 16
• Forks: 60
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
AmaranJS jQuery Notification Plugin

============

Nice, sleek and stylish notifications.

[Demo & Documentation](http://www.amaranjs.com/) 

You can check [AmaranJS v.1.0.1](https://github.com/hakanersu/AmaranJS/tree/amaran%40v2), 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](http://daneden.github.io/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 `````` and JavaScript files and initialization code in the footer of your site (before the closing `````` 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

```html

```

You can add jQuery via Google CDN

```html

```

Place Amaran JS after jQuery

```html

```

So minimalistic setup look like this

```html

    My Web Page

    

    
My Content

    

    


```

### Optional Steps

 * Awesome theme uses fontawesome if you want to use  awesome theme you have to include fontawesome.

```html

```

 * If you want to use [Animate.css](http://daneden.github.io/animate.css/) effects you have to include [Animate.css](http://daneden.github.io/animate.css/) . [Animate.css](http://daneden.github.io/animate.css/) already included dist/css folder.

 

```html

```

## Usage

AmaranJS included 4 theme (for now).

Very basic usage ,not include any theme.

```javascript

$(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.

```javascript

$.amaran({

    content:{

        title:'My first funcy example!',

        message:'1.4 GB',

        info:'my_birthday.mp4',

        icon:'fa fa-download'

    },

    theme:'awesome ok'

});

```