CODEWITHSUNDEEP
jquerycookiesnotificationsmessage
user546585
user546585

Reputation: 129

Show cookie-enabled Jquery notification message on page load

I've been through the forums and read many posts relating to my question, but I couldn't really find the answer I'm looking for.

I want to display a message with jquery to the user on page load and allow them to close the div by clicking on the close link. Once closed, the script should remember not to open again during that session. I guess it would use a cookie.

Here's the XHTML:

<div class="alertbox">
  <span class="message">Please upgrade your browser</span>
  <div class="bloc_navigateurs"> 
    <a href="http://download.mozilla.org/?product=firefox-3.6.13&amp;os=win&amp;lang=fr" target="_blank"><img src="includes/themes/default/images/icons/misc/Firefox-16.gif" width="16" height="16" alt="Firefox" /></a>
    <a href="http://www.google.com/chrome?hl=fr" target="_blank"><img src="includes/themes/default/images/icons/misc/Chrome-16.gif" width="16" height="16" alt="Chrome" /></a>
    <a href="http://www.01net.com/telecharger/windows/Internet/navigateur/fiches/13759.html" target="_blank"><img src="includes/themes/default/images/icons/misc/IE-16.gif" width="16" height="16" alt="Internet Explorer " /></a>
  </div>
  <span class="close">close</span>
</div>

As you can see, this advises the IE6 user to upgrade their browser

Upvotes: 4

Views: 4485

Answers (3)

Rubira
Rubira

Reputation: 1

I think you gonna find some help in that link:
http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/

Upvotes: 0

FatherStorm
FatherStorm

Reputation: 7183

get the cookie functions from here then you can set alertBox to be hidden by default and :

$(document).ready(function(){
  if(readCookie('warnedIE')==null){
    $('.alertbox').show();
   createCookie('warnedIE','true',30);
  }
});

Upvotes: 0

simshaun
simshaun

Reputation: 21476

I would use the jQuery cookie plugin.

Bind a handler for the close link's onclick event that creates the cookie. Before displaying the div, check for the cookie.

<script>
$(function() {
  var $box = $(".alertbox"),
      stateCookieName = 'alertbox_state',
      alreadyClosed = $.cookie(stateCookieName);

  // The box should already be hidden initially (using CSS preferrably).
  // If not, uncomment the line below:
  // $box.hide();

  // Show the box if it hasn't already been closed.
  if (alreadyClosed != 1) {
    $box.show();
  }

  $box.find('.close').click(function() {
    $box.hide();
    $.cookie(stateCookieName, 1);
  });
});
</script>

Upvotes: 4

Related Questions