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

When a radiobutton is clicked, a jQuery call to a PHP function triggers an AJAX request which results in a JavaScript function becoming unrefer

Currently, I have a situation where two radio buttons are representing different products. When one of them is clicked, the goal is to update the price displayed on the website based on the selected product. Everything seems to be working fine when using t ...

javascriptphpjqueryajaxwordpress

Using `require(variable)` is not functional in next-js environment

I'm attempting to display an image using the next-optimised-images module. When I try to include images like this: <img src={require(c.logo)} alt={c.title} /> I encounter the following error: https://i.stack.imgur.com/Jtqh9.png However, when ...

javascriptnode.jswebpacknext.js

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Rendering issue with component

I am encountered with a situation where one component is failing to render its sub-component. Surprisingly, there are no visible errors in the console. The data I'm expecting from the web call is also coming through without any issues. However, for so ...

javascriptreactjsecmascript-6

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

javascripthtmlcssjoomla

Is there a way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the in ...

cssreactjsinputbootstrap-5react-bootstrap

A simple way to add a value from a select option into a textarea when there are several dropdown menus and select elements sharing the same

I have several divs with the same class names where I need to input a value from a dropdown menu into the textarea that belongs to the div where the select element is located. I want this function to work smoothly even with more than 10 divs, which is why ...

javascripthtmljquery

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

javascripttypescriptfunctional-programming

"Looking for a way to automatically close the <li> tag in Vuejs when clicked outside

clickOutside: 0, methods: { outside: function(e) { this.clickOutside += 1 // eslint-disable-next-line console.log('clicked outside!') }, directives: { 'click-outside': { ...

javascriptvue.js

Upon clicking the IconButton within the ImageListItemBar, reveal the image within a Material-UI Dialog

import * as React from 'react'; import Box from '@mui/material/Box'; import ImageList from '@mui/material/ImageList'; import ImageListItem from '@mui/material/ImageListItem'; import ImageListItemBar from '@mui/m ...

javascriptreactjsmaterial-uijsx

Cannot utilize remote.require() in TypeScript due to compatibility issues

Recently, I've been facing a frustrating issue while developing an Electron application in TypeScript. I've been trying to execute a module from a renderer process using the code snippet below: import { remote } from 'electron' const ...

javascriptnode.jstypescriptelectron

The Owl-Carousel is malfunctioning and not working properly upon initialization

I am having trouble with the data attribute in Owl-Carousel. In my example, you can see that on slide 1 and 3 there are attributes on each item. The issue is that it only works when the event is triggered but not when the slide is loaded for slide 1 (the ...

jqueryowl-carousel

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

Can we create a popup alert that says "Error Contacting Server" when the http request does not receive any response? .controller('items_ctrl',['$scope','$http',function($scope,$http){ $scope.shop_id=localStorage.getItem(" ...

javascriptangularjs

What is the best way to extract the geometry information from a gltf object?

I've been using three.js to load a gltf file with the gltfloader, and now I'm trying to create a particle system. However, I'm having trouble getting the geometry object that I need. function initModel() { var planeGeometry = new THREE ...

javascriptthree.js

"Utilizing datatables to efficiently submit form data to the server-side

I'm curious for those who utilize the Datatables javascript plugin, is there a way to replicate this specific example using server-side data? The current example I came across has its data hardcoded directly in the HTML. ...

javascriptjquerydatatables

Maintaining photo proportions in HTML when using width and height as percentages

Is it possible to specify width and height as percentages in the <img> attributes? It seems that when I attempt to do so, the image resizes but the quality appears skewed. Here is an example of my markup with fixed attributes: <img src="#" widt ...

htmlimageimage-size

Automate the process of adding or removing a class created by material ui through programming

Is there a way to dynamically manage the material-UI classes I declared in makeStyles()? Below is the code snippet: import React from 'react'; import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../components/icons'; import { makeSt ...

javascriptreactjsmaterial-ui

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

javascriptjqueryhtmlcss

A guide to entering information into an input field with JavaScript for logging in successfully

https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...

javascripthtmljquerycssajax

The navigation bar remains fixed while the section heading fails to display properly

================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...

javascripthtmlcss