How to display the snack bar on page load

Question

Hi i want to show snack bar on my page after the page load without any clicking. I have a piece of code but it works in onclick. But i want to show the message without any click after the page load.

function snackBar() {
    var x = document.getElementById("snackbar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    right:0;
    bottom: 30px;
    font-size: 17px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@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;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

<button onclick="snackBar()">Show Snackbar</button>

<div id="snackbar">Some text some message..</div>

A simple google search could have provided the `window.onload` handler — Raul Rene, Apr 11 '17 at 12:20

score 1 · Answer 1 · answered Apr 11 '17 at 12:28

1

Try This one for javascript :

<body onload="snackBar()">

and if you are using jquery then you can try this one too :

$( document ).ready(function() {
    snackBar();
});

Hopefully this will works for you.. Thank you!

answered Apr 11 '17 at 12:28

Unknown_Coder

764
6
24

Approve this ans. in case if it is useful to you,. – Unknown_Coder Apr 11 '17 at 12:53

score 0 · Answer 2 · answered Apr 11 '17 at 12:31

0

I think instead of doing the onclick you would do $(document).ready(function(){ snackBar(); });

answered Apr 11 '17 at 12:31

stephenpassero

431
1
5
16

score 0 · Answer 3 · answered Apr 11 '17 at 12:47

 $(document).ready(function() {
 setTimeout(function(){ 
        var x = document.getElementById("snackbar");
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1000);
       }, 2000)
    });

 #snackbar {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        right:0;
        bottom: 30px;
        font-size: 17px;
    }

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;} 
        to {bottom: 30px; opacity: 1;}
    }

    @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;}
    }

    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="snackBar()">Show Snackbar</button>

    <div id="snackbar">Some text some message..</div>

Hi! this demo will show you the snackbar without any click only with DOM loading and you can also set the time of snackbar after window load whenever you want to show like 2000 = 2 seconds

Thank you Muzamil301. Adding close feature is possible here? If yes, how? — Prabu, Apr 12 '17 at 13:02
my pleaseure Prabu, yes this is possible but with the current situation we don't need closing feature because snackbar is getting hide by itself. if you want to hide it by yourself then add a close button and use jquery hide function to close snackbar on click at the close button — Muhammad Muzamil, Apr 13 '17 at 04:21

How to display the snack bar on page load

3 Answers3