Show div once a day
<div class="ads">Some text</div> Want to:
- show this block once a day to a visitor (without registration) (hidden by default, checking cookies, what should I use?)
- If the block has already been shown today , do not show it today anymore.
- if yeasterday was shown in the block and one day has passed, then show it again (how to check if one day has passed?)
How can i do this?
Examples of sites with this feature:
I created an example code that implements a cookie requirement:
It depends on jQuery and the plugin for cookies .
<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 by changing the system date.
You can just use some kind of code, for example, if you always start with a div with the display style 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 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. } It depends on how strictly you want this rule to be. For complete accuracy, you will need to use a database to maintain the user ID and the time displayed to the user. However, if this is not a very strict rule, you can get rough results by storing time in the cookie browser and showing / hiding the div based on this. A cookie can be read in both javascript and PHP, no matter what suits you, to show / hide the div.