javascripthtmlcssnotify

Getting an error when notifying Html Css Js

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="nofitication_area_gonderen" id="nofitication_area_gonderen">
        <span class="nofitication_area_gonderen_top_bar">
            <label class="nofitication_area_gonderen_top_bar_lbl" id="nofitication_area_gonderen_top_bar_lbl">Notification</label>
        </span>
        
        <span  class="nofitication_area_gonderen_label" id="nofitication_area_gonderen_label"></span>
    </div>

    <button id="click_btn">Click Here</button>

    <script src="script.js"></script>
</body>
</html>

CSS :


.nofitication_area_gonderen{
    position: absolute;
    width: 341px;
    height: 83px;
    top: 48px;
    left: 790px;
    flex-shrink: 0;
    background: rgba(19, 20, 20, 0.76);
}
.nofitication_area_gonderen_top_bar{
    position: absolute;
    width: 341px;
    height: 26px;
    top: 0px;
    flex-shrink: 0;
    background: rgba(19, 20, 20, 0.88);
}

.nofitication_area_gonderen_top_bar_lbl{
    position: relative;
    left: 10px;
    top: 3px;
    
    color: #689BFF;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 141%; /* 0px */
}
.nofitication_area_gonderen_label{
    position: absolute;
    top: 26px;
    height: 57px;
    width: 341px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center; 

    color: #ffffff;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 200;
    line-height: 141%; /* 0px */
}


.slideIn {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    }
    @keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
}


/* style.css */
.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  @-webkit-keyframes slideOutUp {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      transform: translateY(-160%);
    }
  }
  
  @keyframes slideOutUp {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      transform: translateY(-160%);
    }
  }

JS :

function Notify(NotifyTime) {
    var myElement = document.getElementById('nofitication_area_gonderen');
    myElement.classList.add('slideIn');

    document.getElementById("nofitication_area_gonderen_label").innerHTML = '<span> Test <span style="color: yellow;"> Notify </span> </span>';


    setTimeout(() => {
        myElement.classList.add('slideOutUp');
        setTimeout(() => {
            myElement.classList.remove('slideOutUp');
        }, 400);
    }, NotifyTime);
}

document.getElementById("click_btn").addEventListener("click",function() {
    Notify(2500)
});

There is an error in the code here. The problem is that the notify window appears on the screen when I press the button, there is no problem. But then it gets stuck on the screen. What I want is this: Every time I press the button, the notify window appears on the screen, and if I press the button again, the notify window is reset and appears on the screen again. So, every time I press the button, the nottify window appears on the screen from scratch.

If anyone has any ideas on how I can do it, I would be very happy to help. Thanks in advance <3

I tried many ways to solve this problem, but I could not find a solution.

Solution

  • I was able to get a nice behavior with the following:

    var timeoutId = null;

function Notify(NotifyTime) {
  var myElement = document.getElementById('nofitication_area_gonderen');
  myElement.classList.remove('slideIn'); // added this line here
  myElement.classList.remove('slideOutUp'); // moved this out of the nested setTimeout
  void myElement.offsetWidth;
  myElement.classList.add('slideIn');

  document.getElementById("nofitication_area_gonderen_label").innerHTML = '<span> Test <span style="color: yellow;"> Notify </span> </span>';

  timeoutId = setTimeout(() => {
    myElement.classList.remove('slideIn'); // added this line here
    myElement.classList.add('slideOutUp');
  }, NotifyTime);
}

document.getElementById("click_btn").addEventListener("click", function() {
  if (timeoutId != null) {
    clearTimeout(timeoutId);
  }
  Notify(2500)
});

    I rearranged the adding and removing of the slide in/out classes so that it would actually stay up after sliding out. I'm also saving the id of setTimeout so I can cancel it if the button is clicked again; that way, it won't abruptly add slideOutUp in the middle of it sliding in after the new click.

    You can run it in this jsfiddle: https://jsfiddle.net/MoFried/ohtebj2v/30/

    Or you can run this snippet below:

    var timeoutId = null;

function Notify(NotifyTime) {
  var myElement = document.getElementById('nofitication_area_gonderen');
  myElement.classList.remove('slideIn'); // added this line here
  myElement.classList.remove('slideOutUp'); // moved this out of the nested setTimeout
  void myElement.offsetWidth;
  myElement.classList.add('slideIn');

  document.getElementById("nofitication_area_gonderen_label").innerHTML = '<span> Test <span style="color: yellow;"> Notify </span> </span>';

  timeoutId = setTimeout(() => {
    myElement.classList.remove('slideIn'); // added this line here
    myElement.classList.add('slideOutUp');
  }, NotifyTime);
}

document.getElementById("click_btn").addEventListener("click", function() {
  if (timeoutId != null) {
    clearTimeout(timeoutId);
  }
  Notify(2500)
});
    .nofitication_area_gonderen {
  position: absolute;
  width: 341px;
  height: 83px;
  top: 48px;
  left: 100px;
  flex-shrink: 0;
  background: rgba(19, 20, 20, 0.76);
}

.nofitication_area_gonderen_top_bar {
  position: absolute;
  width: 341px;
  height: 26px;
  top: 0px;
  flex-shrink: 0;
  background: rgba(19, 20, 20, 0.88);
}

.nofitication_area_gonderen_top_bar_lbl {
  position: relative;
  left: 10px;
  top: 3px;
  color: #689BFF;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 141%;
  /* 0px */
}

.nofitication_area_gonderen_label {
  position: absolute;
  top: 26px;
  height: 57px;
  width: 341px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 200;
  line-height: 141%;
  /* 0px */
}

.slideIn {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}


/* style.css */

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-160%);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-160%);
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="nofitication_area_gonderen" id="nofitication_area_gonderen">
    <span class="nofitication_area_gonderen_top_bar">
        <label class="nofitication_area_gonderen_top_bar_lbl" id="nofitication_area_gonderen_top_bar_lbl">Notification</label>
      </span>

    <span class="nofitication_area_gonderen_label" id="nofitication_area_gonderen_label"></span>
  </div>

  <button id="click_btn">Click Here</button>

  <script src="script.js"></script>
</body>

</html>