Make the Message "Article successfully saved" Fade Away after x seconds

by Enora Nedelec   Last Updated November 25, 2016 08:04 AM

Let's say that I edit and save an article. The message "Article successfully saved"appears in the system-message-container div and sticks there. Let's say that now I am doing some editing and I am interrupted by something else and I come back after a while on my article. I see the message "Article successfully saved" and click on close. After that I realized that in fact the message was there since the first save and that I didn't save the second edit.

I know that I could pay more attention (not only on web-editing by the way) but is there a way to make the message "Article successfully saved" fade away after 20 secondes.

PS: *You will tell me that I can click on save and close if I am not sure but I have found my self in situation when I have mess up the article when I come back and because I saw this message I told myself "ok not problem, just close the article and open it again without saving and you will get back the version you had when you came back but...".

Edit : content of administrator\templates\isis\html\layouts\joomla\system\message.php:

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  Template.Isis
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$msgList = $displayData['msgList'];

$alert = array('error' => 'alert-error', 'warning' => '', 'notice' => 'alert-info', 'message' => 'alert-success');
?>
<div id="system-message-container">
    <?php if (is_array($msgList) && $msgList) : ?>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <?php foreach ($msgList as $type => $msgs) : ?>
            <div class="alert <?php echo $alert[$type]; ?>">
                <h4 class="alert-heading"><?php echo JText::_($type); ?></h4>
                <?php if ($msgs) : ?>
                    <?php foreach ($msgs as $msg) : ?>
                        <p><?php echo $msg; ?></p>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

content of administrator\templates\isis\js\template.js:

/**
 * @package     Joomla.Administrator
 * @subpackage  Templates.isis
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @since       3.0
 */

(function($)
{
    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip();

        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $('.btn-group label:not(.active)').click(function()
        {
            var label = $(this);
            var input = $('#' + label.attr('for'));

            if (!input.prop('checked')) {
                label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
                if (input.val() == '') {
                    label.addClass('active btn-primary');
                } else if (input.val() == 0) {
                    label.addClass('active btn-danger');
                } else {
                    label.addClass('active btn-success');
                }
                input.prop('checked', true);
            }
        });
        $('.btn-group input[checked=checked]').each(function()
        {
            if ($(this).val() == '') {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-primary');
            } else if ($(this).val() == 0) {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-danger');
            } else {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-success');
            }
        });
        // add color classes to chosen field based on value
        $('select[class^="chzn-color"], select[class*=" chzn-color"]').on('liszt:ready', function(){
            var select = $(this);
            var cls = this.className.replace(/^.(chzn-color[a-z0-9-_]*)$.*/, '\1');
            var container = select.next('.chzn-container').find('.chzn-single');
            container.addClass(cls).attr('rel', 'value_' + select.val());
            select.on('change click', function()
            {
                container.attr('rel', 'value_' + select.val());
            });

        });
    });
})(jQuery);


Answers 1


You can use the following jQuery for this:

setTimeout(function() {
    $('#system-message-container').fadeOut('fast');
}, 5000);

5000 is 5 seconds, therefore you can change this value to whatever you want

Where do I add this code?

Option 1: This is a long and winded method. You can create a small plugin that calls this jQuery code.

Option 2: Simply add the above code to the following file:

administrator/templates/isis/js/template.js

Please note that Option 2 is considered a core hack, therefore if you install a Joomla update and there have been some changes to the admin template, then this change will be overridden.

Update >> Option 3:

Just noticed that you can also add this to the template override for system messages. So, open the following file in a text editor:

administrator/templates/isis/html/message.php

You should see on line 14, $buffer = null;. Directly below this, add the following:

$buffer .= "<script>
                setTimeout(function() {
                    jQuery('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

For success messages only, use this:

$buffer .= "<script>    
                setTimeout(function() {
                    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

Hope this helps

Lodder
Lodder
July 14, 2014 11:54 AM

Related Questions


Adding a popup to com_users in joomla

Updated February 29, 2016 01:04 AM

Backend user view own articles

Updated May 13, 2017 20:10 PM

Admin menu items disappearing

Updated August 03, 2015 14:04 PM