straightforward pop-up alerts

Question

straightforward pop-up alerts

I need a way to incorporate simple toastr (notification) functionality without using the toastr plugin.

After 5 seconds, I would like to remove the transitioned class from the most recently added element.

var loadNotification = function(typeClass, message) {
    var notification = {
        typeClass: typeClass || 'alert-success',
        message: message
    };

    var template = UTILS.getHandleBarTemplate('#template-notification');
    var templateMarkup = template(notification);
    $('.notifications-area').append(templateMarkup);


    $('.notifications-area').find('.q-notifications').last().addClass('transitioned');
};

Current Implementation:

View Notifications Gif

javascript css notifications

Answer 1

Answer №1

To remove a specific class using the `setTimeout()` function in JavaScript, you can combine it with the `removeClass` method. Here's an example: Add the desired class to your element, then immediately call `setTimeout()` for 5000 milliseconds (5 seconds) to remove the class.

var loadNotification = function(typeClass, message) {
    var notification = {
        typeClass: typeClass || 'alert-success',
        message: message
    };

    var template = UTILS.getHandleBarTemplate('#template-notification');
    var templateMarkup = template(notification);
    $('.notifications-area').append(templateMarkup);

    $('.notifications-area').find('.q-notifications').last().addClass('transitioned');
   
    setTimeout(function() {
        $('.notifications-area').find('.q-notifications').last().removeClass('transitioned');
    }, 5000);
};

Answer 2

To remove a specific class using the `setTimeout()` function in JavaScript, you can combine it with the `removeClass` method. Here's an example: Add the desired class to your element, then immediately call `setTimeout()` for 5000 milliseconds (5 seconds) to remove the class.

var loadNotification = function(typeClass, message) {
    var notification = {
        typeClass: typeClass || 'alert-success',
        message: message
    };

    var template = UTILS.getHandleBarTemplate('#template-notification');
    var templateMarkup = template(notification);
    $('.notifications-area').append(templateMarkup);

    $('.notifications-area').find('.q-notifications').last().addClass('transitioned');
   
    setTimeout(function() {
        $('.notifications-area').find('.q-notifications').last().removeClass('transitioned');
    }, 5000);
};

Answer 3

Answer №2

After encountering unpredictable behavior with removing the last element of notifications, I implemented a solution by assigning an ID to each notification and then removing that specific element after a set interval. This approach ensures that only the intended notification is removed without affecting others.

const notificationId = $('.notifications-area').find('.q-notifications').length;
    const notification = {
        typeClass: typeClass || 'alert-failure',
        message: message,
        notificationId: notificationId
    };

    const template = QUBOLE.UTILS.getHandleBarTemplate('#template-notification');
    const templateMarkup = template(notification);
    $('.notifications-area').append(templateMarkup);

    // Applying transitioned class quickly to avoid css transitions
    setTimeout(() => {
        $('#notification_' + notificationId).addClass('transitioned');
    }, 0);

    setTimeout(() => {
        $('#notification_' + notificationId).removeClass('transitioned');
    }, 5000);
    setTimeout(() => {
        $('#notification_' + notificationId).remove();
    }, 6000);

Answer 4

After encountering unpredictable behavior with removing the last element of notifications, I implemented a solution by assigning an ID to each notification and then removing that specific element after a set interval. This approach ensures that only the intended notification is removed without affecting others.

const notificationId = $('.notifications-area').find('.q-notifications').length;
    const notification = {
        typeClass: typeClass || 'alert-failure',
        message: message,
        notificationId: notificationId
    };

    const template = QUBOLE.UTILS.getHandleBarTemplate('#template-notification');
    const templateMarkup = template(notification);
    $('.notifications-area').append(templateMarkup);

    // Applying transitioned class quickly to avoid css transitions
    setTimeout(() => {
        $('#notification_' + notificationId).addClass('transitioned');
    }, 0);

    setTimeout(() => {
        $('#notification_' + notificationId).removeClass('transitioned');
    }, 5000);
    setTimeout(() => {
        $('#notification_' + notificationId).remove();
    }, 6000);

straightforward pop-up alerts

Answer №1

Answer №2

Similar questions

What are the top recommendations for implementing typography in SCSS?

Integrate several YouTube players within a tabbed angular-ui system. Looking to incorporate a collapse feature

Encountering difficulties accessing Node.JS Sessions

Unzipping a zip file using the Command Line

The console is reporting an error stating it cannot read the charCodeAt property

Is there a way to eliminate the button's background color when clicking on an area outside of it

An uncaught exception has occurred: An error was encountered indicating that the specified path is not valid for either posix or windows systems, and it appears that there is no 'join' method defined in the

Scanner (IE5) impact on page load speeds

Click outside to toggle dropdown and hide it

Storing user input with AngularJS

Is it possible to invoke a helper function by passing a string as its name in JavaScript?

Using jQuery to remove the functionality of a file input button is ineffective

Storing Dark Mode Preference in Local Storage using JavaScript

jQuery - Resolving the Conflict

The process is consuming a significant amount of time to generate the expected result

The optional chaining feature seems to be malfunctioning as it is unable to access the property '0' of an undefined value

The node path.relative function is providing inaccurate path information

Using axios to pass FormData as a parameter in a post request

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

What is the most effective method for dividing a string in TypeScript?