AngularJS allows you to toggle the visibility of a div at set intervals, creating

Question

AngularJS allows you to toggle the visibility of a div at set intervals, creating

I am struggling with the task of showing and hiding a div that serves as an alert for my application.

Currently, I am using $interval to create a continuous show and hide action on the div. However, what I aim for is to have the DIV visible for X amount of time and then hidden for the same X amount of time.

This is how I am currently implementing it:

function showNotification(idNotification) {
       $('[id*=noti_]').addClass('dis_none');
       $('#noti_' + idNotification).removeClass('dis_none');
}

function hideNotification() {
       // $('#noti_' + idNotification).addClass('dis_none');
       $('[id*=noti_]').addClass('dis_none');
}

function checkCalendar() {
       var tomorrow = moment().add(1, "d").format("YYYY-MM-DD");
       WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) {
           // WebApiFactory.GetShiftPeriod("BodyShop", tomorrow).then(function (data) {
           if(data[0].TargetPlantValue === 0){
               showNotification("alert");
           }
       });
}

function notifications(type, time) {
       switch (type) {
           case "calendar":
               // checkCalendar();
               $interval(function () {
                   checkCalendar();
                   console.log("Active");
               },time * 1000);
               $interval(function () {
                   hideNotification();
                   console.log("Hide");
               }, time * 1001);


               break;
       }
    }

Any advice or suggestions are greatly appreciated.

javascript jquery html angularjs

Answer 1

Answer №1

Uncertain about your intentions, but if you aim to display a dialog for a set period and then hide it, it is important not to initiate both intervals simultaneously. Instead, wait until the dialog appears and then commence a timer to conceal it.

For instance, if you want to hide the dialog after '100' milliseconds.

function handleNotifications(type, duration) {
     switch (type) {
         case "calendar":
              $interval(function () {
                   checkCalendar();
                   $timeout(hideNotification, 100);
              }, duration * 1000);
         break;
     }
}

Furthermore, note that I utilized a $timeout directive in this scenario. It functions similarly to $interval, but operates only once.

How can I ensure that the time the div is displayed equals the time it is hidden?

It's slightly more complex, so let's implement a different approach. Here, we utilize a single $interval but maintain a current state called isNotificationActive to manage showing/hiding the element based on this state.

Another thing to keep in mind is the utilization of $interval.cancel to halt any previously running intervals, if applicable.

var notificationInterval = null,
    isNotificationActive = false;

function handleNotifications(type, duration) {
     switch (type) {
         case "calendar":
              $interval.cancel(notificationInterval);
              notificationInterval = $interval(updateNotificationState, duration * 1000);
         break;
     }
}

function updateNotificationState() {
     if(isNotificationActive) {
         // Hide the element here
     } else {
         // Show the element here
     }
     isNotificationActive = !isNotificationActive;    
}

Answer 2

Uncertain about your intentions, but if you aim to display a dialog for a set period and then hide it, it is important not to initiate both intervals simultaneously. Instead, wait until the dialog appears and then commence a timer to conceal it.

For instance, if you want to hide the dialog after '100' milliseconds.

function handleNotifications(type, duration) {
     switch (type) {
         case "calendar":
              $interval(function () {
                   checkCalendar();
                   $timeout(hideNotification, 100);
              }, duration * 1000);
         break;
     }
}

Furthermore, note that I utilized a $timeout directive in this scenario. It functions similarly to $interval, but operates only once.

How can I ensure that the time the div is displayed equals the time it is hidden?

It's slightly more complex, so let's implement a different approach. Here, we utilize a single $interval but maintain a current state called isNotificationActive to manage showing/hiding the element based on this state.

Another thing to keep in mind is the utilization of $interval.cancel to halt any previously running intervals, if applicable.

var notificationInterval = null,
    isNotificationActive = false;

function handleNotifications(type, duration) {
     switch (type) {
         case "calendar":
              $interval.cancel(notificationInterval);
              notificationInterval = $interval(updateNotificationState, duration * 1000);
         break;
     }
}

function updateNotificationState() {
     if(isNotificationActive) {
         // Hide the element here
     } else {
         // Show the element here
     }
     isNotificationActive = !isNotificationActive;    
}

Answer 3

Answer №2

I have a suggestion for handling notifications...

One way to manage hiding notifications is by making the notification element(s) responsible for hiding themselves. Here's an example code snippet:

function showNotification(idNotification, hideAfter) {
    var $el = $('#noti_' + idNotification);
    $timeout.cancel($el.data('timoutRef')); // Cancel any scheduled auto-hide
    $el.removeClass('dis_none'); // Display the notification
    if(hideAfter) {
        // Schedule the notification to hide after a specified time
        $el.data('timoutRef', $timeout(function() {
            $el.addClass('dis_none'); // Hide the notification
        }), hideAfter);
    }
}

Make sure to modify checkCalendar() and notifications() accordingly:

function checkCalendar() {
    WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) {
        if(data[0].TargetPlantValue === 0) {
            showNotification("alert", 1000/2); // Show immediately, then hide after half a second
        }
    });
}

function notifications(type, time) {
    switch (type) {
        case "calendar":
            $interval(checkCalendar, time * 1000); // Set interval based on total cycle time
        break;
    }
}

If your notifications do not overlap on the screen space, managing their visibility should be straightforward. However, in cases where multiple notifications might compete for the same area, consider reducing them to a single visible notification.

Answer 4

I have a suggestion for handling notifications...

One way to manage hiding notifications is by making the notification element(s) responsible for hiding themselves. Here's an example code snippet:

function showNotification(idNotification, hideAfter) {
    var $el = $('#noti_' + idNotification);
    $timeout.cancel($el.data('timoutRef')); // Cancel any scheduled auto-hide
    $el.removeClass('dis_none'); // Display the notification
    if(hideAfter) {
        // Schedule the notification to hide after a specified time
        $el.data('timoutRef', $timeout(function() {
            $el.addClass('dis_none'); // Hide the notification
        }), hideAfter);
    }
}

Make sure to modify checkCalendar() and notifications() accordingly:

function checkCalendar() {
    WebApiFactory.GetShiftPeriod("BodyShop", "2017-11-07").then(function (data) {
        if(data[0].TargetPlantValue === 0) {
            showNotification("alert", 1000/2); // Show immediately, then hide after half a second
        }
    });
}

function notifications(type, time) {
    switch (type) {
        case "calendar":
            $interval(checkCalendar, time * 1000); // Set interval based on total cycle time
        break;
    }
}

If your notifications do not overlap on the screen space, managing their visibility should be straightforward. However, in cases where multiple notifications might compete for the same area, consider reducing them to a single visible notification.

AngularJS allows you to toggle the visibility of a div at set intervals, creating

Answer №1

Answer №2

Similar questions

Utilizing Nicknames in a JavaScript Function

I'm having an issue with Internet Explorer where the link doesn't function properly when I enclose the content within an <a> tag. Could anyone

Integrating JSON with the DOM

Issue arises when applying both overflow-x:scroll and justify-content:center

Retrieve the identification number from the code snippet containing the "append(<tr><td="ID">..." template

Using JavaScript (without jQuery), take away the CSS class from an element

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

The time zones between Node 8 and Node 11 are not the same

Combining Various Time Periods in JavaScript

Navigate to a different state with ui-router upon entering the page

What is the process for running child_process when a user clicks on a view in an application

Using a ForEach iteration to loop through a table in C# and jQuery

How can React Native efficiently retrieve data from multiple APIs simultaneously?

Decrease in internal width

Sending data to a PHP file with JQuery Ajax: A step-by-step guide

Center-align the text in mui's textfield

Is it possible to delete browsing history in Express using node.js?

"Crafting a Personalized TabControl Directive in AngularJS: Step-By-

Disable the default form input reset button generated by Internet Explorer 10

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly