Asfai/Handy-Notification

A very handy & useful Google+ style notification which comes from the bottom, notifies you & transitions back to the bottom. Can be used as a jQuery plugin as well. Screenshots below!!

Handy-Notification

A very simple, tiny & useful Google+ style notification bar which comes from the bottom, notifies you & transitions back to the bottom. Screenshots below.

If you're reading this on npmjs website, please visit GitHub page for better documentation!!

Quick links

1. Screenshots
2. Requirements
3. Usage with npm or Yarn
4. Usage as a jQuery plugin
5. API

Screenshots

These screenshots are from Instagram-clone I created & you can use the code with 5 simple & straight-forward steps!!

Requirements

1. jQuery

Usage

1. First install the package with npm or Yarn.

npm install handy-notification

or

yarn add handy-notification

2. Create a div with class handy-notify.

<div class='handy-notify'>
    <span></span>
</div>

3. Add below styles to the .handy-notify div in your stylesheet.

.handy-notify{
    position: fixed;
    background: #333;
    left: 2%;
    color: white;
    border-radius: 3px;
    padding: 12px 80px 12px 25px;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
    z-index: 3;
    top: 105%;
}

4. And here comes the fun part.

import Handy from 'handy-notification'
Handy({
    value: "Hello, how are you?",   // Message to be displayed
    action: "https://github.com/yTakkar/Handy-Notification",    // URL when clicked on the notification bar
    done: () => console.log('I notified you & went back to the bottom!')    // function to be executed when you're notified
})

Usage as a jQuery plugin

1. Copy Handy-notify-plugin.js into your project & include it.

<script src="/Handy-notify-plugin.js" ></script>

2. Create a div with class handy-notify.

<div class='handy-notify'>
    <span></span>
</div>

3. Add below styles to the .handy-notify div in your stylesheet.

.handy-notify{
    position: fixed;
    background: #333;
    left: 2%;
    color: white;
    border-radius: 3px;
    padding: 12px 80px 12px 25px;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
    z-index: 3;
    top: 105%;
}

4. And here comes the fun part.

$('.handy-notify').HandyNotify({
    value: "Hello, how are you?",   // Message to be displayed
    action: "https://github.com/yTakkar/Handy-Notification",    // URL when clicked on the notification bar
    done: () => console.log('I notified you & went back to the bottom!')    // function to be executed when we're notified
})

API

Handy(options:Object)
options = {
    beforeTop,
    afterTop,
    value,
    selector,
    action,
    done
}

beforeTop:

Initial top style which keeps the notification bar at the bottom to hide it. Default top style is 105%.

afterTop

Top style where it comes from the bottom & stops to notify you. Default top style is 90%.

value

This will be the message.

selector

Selector we just created (NOTE: Not availabe to jQuery plugins).

action

It's a URL. Responsible to redirect when clicked.

done

It's a function which will be executed when you're notified

Thanks for reading!!