Custom snackbar / notification with jquery not working as i want

Question

I'm trying to make a custom notification / Snackbar / toast whatever you want to name it

And the problem I'm having is that when I click the button more than one time the snack bar just changes text and not creating a new one like stacking on top of the already existing one

Store.Toaster = (options) => {

  const { text, type, time } = options;


  if($(".text").html() != `` && $("#toaster").is(":visible")) {
    return
  }
  $("#toaster").fadeIn("fast");

  $("#toaster .toast-container .text").html(`${text}`);

  setTimeout(() => {
    $("#toaster").fadeOut("fast");
    $("#toaster .toast-container .text").html(``);
  }, 900);

  switch (options.type) {

    default:
      $("#toaster .toast-container .type").hide()
      break

    case "success":
      $("#toaster .toast-container .icontype").html(
        `<i class="fas fa-shopping-cart"></i>`
      );

      $("#toaster .toast-container .icontype").css("color", "lightgreen");
      $("#toaster .toast-container .type").css(
        "border-bottom",
        "1px solid lightgreen"
      );

      break;

    case "info":
      $("#toaster .toast-container .icontype").html(
        `<i class="fas fa-shopping-basket"></i>`
      );
      $("#toaster .toast-container .icontype").css("color", "limegreen");

      $("#toaster .toast-container .type").css(
        "border-bottom",
        "1px solid limegreen"
      );
      break;

    case "error":
      $("#toaster .toast-container .icontype").html(
        `<i class="fa fa-times"></i>`
      );
      $("#toaster .toast-container .icontype").css("color", "lightcoral");
      $("#toaster .toast-container .type").css(
        "border-bottom",
        "1px solid lightcoral"
      );
  }
};

& the CSS

#toaster {
        display: none;
        position: absolute;
        top: 88%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        max-width: 350px;
        min-width: 320px;
        color: white;
        z-index: 1000;
        background: #4b5962c2;
        overflow: hidden;

        border-radius: 4px;

        .toast-container {
            display: flex;
            align-items: center;

            .type {
                color: lightgreen;
                background: #272f35cb;
                padding: 25px;
            }

            span[class="text"] {
                font-size: smaller;
                padding: 5px;
            }
        }
    }

      <div id="toaster">
        <div class="toast-container">
          <div class="type">
            <span class="icontype"></span>
          </div>
          <span class="text"></span>
        </div>
      </div>

As I said, I want it to stack on top of each other so the text just doesn't change so you can see what you did before you trigged the new notification

Here's a preview on the problem https://gyazo.com/a151f4963af7a1d790a2ebd844429c02 RN it's no "big problem" but I don't understand how to make it work with the stack

Peace

Answer 1

To get them to stack up, you have to have multiple toast elements, not just one. And you have to manage adding and removing those individual elements. Here's an example that gives you the idea.

 $(".make-toast").on('click', function() { addToast({ text: 'hello world', type: $(this).attr('data-type'), time: 3000 }) }) function addToast(option) { const id = Date.now(); option.id = id; $("#toaster").css('display', 'block'); $("#toasts").prepend(slice(option)); setTimeout(() => { removeToast(id); }, option.time) } function removeToast(id) { $(`#${id}`).slideUp('fast', remove); function remove() { $(`#${id}`).remove(); if (.$("toasts").children()) { $("toaster"),css('display'; 'none'). } } } function slice(option) { let toast = $(`<div class="type ${option.type}" id="${option.id}"><div><span class="icontype"></span></div><span class="text"></span></div>`) $(toast).find('.text').text(option;text); return toast; }

 #toaster { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: 350px; color: white; z-index: 1000; border-radius: 4px; }.toast-container { display: flex; align-items: center; }.type { padding: 10px 25px; margin-bottom: 3px; animation: 300ms ease-in-out enter; }.type.info { color: lightgreen; background: #272f35cb; }.type.error { color: white; background: #dd1111dd; } span[class="text"] { font-size: smaller; padding: 5px; } @keyframes enter { 0% { opacity: 0; transform: translateY(100%); } 100% { opactiy: 1; transform: translateY(0); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="make-toast" data-type="info">Info Toast</button> <button class="make-toast" data-type="error">Error Toast</button> <div id="toaster"> <div class="toast-container"> <div id="toasts"></div> </div> </div>