How to check if user has already seen the page - Please Help

**me_myself** · 12-02-2008, 08:58 PM

I am working on a static - html - website. It has a flash intro on the home page. Now when the user enters the site for the first time the flash intro should play. Then when he goes to another page - about us or contact - and when he comes back to index again, the intro should not play. Instead another swf file should be displayed. How do i do this? How do i check if the user has already seen the page and how do i show him a different swf file?

Please Help.

Thanks.

**Snookerman** · 12-02-2008, 11:04 PM

You need to use cookies for that, this might help you out:
http://www.thesitewizard.com/javascripts/cookies.shtml

**me_myself** · 12-03-2008, 07:52 PM

Snookerman, thanks for the reply.

I have two versions of swf and placed them in seperate div's. I am trying to show/hide the corresponding div based on cookie. If the user is newly visiting the site show div1 - if he has been on that page before show div2. Also i need to delete the cookie on exiting the website. I tried using some tutorials but no luck

i am clueless. can someone please help me out

Thanks a lot.

**MJH** · 12-03-2008, 08:18 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	var redirectPath = "./";
	var redirectPage = ["index_second.html","index_third.html","index_fourth.html","index_fifth.html"];

	var expDate = new Date();
	expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year

	function deleteCookie(isName){
   
		if (getCookie(isName))
			{
			 document.cookie = isName + "="+ "; expires=Thu, 01-Jan-70 00:00:01 GMT";
			}
	}

	function setCookie(isName,isValue,dExpires){
       
		document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
	}

	function getCookie(isName){

		var cookieStr = document.cookie;
		var startSlice = cookieStr.indexOf(isName+"=");
		if (startSlice == -1){return false}
		var endSlice = cookieStr.indexOf(";",startSlice+1)
		if (endSlice == -1){endSlice = cookieStr.length}
		var isValue = cookieStr.substring(startSlice,endSlice).replace(/^.+\=/,"");
		return isValue;
	}

	function init(){

		var visits = getCookie('nVisits');
		if (visits)
			{
			 alert('You have been to my web site '+ visits +' times');
			 visits++;
			 if (visits < 7)
				{
				 // self.location.href = redirectPath + redirectPage[visits-1];
				 alert(redirectPath + redirectPage[visits-3]);
				}
			 else	{
				 // self.location.href = redirectPath + redirectPage[redirectPage.length];
				 alert(redirectPath + redirectPage[redirectPage.length-1]);
				}
			}
		else 	{
			 alert('This is your first visit to my site');
			 visits = 2;
			}
		setCookie('nVisits',visits,expDate);	
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #eae3c6; margin-top: 60px;}
	 form {width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
	 fieldset {width: 620px; padding-left: 10px; background-color: #f0fff0; border: 1px solid #87ceeb;}
	 legend {font-family: georgia; font-size: 14pt; color: #00008b; background-color: #87ceeb; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
	.deleteBtn {background-color: #ffffff; border: 1px solid #000000; font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
	<body>
		<form action="" method="post">
		   <fieldset>
			<legend>Form</legend>
				
				<input type="button" value="Delete Cookie" class="deleteBtn" onclick="deleteCookie('nVisits')">
		   </fieldset>
		</form>
	</body>
</html>

**me_myself** · 12-03-2008, 08:27 PM

Thanks MJH for the code. Instead of having a button to delete the cookie, is it possible to auto delete the cookie on exiting the website or on closing the browser? Also instead of showing different html pages each time, i need to show the div (version_intro) only on the first view and every time after that show (version_no_intro). How do i do this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cookie Test</title>
</head>

<body>
<!-- SWF WITH INTRO -->
<div id="version_intro">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="921" height="331">
  <param name="movie" value="home_flash_intro.swf" />
  <param name="quality" value="high" />
  <object type="application/x-shockwave-flash" data="home_flash_intro.swf" width="921" height="331">
  </object>
</object>
</div>

<!-- SWF WITH NO INTRO -->
<div id="version_no_intro">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="921" height="331">
  <param name="movie" value="home_flash_no_intro.swf" />
  <param name="quality" value="high" />
  <object type="application/x-shockwave-flash" data="home_flash_no_intro.swf" width="921" height="331">
  </object>
</object>
</div>
</body>
</html>

Thanks again

**MJH** · 12-03-2008, 08:55 PM

The code I posted is just an example. I didn't customize it for your situation.

You can place this code:

Code:

function resetCookie(){

       deleteCookie('nVisits');
}

 onunload = resetCookie;

immediately prior to the CLOSING </script> tag.

The <div> part:

document.getElementById('myDiv').style.display = "none"; // hide;

or:

document.getElementById('myDiv').style.display = "" //show;

Give an ID to the div, like this:

<div id='myId'> some content </div>

I'm certain you can take it from here.

**me_myself** · 12-03-2008, 09:25 PM

MJH, i tried changing the code but it doesn't seem to work - think i screwed it up somewhere

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	//var redirectPath = "./";
	//var redirectPage = ["index_second.html","index_third.html","index_fourth.html","index_fifth.html"];

	var expDate = new Date();
	expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year

	function deleteCookie(isName){
   
		if (getCookie(isName))
			{
			 document.cookie = isName + "="+ "; expires=Thu, 01-Jan-70 00:00:01 GMT";
			}
	}

	function setCookie(isName,isValue,dExpires){
       
		document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
	}

	function getCookie(isName){

		var cookieStr = document.cookie;
		var startSlice = cookieStr.indexOf(isName+"=");
		if (startSlice == -1){return false}
		var endSlice = cookieStr.indexOf(";",startSlice+1)
		if (endSlice == -1){endSlice = cookieStr.length}
		var isValue = cookieStr.substring(startSlice,endSlice).replace(/^.+\=/,"");
		return isValue;
	}

	function init(){

		var visits = getCookie('nVisits');
		if (visits)
			{
			 //alert('You have been to my web site '+ visits +' times');
			 visits++;
			 if (visits < 7)
				{
				 document.getElementById('verIntro').style.display = "none";
				 document.getElementById('verNointro').style.display = "";
				 // self.location.href = redirectPath + redirectPage[visits-1];
				 //alert(redirectPath + redirectPage[visits-3]);
				}
			 else	{
				 document.getElementById('verIntro').style.display = "none";
				 document.getElementById('verNointro').style.display = "";
				 // self.location.href = redirectPath + redirectPage[redirectPage.length];
				 //alert(redirectPath + redirectPage[redirectPage.length-1]);
				}
			}
		else 	{
			 document.getElementById('verIntro').style.display = "";
			 document.getElementById('verNointro').style.display = "none";
			 //alert('This is your first visit to my site');
			 //visits = 2;
			}
		setCookie('nVisits',visits,expDate);	
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

function resetCookie(){

       deleteCookie('nVisits');
}

 onunload = resetCookie;
 
</script>
</head>
<body>
<!-- SWF WITH INTRO -->
<div id="verIntro">
test with intro
</div>

<!-- SWF WITH NO INTRO -->
<div id="verNointro">
test with no intro
</div>

</body>
</html>

Please have a look. Thanks a lot for the help.

**me_myself** · 12-04-2008, 07:53 PM

I think the code to delete the cookie within the script is making it not to work.

Code:

function resetCookie(){

       deleteCookie('nVisits');
}

When i removed the above code, it seems to work. I am not sure how to delete the cookie on exiting the website or closing the browser.

Thanks.

**MJH** · 12-04-2008, 09:29 PM

I think what you need is a "session" cookie.

Just eliminate the expiration date.

The cookie won't be deleted when the visitor leaves the site, but it will be deleted when they close the browser.

This:

Code:

setCookie('nVisits',visits,expDate);

to this:

Code:

setCookie('nVisits',visits);

And delete this, along with that function you deleted. Can't call a function onload that doesn't exist.

Code:

 onunload = resetCookie;

**me_myself** · 12-04-2008, 09:37 PM

Thanks MJH. I made your changes like the below

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	//var redirectPath = "./";
	//var redirectPage = ["index_second.html","index_third.html","index_fourth.html","index_fifth.html"];

	var expDate = new Date();
	expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year

	function deleteCookie(isName){
   
		if (getCookie(isName))
			{
			 document.cookie = isName + "="+ "; expires=Thu, 01-Jan-70 00:00:01 GMT";
			}
	}

	function setCookie(isName,isValue,dExpires){
       
		document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
	}

	function getCookie(isName){

		var cookieStr = document.cookie;
		var startSlice = cookieStr.indexOf(isName+"=");
		if (startSlice == -1){return false}
		var endSlice = cookieStr.indexOf(";",startSlice+1)
		if (endSlice == -1){endSlice = cookieStr.length}
		var isValue = cookieStr.substring(startSlice,endSlice).replace(/^.+\=/,"");
		return isValue;
	}

	function init(){

		var visits = getCookie('nVisits');
		if (visits)
			{
			 alert('You have been to my web site '+ visits +' times');
			 visits++;
			 if (visits < 7)
				{
				 document.getElementById('verNointro').style.display = "";
				 //self.location.href = redirectPath + redirectPage[visits-1];
				 //alert(redirectPath + redirectPage[visits-3]);
				}
			 else	{
				 document.getElementById('verNointro').style.display = "";
				 //self.location.href = redirectPath + redirectPage[redirectPage.length];
				 //alert(redirectPath + redirectPage[redirectPage.length-1]);
				}
			}
		else 	{
			 document.getElementById('verIntro').style.display = "";
			 //alert('This is your first visit to my site');
			 //visits = 2;
			}
		setCookie('nVisits',visits);	
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

//function resetCookie(){

//       deleteCookie('nVisits');
//}
//onunload = resetCookie;
 
</script>
</head>
<body>
<!-- SWF WITH INTRO -->
<div id="verIntro" style="display:none">
test with intro
</div>

<!-- SWF WITH NO INTRO -->
<div id="verNointro" style="display:none">
test with no intro
</div>

</body>
</html>

It has now stopped changing the div's - i am going nuts. Not sure what i messed this time