CODEWITHSUNDEEP
javascriptjquerycookies
vemund
vemund

Reputation: 1807

Cookie slide down div and remember on reload

I am working on Notice bar which remembers when it has been closed and slides down if it has never been closed before.

However, if you do not close the Notice, and if you navigate through the pages of my website, it slides down each time. This can be irritating to the viewers.

How can I change the code so it slides down on the first view of the website, and then never again if you navigate other pages? I want it to slide down of first view, and then if you click a link it is just open. I tried making some changes to the last part, but could not figure it out.

Live view

var clearCookie = function() {
  var result = $.removeCookie('JSFiddleCookieNotification');
  if (result) {
    alert('Cookie removed, please reload.');
  } else {
    alert('Error: Cookie not deleted');
  }
}

var closeCookie = function() {
  $("#notice").slideUp(400, function() {
    $(this).remove();
  });
  $('#fixed').animate({
    top: 0
  }, 400);
  $.cookie('JSFiddleCookieNotification', 'Notified', {
    expires: 7
  });
}

// Bind the buttons
$("#clearCookie").on("click", clearCookie);
$(".exit").on("click", closeCookie);

// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
  $('#notice').slideDown(1000);
  var timer = setInterval(function() {
    $('navmenu, navmenu-mobile, #fixed').css({
      top: $('#notice').outerHeight()
    });
    if ($('#notice').outerHeight() == $('#fixed').css('top')) {
      clearInterval(timer);
    }
  }, 10);
}

Changes to not slide down:

var isUserSawNotify = $.cookie('userSawNotify') != null;
  if (!isUserSawNotify) {
    $.cookie('userSawNotify', 'Notified', {
        expires: 7
    });
  }  

// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
    $('#notice').slideDown(isUserSawNotify ? 0 : 1000);

 var timer = setInterval(function () {
     $('navmenu, navmenu-mobile, #fixed').css({
         top: $('#notice').outerHeight()
     });
     if ($('#notice').outerHeight() == $('#fixed').css('top')) {
         clearInterval(timer);
     }

 }, 10);
}

Upvotes: 1

Views: 115

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29257

I'm just explaining how to do the last part from my comment. (when the page is loaded, set a cookie that the user already see the notice. Next time the user will get the page, check if the cookie exist and if so, don't slideToggle)

$(document).ready(function() {
  // this is the new part
  var isUserSawNotify = $.cookie('userSawNotify') != null;
  if (!isUserSawNotify) {
    $.cookie('userSawNotify', 'Notified', {
        expires: 7
    });
  }
  if ($.cookie('JSFiddleCookieNotification') == null) {
    // edit the specific line in your existing code
    // if user already saw the notify, just pass 0 to the duration so it will show the notify without the transition
    $('#notice').slideDown(isUserSawNotify ? 0 : 1000);
  }
});

Upvotes: 1

Related Questions