Pop-up after a certain route by user

**Basss** · 10-02-2012 05:26 AM

i would like to know how to make a pop-up come up after a user has followed a certain route.

For instance, I got 4 main buttons, which are divided by 5 buttons. I'd like to create a little script that when after the user clicked on the 5 buttons from left to right, a pop-up shows up which will provide help. I know how to create a pop-up and I know how to give a proper lay-out to it. All I don't know is how to make the script which will track if the user has clicked on the 5 headers and will then open the pop-up.

thanks in advance for the help.

**vwphillips** · 10-02-2012 06:28 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

function Select(nu,max){
 if (!Select.ary){
  Select.ary=[];
 }
 Select.ary[nu]=nu;
 for (var z0=0;z0<5;z0++){
  if (typeof(Select.ary[z0])!='number'){
   return;
  }
 }
 document.getElementById('popup').style.visibility='visible';
}

</script></head>

<body>
in any order <br />
<input type="button" name="" value="Button 0" onmouseup="Select(0,5);" />
<input type="button" name="" value="Button 1" onmouseup="Select(1,5);" />
<input type="button" name="" value="Button 2" onmouseup="Select(2,5);" />
<input type="button" name="" value="Button 3" onmouseup="Select(3,5);" />
<input type="button" name="" value="Button 4" onmouseup="Select(4,5);" />

<div id="popup" style=visibility:hidden;width:200px;height:200px;background-Color:red;" ></div>
</body>

</html>

or

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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

function Select(nu,max){
 if (!Select.ary){
  Select.ary=[];
 }
 Select.ary[nu]=nu;
 if (nu>0&&(typeof(Select.ary[nu-1])!='number'||Select.ary[nu-1]!=nu-1)){
  Select.ary=[];
 }
 document.getElementById('popup').style.visibility=Select.ary.length!=max?'hidden':'visible';
}

</script>

</head>

<body>
in sequence<br />
<input type="button" name="" value="Button 0" onmouseup="Select(0,5);" />
<input type="button" name="" value="Button 1" onmouseup="Select(1,5);" />
<input type="button" name="" value="Button 2" onmouseup="Select(2,5);" />
<input type="button" name="" value="Button 3" onmouseup="Select(3,5);" />
<input type="button" name="" value="Button 4" onmouseup="Select(4,5);" />
<div id="popup" style=visibility:hidden;width:200px;height:200px;background-Color:red;" ></div>
</body>

</html>

**Basss** · 10-02-2012 06:39 AM

Thank you very much, I'll figure out how to do it with the coding i already did.

This helped me alot, and thanks for the quick answer.

**Basss** · 10-02-2012 07:13 AM

I don't think this will work, now that I've done some "trying out" myself.

I'll explain it a bit more specific:

I got, for example, 3 headers:
Home Information Contact

These 3 headers are being divided in another 4 headers, for example:
Information:
More information Information about the company General information Information you already know

Each header will open a new .html file. If the user has gone through the route "More information", then on to "Information about the company", then "General information" and after he clicked on "Information you already know" (while he's still on the .html file of "General information"), there should a popup come up displaying something.

The user has then followed a specific route through 4 .html files. How is the script going to be if I want to create a popup, after a user went through these 4 different .html files? In other words, the script needs to track where the user has been before hand, so it can check if it has already been through the first 3 html files and that it has to show a popup after it clicked on the 4th .html file.

I hope I made myself clear

**xelawho** · 10-02-2012 08:13 AM

there are two ways I can think of - setting cookies or using query strings, The problem with cookies is that people disable them. The problem with query strings is that you have to append some sort of marker to the end of each href each time the user clicks on it, and when the new page loads read the string, see if it meets your requirements and then show the popup or not.

I'd go for the second one. Let me know if you need more detail.

**Basss** · 10-03-2012 01:42 AM

Originally Posted by xelawho

there are two ways I can think of - setting cookies or using query strings, The problem with cookies is that people disable them. The problem with query strings is that you have to append some sort of marker to the end of each href each time the user clicks on it, and when the new page loads read the string, see if it meets your requirements and then show the popup or not.

I'd go for the second one. Let me know if you need more detail.

Could you give me a small example of code on how to do it with the second method?

Thanks in advance.

**xelawho** · 10-03-2012 11:18 AM

it's a little hard to demonstrate without coding the entire thing, but basically you use the onclick event of your links to fire a function:

Code:

<a href="#" onclick="reDir('one.htm'); return false">go to page one</a>
<a href="#" onclick="reDir('two.htm'); return false">go to page two</a>

that function checks if there is a query string already attached to the page, grabs it, and redirects to the address that you have passed to it, adding the existing query string plus one at the end ("home" in this example, but you have to change that depending on the page you are on) to "mark" that the user has been here:

Code:

function reDir(thepage){
var query = window.location.search.substring(1);
window.location.href=thepage+"?"+query+"home&";
}

as you go through the pages, you will end up with an address that looks something like this:
www.mysite.com?home&one&two&three

once you get to the final page you can have another function that splits the query string off (again using window.location.search.substring(1); ) and checks to see if the correct order has been followed.

there's a point there, I guess - does the order have to be correct - page one first, page two second - or can it just be that the users has seen all 5 pages? Either is possible, but the coding will be different.

hope that helps!

Thread: Pop-up after a certain route by user

Thread Tools

Display

Pop-up after a certain route by user

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions