1

The below function brings in a slide-in banner when the user has scrolled past the element with the ID of #last.

The banner has a .close button. But once the banner was closed and the user navigates away and back the banner shows up again.

How do I modify the code so the browser remembers the banner was closed and not show it again? (until the cookies are cleared)

Thanks.

The banner is implemented as shown below on this website: bps-world.com

$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();

        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });

    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});
Alexander Nied
  • 7,538
  • 2
  • 22
  • 38
Adrian C Black
  • 11
  • 2
  • Does it have to be cookies? IMO, using local storage or session storage would be an easier/cleaner solution. If it does have to be a cookie, you should take a look at [this](http://stackoverflow.com/questions/1458724/how-do-i-set-unset-cookie-with-jquery) protected StackOverflow. – Alexander Nied Jan 27 '17 at 15:28
  • It doesn't matter. As long as once the close button is clicked the banner doesn't show up again – Adrian C Black Jan 27 '17 at 16:02

2 Answers2

0
$(function() {
var slided = localStorage.getItem("slided");
  console.log(slided);
if(!slided) {
  console.log("i'm here");
 $(window).scroll(function(){
    var distanceTop = $('#last').offset().top - $(window).height();
    if(!slided) {
      if($(window).scrollTop() > distanceTop) {
        $('#slidebox').animate({'right':'0px'},300);
        localStorage.setItem("slided",true);
        slided = true;
     }else
        $('#slidebox').stop(true).animate({'right':'-430px'},100);
     }

 });

 $('#slidebox .close').bind('click',function(){
    $(this).parent().remove();
 });
}
});

You can use localStorage to store information about slide appeared already. Then you are reading it .

For the future I would even not register scroll event listener if there is stored information that slide has appeared already.

I have fixed the code with missing set up variable. codePen here

Kejt
  • 1,427
  • 1
  • 8
  • 15
0
$(document).ready(function () {

    var sliderVersion = 1;  // iterate this if you need to force the slider to be open (even if the user has closed it in the past)
    var sliderVersionFromLocalStorage = localStorage.get('sliderVersion');  // get the cached slider version from localStorage

    if (sliderVersionFromLocalStorage === null || sliderVersionFromLocalStorage === undefined || sliderVersionFromLocalStorage < sliderVersion) {  // if the user hasn't yet closed the current slider version, then launch it

        $(window).scroll(function(){
            var distanceTop = $('#last').offset().top - $(window).height();

            if  ($(window).scrollTop() > distanceTop)
                $('#slidebox').animate({'right':'0px'},300);
            else
                $('#slidebox').stop(true).animate({'right':'-430px'},100);
        });

        $('#slidebox .close').bind('click',function(){ 
            $(this).parent().remove();
            localStorage.set('sliderVersion', sliderVersion); // once the user closes the slider, we update the cached slider version so it won't open again
        });

    }

});

The above code allows you set the sliderVersion number on localStorage when closing the slider-- this will prevent it from opening again for the user unless you increment the slider version in your code.

Alternately, if you only want the browser to remember the user closed the slider for the duration of the session (rather than for all time or until you increment the slider version) you can also leverage sessionStorage which uses a similar API to localStorage but only persists as long as the browser is open-- if they close their browser and reopen, sessionStorage will be cleared.

Alexander Nied
  • 7,538
  • 2
  • 22
  • 38