Button combination

Printable View

12-01-2008, 05:24 PM
pete.lambo

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.....
12-01-2008, 05:58 PM
BLiZZaRD

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.
12-01-2008, 10:02 PM
magicyte

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
12-02-2008, 10:48 AM
pete.lambo

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

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.
12-02-2008, 10:28 PM
magicyte

Quote:

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
12-05-2008, 11:40 PM
pete.lambo

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.
12-06-2008, 01:30 AM
clueful

Quote:

Originally Posted by pete.lambo

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>
12-23-2008, 06:54 PM
magicyte

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
12-23-2008, 07:50 PM
Nile

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>
01-05-2009, 11:02 AM
pete.lambo

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

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>