Show div once a day

Question

<div class="ads">Some text</div>

Want to:

show this block once a day per visitor (no registration) (hidden by default, cookie check, what should be used?)
if block already was shown today, then don't show it today anymore
if block was shown yeasterday and one day is past, then show it again (how to check properly that the one day is past?)

How can I do this?

Site-examples with this feature:

http://premiumpixels.com

http://365psd.com

cookies, although if they have cookies disabled, it will show every time — Alastair Pitts, Nov 15 '11 at 06:09
or if they clear cookies. Basically, there is no way to absolutely guarantee that a div shows only once a day to any visitors. — Greg Pettit, Nov 15 '11 at 06:12
The code to read/write cookies: http://www.w3schools.com/js/js_cookies.asp — alf, Nov 15 '11 at 06:22
The code to check the "1 day ago" condition: check http://www.datejs.com/ for insanely nice syntax, `(1).days().ago()`, and http://stackoverflow.com/questions/492994/compare-2-dates-with-javascript to compare the day stored in cookie with yesterday. — alf, Nov 15 '11 at 06:25
@alf, please avoid referencing w3schools -> http://w3fools.com/ — ariefbayu, Nov 15 '11 at 06:38
I found a tutorial on this. http://www.scriptsplash.com/2009/07/show-div-once-day-using-javascript.html — , Jul 22 '12 at 11:37

score 9 · Accepted Answer · answered Nov 15 '11 at 06:23

I've created example code that implement the requirement using cookie:

It depend on jQuery and Cookie plugin.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
        <script type="text/javascript">                                         
        $(document).ready(function() {
            if( $.cookie('showOnlyOne') ){
                //it is still within the day
                //hide the div
                $('#shownOnlyOnceADay').hide();
            } else {
                //either cookie already expired, or user never visit the site
                //create the cookie
                $.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });

                //and display the div
                $('#shownOnlyOnceADay').show();
            }
        });
        </script>     
    </head>
    <body>
        <div id="shownOnlyOnceADay">
            This text should only be shown once a day!
        </div>
    </body>
</html>

Tested it by changing system date.

score 2 · Answer 2 · answered Nov 15 '11 at 06:54

You can just use some code like this, assuming you always start off with your div having its style display property set to none:

if(localStorage.last){
    if( (localStorage.last - Date.now() ) / (1000*60*60*24) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div
        document.getElementById('div').style.display = 'block'; //Show the div
        localStorage.last = Date.now(); //Reset your timer
    }
}
else {
    localStorage.last = Date.now();
    document.getElementById('div').style.display = 'block'; //Show the div because you haven't ever shown it before.
}

Reference

score 1 · Answer 3 · answered Nov 15 '11 at 06:12

1

This depends on how strict you want this rule to be. For full accuracy you will have to use database to maintain the user id and time of block shown to the user. However, if it is not a very hard and fast rule, you can get approximate results by storing the time in browsers cookie, and show/hide the div based on that. Cookie can be read in javascript as well as PHP, whatever suits you,to show/hide the div.

answered Nov 15 '11 at 06:12

DhruvPathak

42,059
16
116
175

I don't know how to check all the 3 steps using a cookies – James Nov 15 '11 at 06:15
@Brain then why not use that ? Lets call the cookie 'last_ad_time', when you load the page,if that cookie value was not found,or if it was found, then see if the value is older than 24 hours,and show the ad, also set the cookie.If the value is less than 24 hours old, do nothing. – DhruvPathak Nov 15 '11 at 06:17
how to check "if the value is older than 24 hours"? – James Nov 15 '11 at 06:22
set cookie using php `time()` function. In javascript use `new Date().getTime()` , take a difference of them, that will be in seconds, convert to hours, and check if greater than 24. – DhruvPathak Nov 15 '11 at 06:33

score 0 · Answer 4 · answered Nov 15 '11 at 06:25

0

Other can cookies, you can use localStorage to store the last time the user visited the page.

answered Nov 15 '11 at 06:25

pradeek

21,445
2
31
32

Show div once a day

4 Answers4