www.webdeveloper.com
Results 1 to 7 of 7

Thread: Pop-up after a certain route by user

  1. #1
    Join Date
    Oct 2012
    Posts
    10

    Pop-up after a certain route by user

    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.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2012
    Posts
    10
    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.

  4. #4
    Join Date
    Oct 2012
    Posts
    10
    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

  5. #5
    Join Date
    Nov 2010
    Posts
    1,100
    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.

  6. #6
    Join Date
    Oct 2012
    Posts
    10
    Quote Originally Posted by xelawho View Post
    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.

  7. #7
    Join Date
    Nov 2010
    Posts
    1,100
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles