Skip to Content

temporaryClass()

Temporarily change an elements class for a period of time and then revert back to the original class.

JavaScript May 13, 2020

Usage

JavaScript
nebula.temporaryClass(element, activeClass, inactiveClass, period)

Parameters

element
(Required) (Object or String) The element whose class will be changed
Default: None

activeClass
(Required) (String) The class to use during the active period
Default: None

inactiveClass
(Optional) (String) The class to change to after the active period has elapsed
Default: ""

period
(Optional) (Integer) How long the active class should be shown (in milliseconds)
Default: 1500

Parameter Notes

If an inactiveClass is not provided, Nebula will attempt to parse the classes for a Font Awesome class, otherwise it will default to an empty string.

Request or provide clarification »

Examples

Change an icon to a check and then after 5 seconds change it to a bomb.

JavaScript
nebula.temporaryClass(jQuery('i.example'), 'fa-check', 'fa-bomb', 5000)

Find the icon within a button and change it to a check. This attempts to revert back to whatever Font Awesome icon class was on the original icon before it was changed.

JavaScript
jQuery('a#activate').on('click', function(){
    nebula.temporaryClass(jQuery(this).find('i'), 'fa-check');
});

Temporarily add a class and then remove that class after (no inactiveClass)

JavaScript
nebula.temporaryClass(jQuery('.drop-area'), 'rejected');

Additional Notes

During the active period, a temporary-status-active class is added to the element. This can be used for additional styling or animation.

Source File

Located in /assets/js/nebula.js on line 3799.

JavaScript
nebula.temporaryClass = function(element, activeClass, inactiveClass, period){
    if ( element && activeClass ){
        if ( typeof element === 'string' ){
            element = jQuery(element);
        }

        if ( !inactiveClass ){
            if ( element.is('fa, fas, far, fab, fad') ){
                inactiveClass = /fa-(?!fw)\S+/i.test(element.attr('class')); //Match the first Font Awesome icon class that is the actual icon
            } else {
                inactiveClass = ''; //Set to an empty string to only use a temporary active class
            }
        }

        if ( !period ){
            period = 1500;
        }

        element.removeClass(inactiveClass).addClass(activeClass + ' temporary-status-active'); //Remove the inactive class and add the active class
        setTimeout(function(){
            element.removeClass(activeClass + ' temporary-status-active').addClass(inactiveClass); //After the period of time, revert back to the inactive class
        }, period);
    }

    return false;
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.temporaryClass = function(element, activeClass, inactiveClass, period){
    //Write your own code here, leave it blank, or return false.
}