Delphinidin

Suppose you are in a situation where you may want to display a special offer or special message to your users, but you only want to show them the message once. I've often seen messages like this on Basecamp, a Web-based project management tool, when a login message is displayed telling me about some new feature. You can use the show method coupled with a return function that drops a cookie on your user's computer to prevent them from seeing this message again on the same computer, under that user account.

To get started, create the message and “bake" the cookie:

1. Create the HTML for the message that you wish to show and include a link to allow the user to hide it. Include a link on the page to show the message after it has been hidden:

<a href="#" class="special-offer">View this special offer!</a>
<div id="message">
Special Offer for Members! 50% off your first purchase.<br/>
<a href="#" class="hide">Hide this message</a>
</div>

2. Set up a click event for the special offer link to show the message and set the hideMessage callback function which we create shortly. Within the click event, add a selector statement for the message element with the show eff ect added to it. You do not need the pass the duration parameter into the show method. But you need to add the callback function that you want to execute after the show method has finished. In this case, it's hideMessage.

$('.special-offer').bind('click', function(){
$('#message').show(hideMessage);
});

3. Set up another click event for the hide link to hide the message and set the hide Message callback function.

$('.hide').bind('click', function(){
$('#message').hide(hideMessage);
});
4. Next, set up the hideMessage() function that drops a cookie on the user's computer after they have viewed the message.
function hideMessage() {
}

5. Create a cookie called hideCookie and set it to expire 30 days after today. The date is set up using the JavaScript date object. This is a good example of mixing native JavaScript functions with jQuery.

function hideMessage() {
var expirDate=new Date();
expirDate.setDate(expirDate.getDate()+30);
document.cookie = “name=hideCookie;expires="+expirDate.toUTCString();
}

At this point, you should be able to show and hide the message and set the cookie. But what about the users who have already seen the message? If they come back to the site tomorrow, you want to make sure they don't see it again. You can do that by creating another function that runs using the load event to hide the message if the cookie is found.

1. Add a variable that is assigned to the cookie. Using the JavaScript cookie object, you can retrieve a cookie by using document.cookie.

var messageCookie = document.cookie;

2. Create a conditional statement that tests whether the messageCookie has a value and then hides the special off er link; otherwise, do nothing.

if (messageCookie) {
// if message cookie is present, then hide special offer link
$('.special-offer').hide();
}
else {
// do nothing
}