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