Take the 2-minute tour ×
Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It's 100% free, no registration required.

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);
share|improve this question
    
Alternatively, perhaps you could include a timestamp with the save message. –  moomoochoo Jul 14 at 23:30

1 Answer 1

up vote 4 down vote accepted

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

share|improve this answer
    
Thanks for your help! I couldn't find the file message.php in administrator/templates/isis/html but I cdid find it in: administrator\templates\isis\html\layouts\joomla\system\. I also couldn't manage to find where I am supposed to add the line in administrator/templates/isis/js/template.js, if I go with option 2 –  Arone Jul 14 at 12:58
    
I will update the question soon :) Out at lunch –  Lodder Jul 14 at 13:05
    
Enjoy your meal! ;-)! –  Arone Jul 14 at 13:11
1  
Right, back. Hmm you're right, the file isn't there with new Joomla installs. maybe because I upgraded from 3.2 that I have the file. I have created it for you so you can download it and add it to that folder here. If you would prefer to edit the template.js, you can add the code anywhere inside document ready. Perhaps after $('*[rel=tooltip]').tooltip(); on line 13 –  Lodder Jul 14 at 13:48
    
Your the King! Thanks so much! You should be right because, I've upgraded from J2.5 to J3.3.1 directly. That's really great! –  Arone Jul 14 at 13:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.