Hello,

I know nothing about JavaScript and right now I'm afraid I'm not in a position to research the answer to this myself.

A client requires that the "Settings have been saved" status messages (the ones in category 'status', and not those in categories 'error' or 'warning') should disappear after a certain time. In particular, when the user starts further editing (typing or clicking) it would be good if the message disappeared at that point.

Fade or sudden disappear, with or without repositioning of the rest of the page contents - none of that matters. I just need the 'status' messages to respond to a delay period (say 15 seconds), or to user activity, by disappearing.

I have a feeling that this would not be very hard. Any ideas anyone?

Thanks.

Comments

gilgabar’s picture

gilgabar commented

It is fairly easy. Something like this should work for a timer: 

setTimeout(function(){$('.messages.status').fadeOut();}, 15000);

And this should work if you want it to disappear when you click anywhere in the window: 

$(window).click(function(){$('.messages.status').fadeOut();});

I believe the growl effect also allows messages to be dismissed or disappear automatically.

martin_q’s picture

martin_q
Primary language English
Location Leipzig, Germany | Manchester, UK
commented

Thanks - where does this code go? Into some part of this module? Or in my theme?

gilgabar’s picture

gilgabar commented

It's probably best to put it in your theme. You'll want to avoid making changes to contrib modules if you can help it.

If you already have a file for miscellaneous javascript in your theme, you could add it to that. Otherwise create a file in your theme called script.js (or whatever you want to call it). Add a line to yourtheme.info: 

scripts[] = script.js

Then in script.js add: 

$(document).ready(function(){
  ...the code you want goes here.
}

That should do it. You may need to flush your caches to get script.js to load.

YK85’s picture

YK85 commented

Hello,

Is it possible to make the message fade in, then fade out after 5 seconds OR mouseclick?
I would really appreciate your help!

Thanks

gilgabar’s picture

gilgabar commented

Sure. It's pretty much the same as above. Just add an extra line to hide the message div initially and then fade it back in. And change the timer to 5000. Something like: 

  $('.messages.status').hide().fadeIn();
  setTimeout(function(){$('.messages.status').fadeOut();}, 5000);
  $(window).click(function(){$('.messages.status').fadeOut();});
YK85’s picture

YK85 commented

sorry I am very new to all this and have a question.

Is the above for when using the Message Effects module?
If I'm not going to use the Message Effects module would the code be the same?

Many thanks!

gilgabar’s picture

gilgabar commented

It is the same whether you use message effects or not.

YK85’s picture

YK85 commented

thank you!

martin_q’s picture

martin_q
Primary language English
Location Leipzig, Germany | Manchester, UK
commented

Thanks so much for all that help. Just one correction in case anyone else follows this thread. In order to get it to work, I needed to add a ) (and an optional ;) to the end of the code. So what I have ended up with is the following:

$(document).ready(function(){
  setTimeout(function(){$('.messages.status').fadeOut();}, 8000);
  $(window).click(function(){$('.messages.status').fadeOut();});
});
YK85’s picture

YK85 commented

I found the code at #9 and #5 compatible with some browsers but not with others.
Is there code to make messages disappear that is compatible with all browsers?
Thank you!

gilgabar’s picture

gilgabar commented

Which browsers have trouble with it?

YK85’s picture

YK85 commented

hi gilgabar,

the browsers are Safari and Chrome

thanks

YK85’s picture

YK85 commented

Hi again,

I was just wondering if anyone had any ideas for a better solution for browser compatibility across the major ones - IE7, IE8, Firefox, Safari, Google Chrome, in implementing messages to disappear after x seconds?

Thanks!

gilgabar’s picture

gilgabar commented

It works fine for me in both Safari and Chrome. I just double checked. What specifically is the problem that you are having?

YK85’s picture

YK85 commented

The message div hides but instead of the content underneath it moving up to where the message div used to be, the content doesn't move and there is an empty space (only in Safari/Chrome/other Webkit browsers)

Thanks!

gilgabar’s picture

gilgabar commented

Sounds like a problem with your theme's CSS. It works perfectly for me using garland. The status message fades out and everything below it moves up in it's place. Tested in both Safari and Chrome. Try using garland to confirm that it is a problem with your theme.

ojchris’s picture

ojchris commented
Issue summary: View changes

Super, this #9 worked even 9 years after. Thanks guys