Question

I have a div identified as emailsuccess. A user fills out a contact form and submits it he is redirected to http://www.mysiteurl.com?email=success. I have a div that only will display when the URL contains email=success. (Basically it just displays a message “You’re email has been sent”.) I’d like to have the message display for about 5 seconds, then fade out and remove the email=success variable from the URL so if the user reloads the page or shares it with a friend, they won’t be getting notifications that an email has been sent.

Maybe using the .delay() function I have set the integer to 5000 but I do not know how to have the content fade out and remove the variable from the URL.

Here’s my code until now:

$(document).ready(function(){
var url = document.location.href;

if (url.indexOf('/Contact-us-a/7.htm?email=success') >= 0) {
$('#emailsuccess').show();
} else {
$('#emailsuccess').hide();
};
});

Answer 1

Unless you limit yourself to browsers that support the History API, you’ll have to redirect the browser to a URL that doesn’t contain that part of the URL (will cause page reload).

Symfony Framework for PHP solves this using flash variables in templates (has nothing to do with Flash) – variables that are available on the next request, but are deleted on the next. That way, you wouldn’t have to pass that state via URL and a refresh of the same URL will not redisplay that message.