tellme.js

A full featured, lightweight javascript browser alert display library.

Introduction

A full featured, lightweight javascript browser alert display library. These browser alerts / notifications are fully customizable on a global or on a per notification basis.

Installation

Downloading and using tellme.js is a charm. Simply visit https://github.com/shaktiphartiyal/tellmejs and click Clone or Download, click on Download Zip. Extract the tellme.min.js and tellme.min.css and copy to your project folder.

Include into the <head> section of your web page the extracted files like:


    <link rel="stylesheet" href="tellme.min.css" type="text/css">
    <script src="tellme.min.js" type="text/javascript"></script>

That’s all you need to start using tellme.js

Basic Usage

Four types of alerts are available in tellme.js:

  • success
  • error
  • warning
  • informative
    • Success Alert
    tellme.success(message,options);
    Error Alert
    tellme.error(message,options);
    Informative Alert
    tellme.info(message,options);
    Warning Alert
    tellme.warn(message,options);

    Parameter Reference:

    message
    Optional - The message you want to display.
    Default value - Warning / Error / Information / Success
    options
    Optional - Alert Options / timeout . Accepts timeout(number) in seconds (the fadeout time). Pass 0 for sticky alert. You can also pass a configuration object in this parameter.

    Advanced Configuration

    You can configure tellme.js alerts globally or on a per alert basis.

    Global Configuration:

    You can globally configure tellme.js for the page by using the following function before calling any alert of tellme.js. 

    tellme.config(configObject);

    Per alert Configuration:

    You can set configurationof every tellme.js alert using the second parameter(options) of the alert call like the example given below: 

    tellme.error(message,configObject);

    configObject
    
    errorClass: "tm_alert-danger",
    successClass: "tm_alert-success",
    infoClass: "tm_alert-info",
    warnClass: "tm_alert-warn",
    errorSymbol: "tm_tm-error",
    successSymbol: "tm_tm-success",
    infoSymbol: "tm_tm-info",
    warnSymbol: "tm_tm-warn",
    errorDisplayTimeout:5,
    successDisplayTimeout:5,
    infoDisplayTimeout:5,
    warnDisplayTimeout:5,
    alertClass:"tm_alertMsg",
    subAlertClass:"tm_alert",
    progressClass:"tm_alert_progress",
    position:"top-right",
    open:function(){},
    close:function(){}

    passing these options in alert calls: 

    
    tellme.config({
        errorClass: "tm_alert-danger",
        successClass: "tm_alert-success",
        infoClass: "tm_alert-info",
        warnClass: "tm_alert-warn",
        errorSymbol: "tm_tm-error",
        successSymbol: "tm_tm-success",
        infoSymbol: "tm_tm-info",
        warnSymbol: "tm_tm-warn",
        errorDisplayTimeout:5,
        successDisplayTimeout:5,
        infoDisplayTimeout:5,
        warnDisplayTimeout:5,
        alertClass:"tm_alertMsg",
        subAlertClass:"tm_alert",
        progressClass:"tm_alert_progress",
        position:"top-right",
        open:function(){},
        close:function(){}
    });
    -----------------OR----------------------
    tellme.error("An error occured",{
        errorClass: "tm_alert-danger",
        successClass: "tm_alert-success",
        infoClass: "tm_alert-info",
        warnClass: "tm_alert-warn",
        errorSymbol: "tm_tm-error",
        successSymbol: "tm_tm-success",
        infoSymbol: "tm_tm-info",
        warnSymbol: "tm_tm-warn",
        errorDisplayTimeout:5,
        successDisplayTimeout:5,
        infoDisplayTimeout:5,
        warnDisplayTimeout:5,
        alertClass:"tm_alertMsg",
        subAlertClass:"tm_alert",
        progressClass:"tm_alert_progress",
        position:"top-right",
        open:function(){},
        close:function(){}
    });

    Callbacks

    Callback functions can be invoked on the alert display start or at the alert display close.
  • open callback:
                        
        tellme.info("Welcome to tellme.js, it's good to see you here !",{
            infoDisplayTimeout:2,
            position:"top-center",
            open:function(){
                 //something you want to do when the alert opens
            }
        });
  • close callback:
                        
        tellme.info("Welcome to tellme.js, it's good to see you here !",{
            infoDisplayTimeout:2,
            position:"top-center",
            close:function(){
                 //something you want to do when the alert closes
            }
        });

    • Events

    There are two types of events associated with tellme.js alerts:
  • Alert show / started event - tellmeStart
  • Alert closed / hide event - tellmeClosed
    • These events are fired when an alert is opened or closed respectively. You can listen to these events using the following listeners:
    The open Event Listener:
                    
            document.addEventListener('tellmeStart', function(e){
                console.info(e); //or do something useful here
            }, false);
    The closed event listener:
                    
            document.addEventListener('tellmeClosed', function(e){
                console.info(e); //or do something useful here
            }, false);
    More information on eventListener can be found here:
    The Javascript Approach
    The jQuery Approach

    Demos

    Static Demos


    Timeout Demos


    Positioning Demos


    Custom Icon Demos (Using Font-awesome)


    With Callbacks