Menu icon Foundation
Removing transition from alert box

Hi, I'd like to set the transition time from the alerts to zero. I have tried:

alert-box
transition: none

in CSS. The alert box goes away but the object itself doesn't. What must I do? I have no access to SASS.

alert-boxtransitioncss

Hi, I'd like to set the transition time from the alerts to zero. I have tried:

alert-box
transition: none

in CSS. The alert box goes away but the object itself doesn't. What must I do? I have no access to SASS.

herrreiprich about 5 years ago

Your css approach with "transition: none" works fine to remove the transition-effect, but I don't get you 2nd point. What do you mean with "...the object itself does not"? The DOM-Object???

Julian Claus about 5 years ago

Hey, thanks for you answer.

With the transition effect turned off the alert box object isn't removed and doesn't make room for another object.

You can see it here:

http://foundation.zurb.com/docs/components/alert_boxes.html

If you click on the x the next object goes to the place where the alert box was.

herrreiprich about 5 years ago

I've got the point. The alert-box is removed from the DOM via jquery.remove(). You have to change a few lines and make a custom version of the foundation.js.

Foundation.libs.alert (original):

  Foundation.libs.alert = {
    name : 'alert',

    version : '5.4.2',

    settings : {
      callback: function (){}
    },

    init : function (scope, method, options) {
      this.bindings(method, options);
    },

    events : function () {
      var self = this,
          S = this.S;

      $(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] .close', function (e) {
          var alertBox = S(this).closest('[' + self.attr_name() + ']'),
              settings = alertBox.data(self.attr_name(true) + '-init') || self.settings;

        e.preventDefault();
        if (Modernizr.csstransitions) {
          alertBox.addClass("alert-close");
          alertBox.on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
            S(this).trigger('close').trigger('close.fndtn.alert').remove();
            settings.callback();
          });
        } else {
          alertBox.fadeOut(300, function () {
            S(this).trigger('close').trigger('close.fndtn.alert').remove();
            settings.callback();
          });
        }
      });
    },

    reflow : function () {}
  };
}(jQuery, window, window.document));

Change the following lines in the if-else-statement:

Foundation.libs.alert (modified):

 S(this).trigger('close').trigger('close.fndtn.alert').css("visibility", "hidden");

The .remove() function will remove the node completely from the DOM. If you change the function to "display:none" it will also remove the element completely and it does not take up any place, even though the object is still in the source code. "visibility:hidden" hides the element but it still takes up space in the layout.

Be careful with custom changes, when updating foundation. Try to bind the new closing function to the "close.fndtn.alert-box" event for production code instead of changing the foundation.js like it is described in the documentation.

Julian Claus about 5 years ago

"Try to bind the new closing function to the "close.fndtn.alert-box" event for production code instead of changing the foundation.js like it is described in the documentation."

That would have been my second question. Thank you, I will give it a try.

Julian Claus about 5 years ago

Sorry, I can't get it to work. This is my code:

 ;(function ($, window, document, undefined) {
  'use strict';

  Foundation.libs.alert = {
    name : 'alert',

    version : '5.3.1',

    settings : {
      callback: function (){}
    },

    init : function (scope, method, options) {
      this.bindings(method, options);
    },

    events : function () {
      var self = this,
          S = this.S;

      $(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] a.close', function (e) {
          var alertBox = S(this).closest('[' + self.attr_name() + ']'),
              settings = alertBox.data(self.attr_name(true) + '-init') || self.settings;

        e.preventDefault();
        if (Modernizr.csstransitions) {
          alertBox.addClass("alert-close");
          alertBox.on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
            S(this).trigger('close').trigger('close.fndtn.alert').remove();
            settings.callback();
          });
        } else {
          alertBox.fadeOut(300, function () {
            S(this).trigger('close').trigger('close.fndtn.alert').css("visibility", "hidden");
            settings.callback();
          });
        }
      });
    },

    reflow : function () {}
  };
}(jQuery, window, window.document));

What I am doing wrong here? I have also tried to completely remove the .fadeout() function.

herrreiprich about 5 years ago

You have to change the code in the if-statement too, if you use modernizr (five lines before).

But I already have a better solution for you:

Bind the "close.fndtn.alert" in your html after the foundation initialization like this:

<script>
      $(document).foundation();

      $(document).on('close.fndtn.alert-box', function(event) {

           $(this).css("visibility", "hidden");

      });

</script>

This should work and you don't have to change the foundation.js :).

Julian Claus about 5 years ago

Thanks, but it's still not working. Maybe because I have an older version? Please check the site that it's about:

http://www.finca-sacabana.com/de/

At the very top there is a langauge switch.

herrreiprich about 5 years ago

seems to be a problem with the transition effect, as you mentioned earlier. Forget about the js things and set the transition to a minimum timing:

.alert-box { transition: all 1ms ease;}

Julian Claus about 5 years ago

Yeah, that was my first solution, too. It seems like there is no other. I'll do it, thanks!