Slide panel up after x seconds, close on click - SET COOKIE

Question

hoping someone can point me in the right direction.

We're trying to improve subscriptions to our mailing list. When a user visits our site after x amount of seconds, i'd like a panel to slide up asking them to sign up to the mailing list.

If they click any of the buttons (sign up, close, dont show again) I want to set a cookie so the panel doesn't show again.

I've mastered the slide up/down BUT i'm a newbie at the cookie side of things and not sure how to set it so when the cookie is set, the slide action doesn't occur again.

Here's my jQuery...

// MAILING LIST SLIDER //
        // set a delay of 3 seconds before mailing list panel appears 
        $("#mailingListPanelSlide").delay(3000).slideDown("slow");

        // set triggers to close the mailing list panel & set cookie
        $("a#closeButton, p.negativeActionFormButton").click(function(){
            $("div#mailingListPanelSlide").slideUp("slow");
            $.cookie("mailingListPanel", "dontshow");
            }); 

        // HELP!!!! if cookie is set to collapsed, then don't perform slide down/hide panel altogether?
        var mailingListPanel = $.cookie("mailingListPanel");
        if (mailingListPanel == "dontshow") {
            $("div#mailingListPanelSlide").css("display","none");
            };


        //END MAILING LIST SLIDER //

score 2 · Answer 1 · answered Nov 17 '11 at 19:59

You must have the jQuery cookie plugin if you want to use $.cookie https://github.com/carhartl/jquery-cookie

if($.cookie("mailingListPanel") !== 'dontshow'){
    // set a delay of 3 seconds before mailing list panel appears 
    $("#mailingListPanelSlide").delay(3000).slideDown("slow");
}else{
    $("div#mailingListPanelSlide").css("display","none");
}
// set triggers to close the mailing list panel & set cookie
$("a#closeButton, p.negativeActionFormButton").click(function(){
    $("div#mailingListPanelSlide").slideUp("slow");
    $.cookie("mailingListPanel", "dontshow");
});

Thanks - yes I have the jQuery plugin linked in. – V Neal Nov 21 '11 at 14:33 — V Neal, Nov 21 '11 at 14:33

score 1 · Accepted Answer · answered Nov 21 '11 at 14:33

   if ($.cookie("mailingListClosed") == null && $.cookie("mailingListNeverShow") == null) {
            $("#mailingListPanelSlide").delay(4000).slideDown("slow");
        };

        // Trigger for close panel button. Close panel and set session cookie
        $("a#closeButton").click(function () {
            $("div#mailingListPanelSlide").slideUp("slow");
            $.cookie("mailingListClosed", "true", { path: "/" });
        });

        // Trigger for never show panel button. Close panel and set persistent cookie
        $("p.negativeActionFormButton").click(function () {
            $("div#mailingListPanelSlide").slideUp("slow");
            $.cookie("mailingListNeverShow", "true", { expires: 365, path: "/" });
        });

        // Set persistent cookie if user clicks on the newsletter button as well
        $("p.genericLinkButton").click(function () {
            $.cookie("mailingListNeverShow", "true", { expires: 365, path: "/" });
        });

How can I use this example in my question here: http://stackoverflow.com/questions/25726082/how-to-show-div-on-first-visit-and-not-any-visit-after-until-browser-is-closed#25726350 — SearchForKnowledge, Sep 08 '14 at 14:29

Slide panel up after x seconds, close on click - SET COOKIE

2 Answers2

Linked