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"
    			

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

    Demos

    Static Demos


    Timeout Demos


    Positioning Demos


    Custom Icon Demos (Using Font-awesome)