index.html

<!-- This is an example file to show how to use the notificationManager -->

<!-- Latest jQuery -->  
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<!-- Link the notificationManager stylesheet -->
<link rel="stylesheet" href="./notificationManager.css" />
<!-- Include the notificationManager script -->
<script src="./notificationManager.js"></script>

<style>
body 
{ 
    font-family: sans-serif;  
    margin:0;
    padding:0;
}

.center 
{ 
    height: 100%;
    width: 100%;
    position: relative;
    background-color:#F0F5FF;
}

.center > div 
{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #B5D3ED;
    padding: 20px;
    border-radius: 10px;

    -webkit-box-shadow: 0px 0px 53px -7px rgba(101,129,229,0.4);
    -moz-box-shadow: 0px 0px 53px -7px rgba(101,129,229,0.4);
    box-shadow: 0px 0px 53px -7px rgba(101,129,229,0.4);
}

.center p
{
    margin:7px;
}

input[type="text"], select
{
    display: block;
    width: 200px;
    height:35px;
    border: 1px dotted #CAD3E5;
    border-radius:5px;
    padding: 5px;
    margin-bottom:10px;
}

button
{
    display:block;
    width: 200px;
    height:35px;
    background-color: #98BFE0;
    color:white;
    border-radius:5px;
    border:none;
    margin-top:16px;
}

button:hover
{
    background-color: #638EE9;
    color:white;
}

h3
{
    text-align:center;
}
</style>

<!-- Message Container -->
<div id="notificationsContainer">
</div>

<!-- Example DOM -->
<div class="center">
    <div>
        <h3>notificationManager</h3>
        <p>Position:</p>
        <p>
            <select type="text" id="msg-pos">
                <option value="topleft">Top-Left Corner</option>
                <option value="topright">Top-Right Corner</option>
                <option value="bottomleft">Bottom-Left Corner</option>
                <option value="bottomright" selected>Bottom-Right Corner</option>
            </select>
        </p>
        <p>Notification text:</p>
        <p><input type="text" id="msg-text" value="Hello World!" /></p>
        <p><input type="checkbox" id="animate" value="1" checked> Animate </p>
        <p><input type="checkbox" id="autoRemove" value="1" checked> Auto-Remove</p>
        <p><button id="notify">Notify</button></p>
    </div>
</div>


<script>
    //Create a notification manager
    var notify = new notificationManager({container: $('#notificationsContainer'), position: "bottomright" });

    //When clicking the example button
    $('#notify').on('click', function () 
    {
        //are we animating yes/no?
        var anim    = $('#animate').is(":checked") ? true : false;
        //are we automatically removing the notification after 6 seconds?
        var auto    = $('#autoRemove').is(":checked") ? true : false;
        //what's the message?
        var txt     = $('#msg-text').val();

        //notify.setPosition('topleft');

        //trigger the notification
        notify.addNotification(
        {
            message:txt, 
            animate:anim, 
            autoRemove:auto
        });
    });

   
    $( "#msg-pos" ).change(function() 
    {
        notify.setPosition( $('#msg-pos').val().toString() );
    });
</script>