Add Timing in Jquery function with cookies

Question

I have made a box and it works with Jquery. Here is the code of Jquery:

$(function(){
        setTimeout(function(){
            $('.fade').show();
            $('.form').show();
        },2000)

        $('.closebtn').click(function(){
            $('.fade').hide();
            $('.form').hide();
        })
    })

And here is the code of HTML

<div class="fade"></div> <div class="form"></div> <div class="closebtn"><a href="#">x</a></div>

Once the user click on closebtn div, and then after refreshing the page, fade and form should not display for 24 hours. But just for that particular user who clicked on "closebtn".

Fade and Form should not work for next 24 hours on that particular ip address or computer or in that browser of that person's computer. Fade and Form can open if the webpage gets opened from any other computer.

But even if on that computer user clicks on "closebtn", than Fade and Form should not open on that computer too for next 24 hours.

Someone told me that this can be done with Jquery. That's why I posted it in jQuery. — Pankaj Sharma, Dec 19 '16 at 11:34
My suggestion is handle it on server side that is not proper way to do it in client side — Sudharsan S, Dec 19 '16 at 11:36
@SudharsanS I dont know why you suggest him to do it on server side? I don't see any improvements also requires more code — Rajshekar Reddy, Dec 19 '16 at 11:41
@RajshekarReddy That's what my teacher told me, he said he would tell me later. But I posted here if someone can help me with that problem here. That could save my time. — Pankaj Sharma, Dec 19 '16 at 11:42
@RajshekarReddy - look at the question and author's intent "Fade and Form should not work for next 24 hours on that particular ip address or computer or in that browser of that person's computer. Fade and Form can open if the webpage gets opened from any other computer." this is not a simple logic do it in jquery. Please don't encorage this type of activities do it in jquery — Sudharsan S, Dec 19 '16 at 11:43
@SudharsanS exactly.. so just saving the values in browser cookie is much easier right — Rajshekar Reddy, Dec 19 '16 at 11:44
That is not safe in the client side we storing that secure cookies. more safe we will do it in the server side. — Sudharsan S, Dec 19 '16 at 11:45
I am not tell that is not be done in jquery. my sugesstion do that task in server side — Sudharsan S, Dec 19 '16 at 11:46
@SudharsanS we are just saving `true` or `false` here.. I dont think that must be of any use to who ever is trying to know it.. — Rajshekar Reddy, Dec 19 '16 at 11:47
@SudharsanS I am not arguing brother.. I am curious to know why you think that way.. If I am wrong even I should learn right.. — Rajshekar Reddy, Dec 19 '16 at 12:04
@SudharsanS also you mentioned **this is not a simple logic do it in jquery. Please don't encorage this type of activities do it in jquery** I posted my answer, don't you think its simpler than having a server side code to which you do a ajax post and then save to database and again read it on page load? — Rajshekar Reddy, Dec 19 '16 at 12:08

Rajshekar Reddy · Accepted Answer · 2016-12-20T13:25:03.153

1

You can make use of Jquery Cookie plugin in and set a cookie named hideFormAndFade that expires after 24 hours, Here the logic is on page load get the value from cookie, If it says true then keep them hidden else show.

Here is the code.

After downloading the plugin include it in your page.

<script src="/path/to/js.cookie.js"></script>

In scripts you can do

$(function(){
   var flag = Cookies.get('hideFormAndFade');// this returns value if set else undefined if cookie not found

   if(flag && flag != "true"){ // if cookie found and if cookie value is not true
     setTimeout(function(){
        $('.fade').show();
        $('.form').show();
     },2000);
   }

    $('.closebtn').click(function(){
        $('.fade').hide();
        $('.form').hide();
        Cookies.set('hideFormAndFade', true, { expires: 1 }); // 1 is 1 day
    });
});

With this you also have the flexibility to set false on the cookie any time. which will remove the functionality

edited Dec 20 '16 at 13:25

answered Dec 19 '16 at 11:53

Rajshekar Reddy

17,202
3
34
54

Wow, I posted right after you, so I wasn't notified of your answer. Should I just delete mine? – rabelloo Dec 19 '16 at 11:55
@rabelloo dont delete.. you have used your valuable time.. Unless the answer is not wrong or misguiding its okay to have it.. Also your code uses a different plugin, mine is a latest version of the same author... So probably it might serve helpful for somebody.. :) – Rajshekar Reddy Dec 19 '16 at 11:59
@RajshekarReddy Hello, I have installed the cookies plugin and copied the above code on the website. But the functionality is not working. Fade and Form are not getting displayed even at first time. Any suggestions? – Pankaj Sharma Dec 20 '16 at 12:01
@PankajSharma can you check your console window for any errors. – Rajshekar Reddy Dec 20 '16 at 12:07
@RajshekarReddy Yes, it only says: JQMIGRATE: Migrate is installed, version 1.4.1 This is the website where I am using the functionality: dashingstars.com – Pankaj Sharma Dec 20 '16 at 12:32
@PankajSharma you have 2 errors right... `http://dashingstars.com/wp-content/themes/dstars/js/js.cookie.js?ver=4.6.1 Failed to load resource: the server responded with a status of 404 (Not Found)` .. your cookie.js is not found.. Check the path ... – Rajshekar Reddy Dec 20 '16 at 12:37
@RajshekarReddy The path is correct, as I can open the file with this link:: http://dashingstars.com/wp-content/themes/dstars/js/js-cookie.js – Pankaj Sharma Dec 20 '16 at 12:39
On my one laptop, it's giving the error but on the other one, It's not giving error of the cookie file. – Pankaj Sharma Dec 20 '16 at 12:43
@PankajSharma I think the file is not set for public access.. because when I try to open it it just redirects me to the main landing page – Rajshekar Reddy Dec 20 '16 at 12:46
@RajshekarReddy ohh I checked and set the file permission to 777, But still not working. – Pankaj Sharma Dec 20 '16 at 12:53
@PankajSharma change `flag != true` to `flag != "true"` looks like the value we set `true` is saved as a string.. Also on the other hand you have one more error of the same file.. seems like you are loading it twice. – Rajshekar Reddy Dec 20 '16 at 13:24

score 0 · Answer 2 · edited May 23 '17 at 12:13

Well, you can do it with jQuery or simple JavaScript, but I agree with the comments that this should be a server-side handling.

Either way, all you have to do is create a Cookie that expires in a day and check for its existence when showing the modal.

See this question for further instructions on client-side Cookie handling.

I'm using jQuery-cookie on my sample code, as recommended on referenced question.

$(function(){
    setTimeout(function() {
        // check the Cookie here
        if (!$.cookie("modal"))
            $('.fade, .form').show();
    }, 2000)

    $('.closebtn').click(function(){
        $('.fade, .form').hide();

        // add Cookie here
        $.cookie("modal", true, { expires : 1 });
    })
});

You could also do it with server-side Meta tag conditional writing, Local Storage on the browser, or several other ways.

Add Timing in Jquery function with cookies

2 Answers2