Website Knowledge

HTML, CSS, Javascript, jQuery and more

Timed Pop-up using Javascript, Jquery and Cookies

Recently I worked on a website which required that a particular section of the website should show a popup to the visitor after they have been browsing the section for a minute. This popup should only show at certain times and once it has been show to the visitor it should not pop-up again during that session. So to put it all together clearly, it had the following requirements:

1. Pop-up should show after a visitor has been browsing for a minute.
2. It should only show in a certain section of the website (multiple pages).
3. Once shown it should not pop-up during that session.
4. It should only show during certain hours of the day (US Time).

So because the pop-up needs to show on mulitple pages I needed a way to store the visitor’s time when they first hit any of the pages of that certain section. For this purpose I used a cookie. So the idea was that once the visitor lands on one of the pages, it will store the time in a cookie. Then I would check every 5 secs if the visitor has been there for a minute. If yes, I will show the pop-up. Once the pop is shown I will store another cookie that the pop up has been shown so don't show it again.

Hopefully you are familiar with Jquery, if not,  it is just a library of javascript that makes writing javascript easier. You can read more here. I used the Jquery cookie plugin. I wanted the pop-pop to look cool so I used Jquery Fancybox plugin. For cookies I used the Jquery Cookie plugin, it makes using the cookies even simpler, see here.

<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); //I converted the date to universal time becasue the visitors will come from all different time zones. Remember we need to show the pop up only during certain hours. CurrenHour = CurrentDate.getUTCHours();

So my client’s requirement was the pop up should not show during 02:00 and 08:00 UTC hours. So I checked for the condition as follows:

if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) }

So if the pop already exists then the code below will run

function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } }); </script>

So the above code first checks if the time is not between UTC hours of 2-8 it runs the code, and in the code I check if the cookie exists already because there is a possiblity that the user has already seen the popup or the user was on a different page of that section of the website, and so the time has already been stored in the cookie. Below is all the javascript code:

<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); CurrenHour = CurrentDate.getUTCHours(); if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) } function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } });

Show DIV with jQuery Fancybox on Page Load

If you ever have to show some content e.g. a div with fancybox pop up on page load, its pretty simple. Add your content to a div and then hide it with css using display:none. As described in this post, if you have fancybox version 1.3.4, add the following code

Add the following code and you should see the fancybox popup with the hidden div as its content.

$(document).ready(function(){ var popup= $('#popup').css('display','block'); $.fancybox({content:popup}); })