Skip to content

Instantly share code, notes, and snippets.

@dsathyakumar

dsathyakumar/index.html

Forked from anonymous/index.html
Created December 18, 2016 12:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dsathyakumar/dd94da7d20396562d27e3e03e0d6dabc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dsathyakumar/dd94da7d20396562d27e3e03e0d6dabc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Dec 18, 2016.
    163 changes: 163 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,163 @@
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
    width: 960px;
    margin: 0 auto;
    padding: 0;
    }
    * {
    box-sizing: border-box;
    }
    .btn {
    padding: 15px 30px;
    color: #FFF;
    text-align: center;
    background: #4CAF50;
    border: 0;
    cursor: pointer;
    font-family: Verdana,sans-serif;
    font-size: 15px;
    margin: 10px;
    text-decoration: none;
    display: inline-block;
    }
    .show {
    visibility: visible !important;
    -webkit-animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
    animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
    }
    @keyframes fadeIn {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
    }
    @keyframes fadeOut {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
    }
    @-webkit-keyframes fadeIn {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
    }
    @-webkit-keyframes fadeOut {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
    }
    #toaster {
    position: fixed;
    visibility: hidden;
    padding: 20px;
    background: #333;
    color: #FFF;
    text-align: center;
    border: 1px solid #333;
    min-width: 250px;
    margin-left: -125px;
    left: 50%;
    bottom: 30px;
    border-radius: 2px;
    z-index: 1;
    }
    </style>
    <script>
    // function triggers on click of button
    function trigger(){
    var toastNotify = document.getElementById('toaster');
    // add classname to show the toast notify div
    toastNotify.className = "show";
    // hide it automatically after 3s
    setTimeout(function(){
    toastNotify.className = toastNotify.className.replace("show","");
    }, 3000);
    }
    </script>
    </head>
    <body>
    <button class="btn" id="toastNotifyTrigger" onclick="trigger()">Trigger toast</button>
    <div id="toaster" class="toast">You have 1 new friend request</div>

    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
    width: 960px;
    margin: 0 auto;
    padding: 0;
    }
    * {
    box-sizing: border-box;
    }
    .btn {
    padding: 15px 30px;
    color: #FFF;
    text-align: center;
    background: #4CAF50;
    border: 0;
    cursor: pointer;
    font-family: Verdana,sans-serif;
    font-size: 15px;
    margin: 10px;
    text-decoration: none;
    display: inline-block;
    }
    .show {
    visibility: visible !important;
    -webkit-animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
    animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
    }
    @keyframes fadeIn {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
    }
    @keyframes fadeOut {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
    }
    @-webkit-keyframes fadeIn {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
    }
    @-webkit-keyframes fadeOut {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
    }
    #toaster {
    position: fixed;
    visibility: hidden;
    padding: 20px;
    background: #333;
    color: #FFF;
    text-align: center;
    border: 1px solid #333;
    min-width: 250px;
    margin-left: -125px;
    left: 50%;
    bottom: 30px;
    border-radius: 2px;
    z-index: 1;
    }
    </style>
    <script>
    // function triggers on click of button
    function trigger(){
    var toastNotify = document.getElementById('toaster');
    // add classname to show the toast notify div
    toastNotify.className = "show";
    // hide it automatically after 3s
    setTimeout(function(){
    toastNotify.className = toastNotify.className.replace("show","");
    }, 3000);
    }
    <\/script>
    </head>
    <body>
    <button class="btn" id="toastNotifyTrigger" onclick="trigger()">Trigger toast</button>
    <div id="toaster" class="toast">You have 1 new friend request</div>
    </body>
    </html>
    </script>

    </body>
    </html>