Solved

onLoad JavaScript timed popup module

Posted on 2008-10-02
2
1,120 Views
Last Modified: 2012-05-05
Hello Experts,

I have been working on a JavaScript solution for my website. The task is to get a hidden div to "pop up" in the middle of a users screen based on a set of timers. for testing purposes the timers in the code below have been set to 2 seconds and 10 seconds. So user comes to our site, 2 seconds after the page loads a floating div popup comes up asking if they need help and giving them the option to enter their info and question and submit the form, or click on a livechat button and connect directly with a live chat representative. If the user closes the popup, another one should come up lets say 2 minutes later (in the code its 10 seconds to save time on testing). there will also be a check box that allows the user to completely disable this popup in the future (something like do not show this window again). I've got all of this to work, however i ran into a problem, every time the user changes pages the longer timer resets its self so if a user has not spent 2 minutes on one page he will never see the 2nd popup. My question is, is there any way to keep track of how long the users has been on the SITE and use that for a timer for the 2nd popup.
function TimedPop() {
	var cookie = readCookie('RAQviewed');
	if (cookie != 3){
		if (cookie == 2){
			var delay = 10; // time in seconds before popup opens
			timer = setTimeout("showRAQ('floatlayer')", delay*1000);
		}
		if (cookie == 1 || cookie == null || cookie == ''){
			createCookie('RAQviewed', 2, 30);
			var delay = 2; // time in seconds before popup opens
			timer = setTimeout("showRAQ('floatlayer')", delay*1000);
		}
	}
}
function showRAQ(divid){
	var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
	if ($(divid).style.display != "block")
	{
		if(isIE){
			$(divid).style.left = (document.body.clientWidth - 400)+"px";
			$(divid).style.top = (document.body.scrollTop)+"px";
		}
		else {
			$(divid).style.left = (document.documentElement.clientWidth - 400)+"px";
			$(divid).style.top = (document.body.scrollTop)+"px";
		}
		$(divid).style.display = "block";
		var mydrag = new Draggable(divid, {scroll: window});
		new Effect.Move(divid, { x: -400, y: 250, mode: 'relative' });
	}
}
function createCookie(name, value, days)
{
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
  var ca = document.cookie.split(';');
  var nameEQ = name + "=";
  for(var i=0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces
	    if (c.indexOf(nameEQ) == 0){
	    	return c.substring(nameEQ.length, c.length);
	    }
    }
  return null;
}
 
function eraseCookie(name){createCookie(name, "", -1);}

Open in new window

0
Comment
Question by:iPromoExpert
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22629379
"however i ran into a problem, every time the user changes pages the longer timer resets its self so if a user has not spent 2 minutes on one page he will never see the 2nd popup. My question is, is there any way to keep track of how long the users has been on the SITE and use that for a timer for the 2nd popup."

That is correct, that is exactly what will happen, because the timer is reset on each page load, which is the nature of javascript and stateless HTML -- it cannot carry values beyond a new page load.  Even if you set a value in a hidden Iframe, that still depends on the page and even pages with similar iframes cannot send the value to another iframe on another page, if you have many links on your site.

In this case, if you want to keep a GLOBAL track on how long the user has been on ANY PAGE in your site, you will have to set a cookie on the user's system as to the time and date they first arrived.  This means that each page will have to load that cookie and decipher the time -- which is overhead on every page that you don't want if you want fast page loading.  Then you must somehow UNSET the cookie when the user leaves the site from any page -- all in all, a helluva lotta work.

Rethink the strategy, and come up with a way that the user gets the popup maybe on leaving the home page?  With a new strategy, see if I can help with that.
0
 
LVL 3

Author Closing Comment

by:iPromoExpert
ID: 31502476
Thanks for the attempt, I got my boss to abandon the idea of keeping a timer of a session after explaining the overhead needed for it. I will award you partial points.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Glitching Slide Show 19 39
Keyup listener getting fired on initial page load 1 52
Geolocation works...sometimes 2 36
Changing the format from a text box to a drop-down menu 9 36
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question