hakanersu / amaranjs Goto Github PK

View Code? Open in Web Editor NEW

213.0 16.0 60.0 3.15 MB

Nice, sleek and stylish notifications.

Home Page: http://amaranjs.com/

License: MIT License

JavaScript 6.10% CSS 26.06% CoffeeScript 67.83%

css jquery javascript jquery-plugin

amaranjs's Introduction

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">

If you want to use Animate.css effects you have to include Animate.css . Animate.css already included dist/css folder.

<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'
});

amaranjs's People

Contributors

Stargazers

Watchers

Forkers

togazi krrrishh marviljoy yashilanka renamathai gclove taoman89 akhbar juanpfcruzx webds hznoob halisyilboga girraj111 sonukry suayipekmekci tobium rguedes ganinaleksei weaver-viii anfgr roverok andygoio jadearama loopwang abada salvadorjusaino widihastomo starise quietdog lacendi quentinvaut waheedsabir raihan004 ravishakya jollobajano thk9 kounelios13 savspit yuen1318 sangkyunyoon kazimolmez snugbuilder rcv-legado republicvirgo xurryali slavasavul zoyo akenoq luhla anbang clementdarine xqbasin jaimeabs calebpower rafaelfischer faustfizz nathan-jolivat ecomhazza sajidali-tx danielkingsley

amaranjs's Issues

added callback functionality

I needed to call a specific function to your notification plugin so I added this code to createElements

            if (this.config.clickfunct){
                var bu = this;
                $(element).on('click',function(){
                    bu.config.clickfunct();
                });
            }

then pass the function in with the options

apprve_opts.clickfunct = function(){ window.location = "/memberusers/useradmin"; };
$.amaran(apprve_opts);

be nice if this was or something like it was added to the next release.

Thanks for all you do.
Jeff

Are you planning to add background overlay effect?

The "afterEnd" callback is not called when using "fade" effect

You can try it on your demo page: http://hakanersu.github.io/AmaranJS/

I toke a look in the source code and saw that the afterEnd callback is only called when using "slide" effect but not when using "fade" effect...

Adding "Center Center" position option

Is there any way the notification can be positioned at center of screen?

Как запустить по нажатию кнопки?

Не работать

Button or link

Hi, is this possible to have a clickable link into the box?

Feature for local vs global positioning?

Thank you for sharing the good work.

Just wondering if it would be possible to include element specific notifications (like this one at http://notifyjs.com/ does).

For example, when specified something like $(".textbox").amaran() the notification would be displayed relative to that textbox, which would be great way to show errors and all for inputs.

It is possible to give custom color to 'default-spinner'

Hi..
I need to some solution for use this library in my project.
Is there any way to changed 'default-spinner' circle color?

I ask it because currently it is only display green("#27ae60") color.
I need display 'default-spinner' circle in different color according to status like following:

'SUCCESS' : GREEN COLOR
'WARNING': YELLOW COLOR
'INFO': BLUE COLOR
'ERROR': RED COLOR

So, It is possible to give custom color to 'default-spinner'?

Add to npm repository plz :)

How to customize the close x button in custom theme

My custom theme has slightly light (white) background and as such the close button (the small x button on the top right corner) is not visible.

How to customize its appearance? Would like to change its color to something dark.

way to clear all notifications without showing a new one?

Hi,

Is there a way to clear all currently showing notifcations?

Thanks

Mark

How to get smooth "shift up/down" animation?

Thanks for sharing this good work. The entry and exit animations are good.

But, when multiple notifications are to be displayed the way old items move up/down to give place to new ones is not at all smooth.

It would be great if old items move "smoothly" up / down. (Is there any option to control their animation behavior also, just like entry and exit animation?)

issues getting started

Hi,

Looks like a cool library, but having trouble getting it going. The docs should be updated to reflect:

-folder name is 'theme' not 'themes'
-there is no 'jquery.amaran.min.css' file
-you may wish to leave off 'http:' for the hrefs in case users are working in an http environment
-all-themes has an http: import which will not work in an https environment

With the master branch:
-when I tried doing the example notification, it didn't look proper with the default css
-when I tried doing the awesome theme, I got a green circle for the icon

Going to give the new branch a try I guess - I just need to figure out why I'm getting the green circle instead of whatever icon I specify. ie. icon: 'fa fa-download'

I'll post back with what I see from the new branch.

Thanks

Mark

not working

Just implemented your code and i have issues with it. Take a look, maybe you can give me a clue as what I'm doing wrong. http://electricianwebsite.net/index-test.html

What is the new page for Demo and Documentation?

I tried to access the demo and documentation at http://hakanersu.github.io/AmaranJS/, but was redirected to http://ersu.me/cgi-sys/suspendedpage.cgi which says:

This Account has been suspended.
Contact your hosting provider for more information.

Could you please provide us with the link to the new page where the Demo and Documentation has migrated to in the README.md. I was unable to find it online. Seems like a recent issue.

Ability to call the close function via the ClickHandler

Would love to have the ability to call the closing function via any of the handlers.

this.close()

Which would close the popup the exact same way it is being dismissed with following options already set.

Overlay and sticky button not working

Hello, first thing thank you very much for your plugin, its very good!
Im trying to use the overlay option and its not working
my amaran function:

function overlayingMsg() {
    $.amaran({
        'message'   :'My first example!',
        'overlay' :true,
        'sticky':true,
        'inEffect':'slideTop',
        'outEffect':'slideLeft',
        'overlayColor': 'orange'
    });
};

my application of the function:

<button type="button" class="btn btn-success btn-lg" style="margin: 10px" 
onclick="overlayingMsg()">Show overlaying message</button>
<script src="../assets/javascripts/data/alerts/amaran/overlayingMsg.js"></script>

I'm using jquery 2.2.4
same thing happens with the stickyButton option.

thanks in advance

How to prevent message from disappearing while mouse is on it?

Messages are automatically disappearing after sometime, which is great.

But, I would like to keep the message there if user hovers his mouse on it (perhaps, he is examining the message content).

The use case is like this:
1. By default, messages should disappear after some time as usual, if user does nothing about them
2. However, if user hovers the mouse on it (then he may want to select and copy the content of the message with mouse), then the message should become sticky that gets close only upon click of the x button.

How to achieve this. One way is:

this library can have a new option something like "no autoclose on hover" that when set to true, changes it behavior to be "sticky=true, closeOnClick=false, closeButton=true" automatically whenever mouse hovers on any message.

The otherway is, to reset and renew the timer to be some configurable value user passes on, like this one does here: http://codeseven.github.io/toastr/demo.html
Select the "progressbar" option and hover the mouse on the message - it renews the timer.

i call a function onclick then show amaran notification then this errors occurs

jquery.amaran.min.js:1` Uncaught TypeError: Cannot read property 'top' of undefined

at o.getInfo (jquery.amaran.min.js:1)
at o.getPosition (jquery.amaran.min.js:1)
at o.slide (jquery.amaran.min.js:1)
at o.animation (jquery.amaran.min.js:1)
at o.close (jquery.amaran.min.js:1)
at new o (jquery.amaran.min.js:1)
at Function.t.amaran (jquery.amaran.min.js:1)
at showToast (tikman.js:56)
at Object.success (<anonymous>:34:1)
at u (jquery.min.js:2)

getInfo @ jquery.amaran.min.js:1
getPosition @ jquery.amaran.min.js:1
slide @ jquery.amaran.min.js:1
animation @ jquery.amaran.min.js:1
close @ jquery.amaran.min.js:1
o @ jquery.amaran.min.js:1
t.amaran @ jquery.amaran.min.js:1
showToast @ tikman.js:56
success @ VM2364:34
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
tryToConnect @ VM2364:28
onclick @ (index):1
jquery.min.js:2

check image:
https://ibb.co/xGL1dpZ

Close() method is not called

The close() method is not called - so the "

" element stays in DOM...

Size changing for all messages instead of just one

I am using a "css font size animation' to increase the size of the font (so that it becomes more readable on large screens) when user hovers mouse on any message.

.amaran:hover {
  font-size: 150%; /*Zoom the text size for readability on mouse hover*/
}

It works great and font size increases when mouse is hovered, and goes back to normal when mouse leaves. As a side effect this is changing the size of the "container div width and height" to accommodate for the increase, which is fine.

But the problem is, this is changing the size of all message containers as seen in the below images.
I would expect only the particular one which has large-font to also increase its width - but at present all messages are increasing their width (irrespective of their font size)

CDN

Is this package available on any CDN?

I am planning to use this (the theme capability is good feature) - but downloading and maintaining local copies would be problematic. Hence hesitating.

Wondering if this could be made available on any CDN (e.g., https://github.com/cdnjs/cdnjs ) so that more people can get access to it and easy to maintain.

How to copy the alert / error messages displayed?

I am not able to see a way to copy the error messages displays using this package. Any click on the displayed message removes it from screen.

When displaying errors, it is important that users can copy | paste the error message displayed in the alert (so that they can communicate it with admin / support later regarding the problem) - but right now, they just disappear once the user clicks on them.

I was hoping that with the 'close button' option or 'sticky' option, the message would go away only when clicked on the close button - but doesn't seem to be so. Clicking anywhere, no matter with or without close button - removes the message.

How to make it work that only when clicked on the 'close button' (the small x button on top right) it would go away, otherwise it would stay?

Link for notification

Hello I found this plugins very interesting but the one thing I need in it is a link for each notification. When the notification is clicked, redirect to the given url.

Bug clearAll : true

I've discover your plugin, and directly, first bug.

when we call in first time $.amaran() for one notification with option 'overlay' :true, and then, in second time we call $.amaran() with 'clearAll' :true, all previous notif removed but not the overlay...

     $.amaran({
            'theme'     :'colorful',
            'overlay' :true,
            'sticky':true,
            'content'   :{
               bgcolor:'#199be9',
               color:'#fff',
               message: 'Loading ...'
            },
            'position'  :'bottom right',
            'outEffect' :'slideRight'
        });

        setTimeout(function(){
            $.amaran({
                'message'       :'My first example!',
                'clearAll'      :true
            });     
        },3000);

Wrong argument names

For the awesome theme, arguments should not be called message, file, size but instead: title, content, hint

Your hosting account is, uhm, suspended.

Your hosting account is, uhm, suspended. Docs, etc, were on there…