PDA

View Full Version : 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 (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 :confused:

Thanks a lot.

MJH
12-03-2008, 08:18 PM
<!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?



<!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:



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 :eek:



<!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.



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:


setCookie('nVisits',visits,expDate);

to this:


setCookie('nVisits',visits);

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


onunload = resetCookie;

me_myself
12-04-2008, 09:37 PM
Thanks MJH. I made your changes like the below



<!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 :eek:

MJH
12-04-2008, 10:22 PM
Is this the way it's supposed to work? Works for me. Tested in FF.


<!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">

function setCookie(isName,isValue){

document.cookie = isName+"="+isValue+"";
}

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('cVisits');
if (visits)
{
alert('You have been to my web site '+ visits +' times');
visits++;
if (visits < 7)
{
document.getElementById('verNointro').style.display = "";
}
else {
document.getElementById('verIntro').style.display = "";
}
}
else {
document.getElementById('verIntro').style.display = "";
alert('This is your first visit to my site');
visits = 2;
}
setCookie('cVisits',visits);
}

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

</script>
</head>
<body>
<!-- SWF WITH INTRO -->
<div id="verIntro" style="display:none">
intro
</div>

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

</body>

MJH
12-04-2008, 10:30 PM
IE is going to keep the cookie until the user goes off-line.

me_myself
12-04-2008, 10:34 PM
Offline as in closing the browser? Do do i clear cookie from IE?

Thanks.

MJH
12-04-2008, 10:46 PM
Closing FF, will delete the cookie.

But, if you have a broadband connection, IE will not delete the cookie, even if you close the browser. You have to go offline.

Just test it with FF, you'll see.