Results 1 to 10 of 10

Thread: Button combination

  1. #1
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Button combination

    Hi everyone,

    I'm fairly new at coding and I always try to do what is beyond me!! [If you don't try you don't learn...] I'm building an information site and need to incorporate a 'secret access' url link which the user will be sent to when the screen is double clicked in two fixed invisible 'hot spot' areas.

    What Iím trying to do is to have either 2 and 4 invisible buttons or Ďhot spotí areas, say in each corner or at opposite corners, to access the hidden URL the user would have to enter a sequence of button presses, say maybe double click top right hand hot spot then double click bottom left hand hot spot in a given time frame to gain access, and if the time frame was exceeded nothing would happen. Hope this makes more sense.

    I've been trying for days but for the life of me can't figure it out....can anybody help....please.....

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    As stated in the other post...

    If you are bound to do it with JS though, look into mouse coordinates. You can use the X/Y of the users mouse and if they are in a certain area make click active.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    pete.lambo (12-02-2008)

  4. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    if (you_are_using_javascript) {

    To add to that, here is something that might help you get started with an idea of what you might need to do:

    Code:
    <body ondblclick="if(event.clientX >= 0 && event.clientX <= 50 && event.clientY >= 0 && event.clientY <= 50) execute_function_that_should_occur_after_double_clicking_in_the_top_left_hand_corner()">
    
    STUFF HERE
    
    </body>
    event.clientX and event.clientY look for the cursor's position in pixels. Basically what this code does upon double clicking is it checks the mouses position. If the mouse is within 50 pixels of the top-left corner of the browser's display area, it will execute a function, possibly (if you want the user to click in a series of corners during full screen) one that makes a 'click_tl' variable true (click top left). After a sequence of double clicks, the user may be given the url via window.alert() or other.

    }

    -magicyte
    Last edited by magicyte; 12-01-2008 at 10:10 PM.

  5. The Following User Says Thank You to magicyte For This Useful Post:

    pete.lambo (12-02-2008)

  6. #4
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks BLiZZaRD, sorry i 'double posted', I'm not sure if this a general coding fix or a JavaScript fix, this is all fairly new to me

    I've updated the other post with a little more information as to what I'm trying to achieve.

    Many thanks.

    As mentioned in my other post magicyte, the system is touch screen driven so I can't use mouse co-ordinates, I have to use mouse clicks.

  7. #5
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    the system is touch screen driven...I have to use mouse clicks
    I know. Perhaps you don't understand my post. The code I made checks, when the user double clicks, where the mouse's position is. If it is where you want it (in other words, if you double clicked where you wanted it), it will execute a function that does what you want to do.

    STILL DON'T GET IT?

    If you think that this just checks where the mouses position is, that is incorrect. Basically, if you double click in the top left corner of the screen, it will do what you want to do.

    -magicyte

  8. #6
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    magicyte, as I said this is all new to me and I think I've either not explained my self correctly or it's beyond me, so no, sorry, I STILL DON'T GET IT...

    I will have a play with your bit of code over the weekend if I get 5 mins, but in the mean time, I found this piece of code which I've modified a little, the original code used buttons, I've changed these to images, which will simply be transparent and placed in each corner of the screen. As you can see from the code, you have to click them in the correct sequence for it to work, which is what I wanted to achieve.

    Code:
    <html> 
    <head> 
    <script type ="text/javaScript"> 
    var n=0;
    var c=true;
    //On the next line, enter order in which buttons must be clicked.
    var a=["but1","but3","but4","but3"]
    function check(w){
    if(w!=a[n]){
    c=false;
    }
    n++
    if(n==a.length && c){
    
    window.location="http://www.google.co.uk";
    }
    else if(n==a.length){
    
    n=0;
    c=true;
    }
    }
    </script> 
    </head> 
    <body> 
    
    <div style="position: absolute; top: 91px; left: 24px; width: 92px; height: 85px; z-index: 1">
    <img border="0" src="../../Pictures/Untitled.jpg" width="92" height="85" button id = "1" onClick ="check('but1')"></div>
    
    <div style="position: absolute; top: 89px; left: 221px; width: 92px; height: 85px; z-index: 2">
    <img border="0" src="../../Pictures/Untitled.jpg" width="92" height="85" button id = "2" onClick ="check('but2')"></div>
    
    <div style="position: absolute; top: 299px; left: 21px; width: 92px; height: 85px; z-index: 3">
    <img border="0" src="../../Pictures/Untitled.jpg" width="92" height="85" button id = "3" onClick="check('but3')"></div>
    
    <div style="position: absolute; top: 305px; left: 227px; width: 92px; height: 85px; z-index: 4">
    <img border="0" src="../../Pictures/Untitled.jpg" width="92" height="85" button id = "4" onClick="check('but4')"></div>
    
    </body> 
    </html>
    Anyway, thought I'd share this with you all.

  9. #7
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by pete.lambo View Post
    need to incorporate a 'secret access' url link which the user will be sent to when the screen is double clicked in two fixed invisible 'hot spot' areas.
    The hotspots can just be inert elements like divs or spans, then there's no need for mouse co-ordinates:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Double Click Two Elements to Navigate</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <p>
    <div id = "firstDiv" style="position:absolute; top:50px; left:10px;">
    Double click this normal text first
    </div>
    
    <div id = "secondDiv" style="position:absolute; top:150px; left:100px;">
    Then double click this text within 3 seconds
    </div>
    
    <script type="text/javascript">
    
    function doubleTwo(idA, idB, delayMs, url)
    { 
     this.stage = 0;  
     this.delayMs = delayMs;  
     this.url = url;
     this.firstElem = document.getElementById( idA );  
     this.secondElem = document.getElementById( idB );  
     /*28432953637269707465726C61746976652E636F6D*/
     
     this.firstElem.ondblclick=(function(obj){return function(){obj.stage=1;setTimeout(function(){obj.stage=0;}, obj.delayMs)}})(this);
     
     this.secondElem.ondblclick=(function(obj){return function(){if(obj.stage==1){location.href=obj.url}}})(this);   
    }
    
    new doubleTwo('firstDiv', 'secondDiv', 3000, 'http://theregister.co.uk');
    
    </script>
    
    </body>
    </html>

  10. #8
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Oh. When I say mouse coordinates, I mean CURSOR coordinates. Touch screen, mouse, whatever it be, the code I gave shall work for the. In other words, when the user 'TOUCHES' the screen, the cursor will move to that spot. Once it goes there, the function checks where the cursor is.

    -magicyte

  11. #9
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I see you found my:
    http://www.dynamicdrive.com/forums/s...70&postcount=2
    It's not tidied though, put the buttons in different locations.

    Here's a slightly different version(use this one):

    HTML Code:
    <html>
    <head>
    <title>KeyPad Combination</title>
    </head>
    <body onLoad="generateKeypad()">
    <script type="text/javascript">
    var combination = "",
    disabled = "",
    innerR = "";
    var includeNum = function(self) {
        combination += self.value;
        if (combination.length == 3) {
            disabled = "disabled";
            generateKeypad();
            switch (combination) {
            case "123":
                window.location = "http://google.com";
                break;
            case "890":
                window.location = "http://dynamicdrive.com";
                break;
            default:
                window.location = "http://yahoo.com";
            }
        }
    }
    var generateKeypad = function() {
    
        for (i = 1; i <= 3; i++) {
            innerR += '<button onClick="includeNum(this)" value="' + i + '" ' + disabled + '>' + i + '</button>';
        }
        innerR += '<br />';
        for (i = 4; i <= 6; i++) {
            innerR += '<button onClick="includeNum(this)" value="' + i + '" ' + disabled + '>' + i + '</button>';
        }
        innerR += '<br />';
        for (i = 7; i <= 9; i++) {
            innerR += '<button onClick="includeNum(this)" value="' + i + '" ' + disabled + '>' + i + '</button>';
        }
        innerR += '<br /><button onClick="includeNum(this)" value="0" ' + disabled + '>0</button>';
        document.getElementById('keypad').innerHTML = innerR;
    }
    </script>
    <div id="keypad"></div>
    </body>
    </html>
    Last edited by Nile; 12-23-2008 at 08:00 PM.
    Jeremy | jfein.net

  12. #10
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi everyone,

    Happy New Year to you all and many thanks for your comments and input, it's all greatly appreciated. Firstly, apologies for not getting in touch sooner, I got sidetracked on other projects and have only just picked this up again.

    Special thanks to clueful, I very much appreciate your piece of code as it does exactly what I was looking for, can't thank you enough.

    All the best to you all,

    Peter

    Quote Originally Posted by clueful View Post
    The hotspots can just be inert elements like divs or spans, then there's no need for mouse co-ordinates:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Double Click Two Elements to Navigate</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <p>
    <div id = "firstDiv" style="position:absolute; top:50px; left:10px;">
    Double click this normal text first
    </div>
    
    <div id = "secondDiv" style="position:absolute; top:150px; left:100px;">
    Then double click this text within 3 seconds
    </div>
    
    <script type="text/javascript">
    
    function doubleTwo(idA, idB, delayMs, url)
    { 
     this.stage = 0;  
     this.delayMs = delayMs;  
     this.url = url;
     this.firstElem = document.getElementById( idA );  
     this.secondElem = document.getElementById( idB );  
     /*28432953637269707465726C61746976652E636F6D*/
     
     this.firstElem.ondblclick=(function(obj){return function(){obj.stage=1;setTimeout(function(){obj.stage=0;}, obj.delayMs)}})(this);
     
     this.secondElem.ondblclick=(function(obj){return function(){if(obj.stage==1){location.href=obj.url}}})(this);   
    }
    
    new doubleTwo('firstDiv', 'secondDiv', 3000, 'http://theregister.co.uk');
    
    </script>
    
    </body>
    </html>

Bookmarks

Posting Permissions

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