4 Replies - 455 Views - Last Post: 12 January 2018 - 07:34 PM

#1 ikhlas06   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 327
  • Joined: 20-May 16

how to use single snackbar and turn into multi snackbar

Posted 10 January 2018 - 08:42 PM

i found this cool snackbar which I can use on my test website for learning reasons

https://www.w3school...how_js_snackbar


This snackbar uses ID so I will have to copy paste css as well as javascript over and over. if I want 4 different snackbar in my site than I will have to copy paste css code 4 times... that can be annoying

so here is my apptement of setting multi snackbar. you can copy paste my code in above link to see the results. as you can see, the effect works but it loses the css code. any idea?

<!DOCTYPE html>
<html>
<head>
<style>
.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;
    left: 50%;
    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;}
}
</style>
</head>
<body>

<h2>Snackbar / Toast</h2>
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>

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

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

<script>
function myFunction() {
    var x = document.getElementById("myUniqueBar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>

</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: how to use single snackbar and turn into multi snackbar

#2 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: how to use single snackbar and turn into multi snackbar

Posted 11 January 2018 - 03:01 AM

I'm not certain what you are asking concerning the id: id's must be unique on each page, but this won't stop you having the same element-id present on many different pages.

Your css effects aren't working because with x.className = "show" you are removing the class-name "snackbar", and your effects depend on both being present (snackbar.show). A quick fix is to use:

    x.className += " show";

to append the class-name.

BTW I've never heard it called a snackbar, personally, probably toast or toast notification is more prevalent.

(It is kinda cool though :xmas: )
Was This Post Helpful? 1
  • +
  • -

#3 ikhlas06   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 327
  • Joined: 20-May 16

Re: how to use single snackbar and turn into multi snackbar

Posted 11 January 2018 - 09:49 PM

I will be making 2 snackbar on same page, so i need to do it by class or something. I did try += but it did not worked :(/>

In snackbar id... Iam just creating layout of box, so I can change snackbar to class... and have id for unquie box

This post has been edited by andrewsw: 12 January 2018 - 12:07 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: how to use single snackbar and turn into multi snackbar

Posted 12 January 2018 - 12:09 AM

You do not need to quote the previous post, just use the Reply button.

That simple change worked for me. Did you include a space before the word show?
Was This Post Helpful? 1
  • +
  • -

#5 ikhlas06   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 327
  • Joined: 20-May 16

Re: how to use single snackbar and turn into multi snackbar

Posted 12 January 2018 - 07:34 PM

No i did not added the space... works now thank you

This post has been edited by andrewsw: 13 January 2018 - 02:56 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1