Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the reason behind this issue and would appreciate it if someone could review my code for any possible errors.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
.toast-container {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}
[class*="toast-pos-"] {
  position: absolute;
  padding: 10px;
}
...
};
</script>

Furthermore, upon examining the modal, you will notice two distinct features - automatic fading out and clickable functionality. Is there a way to combine these two functionalities into a single modal so that it offers both "click-to-fade" and "auto-fade" capabilities? Any insights on achieving this combination would be greatly appreciated.

javascripthtmljquerycss

Answer №1

I have made the necessary adjustments to your code and now the slideUp and slideDown functionalities are functioning properly.

$(document).ready(function () {
            $(".toast-trigger").click(function (e) {
                e.preventDefault();
                datatoast = $(this).attr("data-toast");
                if ($(this).hasClass("toast-auto") && !$("#" + datatoast).is(":visible")) {
                    $("#" + datatoast).slideDown(300).delay(2000).slideUp(300);
                } else if (!$("#" + datatoast).is(":visible")) {
                    $("#" + datatoast).slideDown(300).delay(2000).slideUp(300);
                };
            });

            $(".close-toast").click(function (e) {
                e.preventDefault();
                closetoast = $(this).parent().attr("id");
                $("#" + closetoast).fadeOut(300);
            });
        });
.toast-container {
        width: 90%;
        max-width: 580px;
        margin: 0 auto;
    }

    [class*="toast-pos-"] {
        position: absolute;
        padding: 10px;
    }

    .toast-pos-top {
        top: 0;
    }

    .toast-pos-right {
        right: 0;
    }

    .toast-pos-bottom {
        bottom: 0;
    }

    .toast-pos-left {
        left: 0;
    }

    .toast {
        display: none;
        padding: 20px;
        margin: 20px 0;
        background: #eeeeee;
        color: #333333;
    }

    .close-toast {
        float: right;
        text-decoration: none;
        color: #ffffff;
        vertical-align: middle;
    }

    /* Additional Styles */
    body {
        padding: 60px 40px;
        background: #42A5F5;
        font-family: sans-serif;
    }

    .toast-trigger {
        color: #ffffff;
    }

    .toast {
        background: rgba(255, 255, 255, .5);
        color: #FFFFFF;
    }

    .toast-trigger {
        display: inline-block;
        top: 50%;
        left: 50%;
        margin: 10px;
        padding: 20px 40px;
        background: transparent;
        color: #ffffff;
        border: 1px solid #ffffff;
        text-decoration: none;
        transition: ease .2s;
    }

    .toast-trigger:hover {
        background: #ffffff;
        color: #009688;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Testing</title>
</head>

<body>
    <a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a>
    <a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a>
    <div class="toast-container toast-pos-right toast-pos-bottom">
        <!-- Toast -->
        <div class="toast" id="toast-name-1">
            <a href="#" class="close-toast">&#10006;</a>
            <b>Message 1!</b>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
        <!-- Toast -->
        <div class="toast" id="toast-name-2">
            <a href="#" class="close-toast">&#10006;</a>
            <b>Message 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript's ability to call object properties at multiple levels allows for complex data

My approach involves using mongodb in conjunction with ajax calls for data retrieval. However, I have encountered an issue where the properties needed to generate HTML from JavaScript objects are sometimes missing. Consider this ajax call: $.ajax({ ...

javascriptobject

Split your payment in half (50%) by choosing Cash on Delivery with Woocommerce's ajax feature

I'm currently working on implementing an AJAX function that allows users to pay half the total amount when using a custom cash on delivery method. The total amount should change based on whether the user selects yes or no in the radio button. This li ...

phpjqueryajaxwordpresswoocommerce

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Tips for adding a new column to a website

My goal is to inject some custom HTML and CSS into YouTube in order to create a column on the right side that shifts all content towards the left. Essentially, I am trying to replicate the functionality of the Inspect Tool in Chrome. I am working on a Chr ...

javascripthtmlcssgoogle-chrome-extension

The website is experiencing functionality issues with Ajax

On my personal website, I am trying to add a simple ajax server clock in the header section but unfortunately it is not appearing as expected. Here's the snippet of Javascript code that I am using: var httpxml; try { // Firefox, Opera 8.0+, Safari ...

javascriptphpajax

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

html <body> <header> <div class="indexHeaderWall" id="headerLeftWall"> </div> <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campo ...

htmlcssflexboxpositionweb-deployment

Searching to loop through JSON within a Sequelize / Postgres database query in order to identify a corresponding value

Hello everyone, I'm new here so please bear with me. I'm currently working on a project using Sequelize with PostgresDB in Node and I need to search for a contact by email using findOrCreate function. The email entry is stored in JSON format (se ...

javascriptjsonnode.jspostgresqlsequelize.js

The jQuery blur event triggers only on the first occurrence

Working on a script to handle a shopping cart, I ran into an issue with the blur event on the input field used to modify product quantity. The problem is that the event only triggers once and requires a page refresh to work again. Currently, this is my s ...

jqueryajaxonblur

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

javascriptcssanimation

Alert: An error message is displayed despite completing the required field

My apologies in advance as I am new to coding and there may be a glaring mistake in my current project. I am creating a survey that requires participants to enter their age. The demographic data questions are organized in a table format, with code borrowed ...

html

The declaration file for module 'react-scroll-to-bottom' appears to be missing

I recently added react-scroll-to-bottom to my project and it is listed in my dependencies. However, I am encountering the following error: Could not find a declaration file for module 'react-scroll-to-bottom'. The path 'c:/Users/J/Desktop/w ...

javascriptreactjsreact-nativenpm

Implement a JavaScript confirm dialog for a mailto hyperlink

Is there a way in javascript to automatically detect mailto links on the page and prompt a confirmation dialog when clicked by a user? I came across a method on this website for displaying an alert message. My knowledge of javascript is very basic. It&ap ...

javascriptjqueryhtmlmailtoconfirm

Check the input text using jQuery with various validation criteria

When I enter an alphanumeric code into a form, I need to validate it. After entering the code and clicking on the submit button: If there is an error in the text, an error message will be displayed. else a success message will appear upon submis ...

jqueryvalidation

In Angular 16, allow only the row that corresponds to the clicked EDIT button to remain enabled, while disabling

Exploring Angular and seeking guidance on a specific task. I currently have a table structured like this: https://i.stack.imgur.com/0u5GX.png This code is used to populate the table: <tbody> <tr *ngFor="let cus of customers;" [ngClass ...

htmlangulartypescript

The Power Duo: jQuery Form Plugin paired with jQuery Validate

Have you ever tried using the jQuery Form Plugin in combination with the jQuery Validate plugin? The issue I'm facing is that even when the required fields are empty, the form still submits via AJAX. Check out my code snippet below: // Making the ne ...

jqueryajaxvalidation

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

javascripthtmlcsssvg

Retrieve a DOCX file via AJAX response

I am encountering an issue with a Django function that returns a file: ... return FileResponse(open('demo.docx', 'rb')) I am using ajax to fetch it on the client side. Now, I need to download it on the client side. This is the code I a ...

javascriptdjangoajax

Attach a button and arrow to the cursor while it is hovering

Can anyone help me figure out how to make a button magnetize the content (arrow) along with it when hovered over by the cursor? I found an example of what I want on this website , but I am struggling to implement it in my own code. I've searched thro ...

javascripthtmlcss

Error in Layout of Navigation Panel and Tabbed Pages

Working on a school project, I encountered a challenge. I found two useful solutions from the W3 website - a sticky navigation bar and the ability to include tabs on a single page for a cleaner presentation of information. However, when trying to implement ...

javascripthtmlcssformattinguinavigationbar

issue with excessive content overflow

I'm working with a div structure where the outer div has the following CSS properties: position: relative; overflow: hidden; min-heigth: 450px; Inside this outer div, there is another div with the following CSS properties: position: absolute; top: ...

htmlcsslayout