Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

Question

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created.

The current functionality includes the toast sliding down, staying visible for 3 seconds, and then automatically getting removed from the screen.

var thisToast = this.toastCounter - 1; 
    $(document).find("#toast_" + thisToast).slideDown(500); 
    setTimeout(function() {
      $(document).find("#toast_" + thisToast).remove(); 
    }, 3000);

My goal now is to enhance the toast behavior by making it fade in, stay on display for a specified duration (X seconds), fade out gracefully, and then self-destruct.

An important requirement is that when multiple toast messages are generated, each new one should be positioned below its predecessor for clear visibility.

If you require a comprehensive view of my code implementation, here it is:

CreateToast(isValid) { 
    var toastMessage;
    var foreColor;
    var backgroundColorIconDiv
    var backgroundColorContentDiv;
    var borderColor;

    if (!isValid) {
      toastMessage = "Failure";
      foreColor = "#ff0000";
      backgroundColorIconDiv = "#ff8080";
      backgroundColorContentDiv = "#ff471a";
      borderColor = "#800000";
    } else {
      toastMessage = "Success";
      foreColor = "#2fb62f";
      backgroundColorIconDiv = "#71da71";
      backgroundColorContentDiv = "#00e673";
      borderColor = "#00802b";
    }

    this.CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv); 

    this.toastCounter++; 

    var thisToast = this.toastCounter - 1;
    $(document).find("#toast_" + thisToast).slideDown(500);
    setTimeout(function() {
      $(document).find("#toast_" + thisToast).remove();
    }, 3000);
  }

  CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) { 
    var wrapperDiv = document.createElement("div");
    wrapperDiv.id = "toast_" + this.toastCounter;
    wrapperDiv.style.display = "none";
    wrapperDiv.style.margin = "0 auto";
    wrapperDiv.style.width = "200px";
    wrapperDiv.style.height = "50px";
    wrapperDiv.style.border = "2px solid " + borderColor;
    wrapperDiv.style.borderRadius = "10px";
    document.body.appendChild(wrapperDiv);

    this.CreateIconDiv(wrapperDiv, backgroundColorIconDiv);
    this.CreateContentDiv(wrapperDiv, toastMessage, foreColor, backgroundColorContentDiv);
  }

  CreateIconDiv(parentDiv, backgroundColor) { 
    var iconDiv = document.createElement("div");
    iconDiv.style.textAlign = "center";
    iconDiv.style.width = "20%";
    iconDiv.style.cssFloat = "left";
    iconDiv.style.backgroundColor = backgroundColor;
    parentDiv.appendChild(iconDiv);
  }

  CreateContentDiv(parentDiv, toastMessage, foreColor, backgroundColor) { 
    var contentDiv = document.createElement("div");
    contentDiv.style.textAlign = "center";
    contentDiv.style.width = "80%";
    contentDiv.style.cssFloat = "right";
    contentDiv.style.color = foreColor;
    contentDiv.style.backgroundColor = backgroundColor;
    contentDiv.style.fontWeight = "bold";
    contentDiv.style.fontSize = "20px";
    contentDiv.innerHTML = toastMessage;
    parentDiv.appendChild(contentDiv);
  }

Your assistance with this would be greatly appreciated :)

javascript jquery html css

Answer 1

Answer №1

If you wish to achieve a specific result, you can utilize the delay function from jQuery along with the callback of the fadeOut function in the following manner:

$("#toast_" + thisToast)
    .fadeIn(500)                  // fading in (500 ms)
    .delay(3000)                  // 3 seconds delay
    .fadeOut(500, function() {    // fade out effect for 500 ms and then remove the element
        $(this).remove();
    });

Example:

function launch() {
  $("#element").fadeIn(500)
    .delay(3000)
    .fadeOut(500, function() {
      $(this).remove();
    });
}

#element {
  background-color: blue;
  width: 120px;
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="launch();">Begin</button>
<div id="element" style="display:none;"></div>

Answer 2

If you wish to achieve a specific result, you can utilize the delay function from jQuery along with the callback of the fadeOut function in the following manner:

$("#toast_" + thisToast)
    .fadeIn(500)                  // fading in (500 ms)
    .delay(3000)                  // 3 seconds delay
    .fadeOut(500, function() {    // fade out effect for 500 ms and then remove the element
        $(this).remove();
    });

Example:

function launch() {
  $("#element").fadeIn(500)
    .delay(3000)
    .fadeOut(500, function() {
      $(this).remove();
    });
}

#element {
  background-color: blue;
  width: 120px;
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="launch();">Begin</button>
<div id="element" style="display:none;"></div>

Answer 3

Answer №2

setTimeout(() => {
  $('.test').slideDown();
  
  setTimeout(() => {
    $('.test').slideUp().remove();
  }, 3000);
}, 1000);

.test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">slide down, stay a while, slide up, remove</div>

Answer 4

setTimeout(() => {
  $('.test').slideDown();
  
  setTimeout(() => {
    $('.test').slideUp().remove();
  }, 3000);
}, 1000);

.test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">slide down, stay a while, slide up, remove</div>

Answer 5

Answer №3

I recommend utilizing the lightweight and straightforward ToastMaker library, which is a mere 1KB in size.

$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>


<button id="mybutton">Show Toast</button>

Visit this page to explore more examples featuring beautifully styled toast messages

Answer 6

I recommend utilizing the lightweight and straightforward ToastMaker library, which is a mere 1KB in size.

$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>


<button id="mybutton">Show Toast</button>

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

Answer №1

Answer №2

Answer №3

Visit this page to explore more examples featuring beautifully styled toast messages

Similar questions

Combine and calculate the total of several columns using the Loadash library

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Show whether the day is even or odd with the JavaScript getDay object

Tips for checking the validity of PHP variable names, such as $as['abc'], within an HTML textbox

What advantages come from caching the document object for improved performance?

Incorporate Security Measures into the Form

Semi-Transparent Photo Slideshow

Unable to locate or modify an item within an array

Challenges faced during the implementation of a personalized transport system in Sentry

Ways to style specific dates on a datepicker?

The issue arises when the jQuery onchange event stops functioning properly after the initial ajax call

Utilization of Bootstrap's .container class in various scenarios

Ways to address memory leakage issues in Angular

Tips for condensing text using ellipsis and Angular-FlexLayout

Storing dropdown values in variables using AJAX and JQuery

The design of the Bootstrap alert button is not working properly as it fails to close when clicked on

Is there a similar function to $.ajax for React.js and Angular.js?

Is there a way to remove specific mesh elements from a scene in Unity?

Can the information from a form be automatically submitted to the server upon selection?

Use Protractor to simulate Loss Connection by clearing LocalStorage in a Spec