Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

onLoad JavaScript timed popup module

Posted on 2008-10-02
2
Medium Priority
?
1,134 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 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

618 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